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
-
Images on their own page?
Hi Mozers, We have images on their own separate pages that are then pulled onto content pages. Should the standalone pages be indexable? On the one hand, it seems good to have an image on it's own page, with it's own title. On the other hand, it may be better SEO for crawler to find the image on a content page dedicated to that topic. Unsure. Would appreciate any guidance! Yael
Intermediate & Advanced SEO | | yaelslater1 -
Image upload SEO tips?
Is there anything I can do to my images other than naming them correctly to have with SEO? Size? File type? Maybe adding text on top of them to pick up OCR? Thank you,
Intermediate & Advanced SEO | | Jamesmcd030 -
In our reports we get alt tag errors for our banner images. We are unable to add alt tags to the banner images as they live inside CSS. We can add a title tag on the div title for the banner. Does that help with SEO and accessibility?
We are unable to add alt tags to the banner images as they live inside CSS. We can add a title tag on the div title for the banner. Does that help with SEO and accessibility?
Intermediate & Advanced SEO | | Shirley.Fenlason0 -
Bulk reverse image search?
Hi, i have a couple fashion clients who have very active blogs and post lots of fashion content and images. Like 50+ images weekly. I want to check if these images have been used by other sources in bulk, are there any good reverse image search tools which can do this? Or any recommended ways to efficiently do this for a large number of images? Cheers
Intermediate & Advanced SEO | | snj_cerkez0 -
How Many Images on 1 Page Are Acceptable
Example I have a page with a slideshow of 35 pictures. They are all unique pictures and relevant to the page, have unique alt text, though no captions or description surrounding the images. Page also has a lot of unique written content. Question: is this large nr of pictures potentially overwhelming for search engines and they may think it is spammy and it would be a safer bet to only keep the top 10 pictures on such page? I did review this great whiteboard Friday - http://moz.com/blog/image-seo-basics-whiteboard-friday - and I noticed this at very end: "The other part, and I see this happen a lot especially with bigger clients, is when you put lots and lots of images on one page, like an image gallery, those pages tend to be very hard to get indexed. The reason for that is there's not a lot unique textual content. A lot of times it's just overwhelming to users. It doesn't provide a lot of benefit in a search result." My page has been indexed, but will ranking potentially be hurt and to play it safe I better reduce nr of pictures? I do understand the "do what is best for the user" scenario and that is what I am doing with a lot of amazing original pictures not found on any other website. However, with search engines we obviously have to consider how they operate as well. Thank you
Intermediate & Advanced SEO | | khi50 -
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 -
Google Preview not showing images
No matter which our pages i find in the SERP the Google Preview does not show images for www.spies.dk Try searching for "rejser til malaysia" on google.dk. The result www.spies.dk/malaysia is not showing images. Why is that? Using the "google preview tool" under labs in Google Webmaster Tools sys it found 13 errors on that page: | Ressource: | Information: http://images2.spies.dk/images/SiteID11/SiteLayout/logo-spies.png?v=4 | Indekseret http://images1.spies.dk/images/StaticLayout/Spies_hori_sRGB.png?v=1 | Indekseret http://images1.spies.dk/images/SiteID11/Button/search-button-text3.png?v=2 | Indekseret http://images2.spies.dk/images/Country/my1001_10_48.jpg?v=1 | Indekseret http://images2.spies.dk/images/SiteID11/Button/Opdater_bt.png?v=2 | Indekseret http://images1.spies.dk/images/SiteID11/Button/Sog_bt.png?v=3 | Indekseret http://images2.spies.dk/images/Country/my1002_2_22.gif?v=1 | Indekseret http://images2.spies.dk/images/Resort/bkikki1001_4_11.jpg?v=1 | Indekseret http://images2.spies.dk/images/SiteID11/Button/Vaelg_bt.png?v=7 | Indekseret http://images1.spies.dk/images/Resort/bkiskn1001_4_11.jpg?v=1 | Indekseret http://images1.spies.dk/images/Resort/kulkum1001_4_11.jpg?v=1 | Indekseret http://images1.spies.dk/images/Resort/lgklak1001_4_11.jpg?v=1 | Indekseret https://track.adform.net/serving/scripts/trackpoint/async/ | Indekseret |
Intermediate & Advanced SEO | | alsvik0 -
How to Improve or Recover Google Image Search Performance (Queries, Impressions, Clicks)?
I want to improve or recover Google image search performance for my eCommerce website. My website was working well in Google image search but, I found negative performance since implementation of CDN for all images. Before CDN my image path was as follow. http://www.vistastores.com/media/catalog/product/cache/1/image/265x/9df78eab33525d08d6e5fb8d27136e95/1/0/10133_1.jpg After CDN my image path is as follow. http://lghttp.11720.nexcesscdn.net/805298/images/media/catalog/product/cache/1/image/900x800/9df78eab33525d08d6e5fb8d27136e95/1/0/10133_1.jpg I can see that, Google image search performance is going down after set up CDN on my website. Because, all images are available on external server. So, How to recover Google image search performance after CDN or any idea to improve performance? 6871173584_a85e22ce1c_b.jpg
Intermediate & Advanced SEO | | CommercePundit0