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
-
Heading Tags (Specifically H2) being used within images
Hello, Mozzers I have a question regarding placement of heading tags. I have seen this asked a few times on the forum but some are from a couple years ago so wanted to get a more up to date answer regarding this. We want to add H2 tags across our site but our two options are to wrap images we are using as navigation on the top of the page, these are directly below our pages H1 tag and actually make sense. Example H1 title: Vehicles Images are specific brand logo with H2 being wrapped to pull the img alt: "Ford Vehicles" "Checvy vehicles" etc. The wrap would look something like this: I appreciate your time, Chris
Intermediate & Advanced SEO | | kirin443550 -
Letting Others Use Our Content: Risk-Free Attribution Methods
Hello Moz! A massive site that you've all heard of is looking to syndicate some of our original editorial content. This content is our bread and butter, and is one of the primary reasons why people use our site. Note that this site is not a competitor of ours - we're in different verticals. If this massive site were to use the content straight up, I'm fairly confident that they'd begin to outrank us for related terms pretty quickly due to their monstrous domain authority. This is complex because they'd like to use bits and pieces of the content interspersed with their own content, so they can't just implement a cross-domain canonical. It'd also be difficult to load the content in an iframe with noindex,nofollow header tags since their own content (which they want indexed) will be mixed up with ours. They're also not open to including a link back to the product pages where the corresponding reviews live on our site. Are there other courses of action that could be proposed that would protect our valuable content? Is there any evidence that using schema.org (Review and Organization schemas) pointing back to our review page URLs would provide attribution and prevent them from outranking us for associated terms?
Intermediate & Advanced SEO | | edmundsseo1 -
Image URLs - best practice
Hi - I'm assuming image URL best practice follows same principles as non image URLs (not too many files and so on) - I notice alot of web devs putting photos in subdomains, so wonder if I'm missing something (I usually avoid subdomains like the plague)!
Intermediate & Advanced SEO | | McTaggart1 -
Images with a token in the url, in Drupal. How does it affect to SEO?
Hi everyone! I am checking now a website that works with Drupal, and I found that images have urls like this... http://www.brandname.com/sites/default/files/styles/directory_xyz/public/name-of-the-picture.png?itok=T89RpzrK I was wondering how an URL like that with the token at the and, can affect to SEO. I cound't find anything. Anyone knows? Thank you!
Intermediate & Advanced SEO | | teconsite0 -
Does alt tag optimization benefit search rankings (not image search) at all?
The benefits of alt tag optimization for traditional SEO has always been a "yo yo" subject for me. Way back in the day (2004 to 2007) I believed there was some benefit to alt tag SEO. However as time went on I saw evidence that the major search engines were no longer considering alt tag SEO as a ranking signal. However I later had the pleasure to work on a joint project with a high end SEO firm in 2011/2012. My colleagues fully believed that alt tag optimization was still a very important strategy for traditional SEO at that time. Is there any evidence available that alt tags still help with traditional SEO nowadays? I'm fully aware of the benefits of optimized alt tags and image search. However could optimized alt tags be one of those ranking factors that Google removed due to abuse and later quietly resurrected?
Intermediate & Advanced SEO | | RosemaryB0 -
When Is It Necessary to GEOTAG an Image?
In local SEO practices, is it best to geotag all images or only specific ones? For example, if we have images of our retail store on our G+ page (or on our About Us page) it seems like common sense to geotag those images. However, if you're a local photographer do you want to geotag all of your images or only images shot in locations where you'd like to rank?
Intermediate & Advanced SEO | | AWCthreads0 -
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 -
Lazy loading images effect image seo?
Im using a wordpress plugin to lazy load images so that the site speed is a lot faster. Will this mess up image seo? The code for the image looks like this (with the site taken out) [ <noscript></p> <p> </p> <p>I see it has the 1x1.gif it loads to speed up page speed but does the fact the link is to the correct place make it ok?</p> <p>Thanks for letting me know</p></noscript>](http://.com/wp-content/uploads/2012/02/IMG_9477.jpg)
Intermediate & Advanced SEO | | Gordian0