Sitespeed: Do images require width and height attributes?
-
Currently working on a sitespeed issue, and was wondering if not having width and height for images actually do cause a problem. We simply Photoshop the resolution we require for the image and add it to the page as is. I though this would actually speed it up, but I am getting from www.gtmetrix.com that we should have them.
What's your experience? Thanks!
-
Just came across a terrific resource that reminded me you'd asked about further reading, Ben.
Check out BrowserDiet for a huge collection of resources about tuning front-end performance of websites. (You'll see #6 talks about exactly your original question)
I can also recommend reading Steve Souder's two books - High Performance Websites and Even Faster Websites - both from O'Reilly. Souders is pretty much the leading specialist in this area. He's the creator of YSlow, one of the primary tools for measuring/analyzing site speed, and is now Head Performance Engineer at Google. His website is SteveSouders.com
That'll be more than enough to get you started. Lemme know if you're still hungry for more!
Paul
P.S. The report details from tests at webpagetest.org can also teach you a huge amount, and there's a forum there run by Patrick Meenan (who built webpagetest) which is just excellent. Patrick frequently answers questions personally.
-
you're welcome, hope your site will be speeding up a lot!!!
-
Yes, thank you. We size them all to what we want on the site so we are good there. Just got done doing it, and it did make a difference. Thanks guys!
-
as Paul correctly said, if your purpose is to improve the page speed just be sure that you're not resizing the images with css/html but that you're uploading the images in that dimensions.
An image of 10241024 resized to 100100 still weights as an 1024 image so my recommendation is to resize all those images to the desired dimensions, moreover if you can use an external cdn you'll save bandwith and have those images loading outside your website. That will help reducing the loadtime of the page.
-
Perfect-O! I completely get it now. Thanks Paul. You da man!
I thought it would be faster as in my mind it was more to read, but now that I understand the loading, I get it. Guess I need to start researching how a website loads. Have any resources I can read, to up my experience with this?
I've been in development but on an application side not website side.
-
The main reason PageSpeed and YSlow recommend including width and height for images is as much the perception of page speed as the actual load time, Ben.
When you include the image dimensions, the browser can draw out the "containers" that will hold the images, reserving the space for them while they download. The browser can then go on the paint the rest of the pages CSS and objects around those "containers" without having to go back and redraw the whole page once the images have downloaded and their sizes are then known.
This gives the user the illusion of a much faster, cleaner page load, and hence the impression of a faster website.
Does that make sense?
Paul
[Edited to add: You should still keep doing what you're doing to produce "size-as" images for your pages. You don't want to be resizing images with the html dimensions, just reporting in html the actual size of the image]
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Google image search
How does google decide which image show up in the image search section ? Is is based on the alt tag of the image or is google able to detect what is image is about using neural nets ? If it is using neural nets are the images you put on your website taken into account to rank a page ? Let's say I do walking tours in Italy and put a picture of the leaning tower of pisa as a top image while I be penalised because even though the picture is in italy, you don't see anyone walking ? Thank you,
Intermediate & Advanced SEO | | seoanalytics1 -
SITEMAP - Does <changefreq>and <image:title>have any apreciable effect?</image:title></changefreq>
Hi everyone. It was hard to find some actual evidence that some of the atributes to be declared in a sitemap have some real impact.
Intermediate & Advanced SEO | | Gaston Riera
Particularly, im interested in these two: <changefreq></changefreq> and**image:title</image:title>** I've used them in a few cases just to check their effect and couldnt see any.
Do you have any experience with these? Or any other atribute that might be helpful, in order to create a more accurate and effective sitemap? Also, this could be a great topic to create a new Moz Blog post, the one about sitemap is 8years old.0 -
Null Alt Image Tags vs Missing Alt Image Tags
Hi, Would it be better for organic search to have a null alt image tag programatically added to thousands of images without alt image tags or just leave them as is. The option of adding tailored alt image tags to thousands of images is not possible. Is having sitewide alt image tags really important to organic search overall or what? Right now, probably 10% of the sites images have alt img tags. A huge number of those images are pages that aren Thanks!
Intermediate & Advanced SEO | | 945010 -
Ecommerce question - Should I use a CDN for my images. ?
Hi , We are currently in the process of re-developing out commerce website and I wondering should we use a CDN (content delivery nertwork) for our product images. My category pages are currently showing approx 21 product images per page and the page speed is okay but can be better but the page size is rather large ... anything between 600kb - 1 Meg. We do optimise the images already in photoshop. We also do things like minify etc to get the pages to load as fast as possible but I think the only thing left is using a CDN but I have heard mixed reports about using this.? We are also doing a mobile responsive version of the site to but I know that speed will be king with google and how it reflects on rankings. Whilst I can see a CDN will improve image page load speed etc, I guess there a negative SEO impact as well as images will be stored in the cloud ?.. as opposed on to on my site/database. Does anyone know how best to implement a CDN without impacting on SEO or know of any good SEO /implementation articles on this ?... Maybe do Ieave some images on my category pages so I can still do the alt image tags etc/ and have the remaining images on the CDN.? Many Thanks Sarah
Intermediate & Advanced SEO | | SarahCollins0 -
What is the point of having images clickable loading to their own page?
Hello, Noticed a lot of sites, usually wordpress (seems to be the default) have the images in their posts clickable that load to their own page, showing just the image, usually a .jpg page. I know these pages seem to be easily indexed into google image search and can drive traffic to those specific pages... My questions are... 1. What is the point of driving traffic to a page that is just the image, there are no links to other pages, no ads, nothing... 2. can you redirect these .jpg pages to the actual post page? I ask because on google image search, there are 3 links to click (website, image link, image page), when you click to view the image, it loads the .jpg page, why not have that .jpg redirect to the real content page that has ads and also has other links. Is this white-hat? 3. Do these pages with just images have any negative effect on optimization since they are just images, no content? 4. Can you monetize these .jpg pages? 5. What is the best practice? I understand there is value in traffic, but what is the point of image traffic if I can't monetize those pages?
Intermediate & Advanced SEO | | WebServiceConsulting.com0 -
Given the new image mismatch penalty, is watermarking considered "cloaking"?
Google has released a new penalty called "Image mismatch". Which actually penalizes sites that show images to Google than are not the same as the ones offered to users when accessing the site. Although I agree with those sites that the image is completely different that the one shown in image search, lately I've seen lots of big sites using some king of watermark or layer that reads something like "To see the high quality of this image, click here" in order to "force" the user to visit the site hosting the image. Considering the latest changes to Google's image search, which made lots of sites lose their "image search traffic", are these techniques considered part of the new penalty Google is applying? Or does it only apply to the first scenario when the image is completely different? You can read more on this new penalty here.
Intermediate & Advanced SEO | | FedeEinhorn0 -
My site has multiple H1's, one in the logo image and one as a header. Is there any official stance from the search engines on this?
In doing some research on this issue, I came across this blog post which seems to suggest it certainly will be a trigger to search engines. http://www.seounique.com/blog/multiple-h1-tags-triggers-google-penalty/ Could be a false positive on his specific case, but I was wondering what the community thought. Thanks in advance!
Intermediate & Advanced SEO | | jim_shook0 -
First Link Priority question - image/logo in header links to homepage
I have not found a clear answer to this particular aspect of the "first link priority" discussion, so wanted to ask here. Noble Samurai (makers of Market Samurai seo software) just posted a video discussing this topic and referencing specifically a use case example where when you disable all the css and view the page the way google sees it, many times companies use an image/logo in their header which links to their homepage. In my case, if you visit our site you can see the logo linking back to the homepage, which is present on every page within the site. When you disable the styling and view the site in a linear path, the logo is the first link. I'd love for our first link to our homepage include a primary keyword phrase anchor text. Noble Samurai (presumably seo experts) posted a video explaining this specifically http://www.noblesamurai.com/blog/market-samurai/website-optimization-first-link-priority-2306 and their suggested code implementations to "fix" it http://www.noblesamurai.com/first-link-priority-templates which use CSS and/or javascript to alter the way it is presented to the spiders. My web developer referred me to google's webmaster central: http://www.google.com/support/webmasters/bin/answer.py?answer=66353 where they seem to indicate that this would be attempting to hide text / links. Is this a good or bad thing to do?
Intermediate & Advanced SEO | | dcutt0