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
-
Should I redirect images when I migrate my site
We are about to migrate a large website with a fair few images (20,000). At the moment we include images in the sitemap.xml so they are indexed by Google and drive traffic (not sure how I can find out how much though). Current image slugs are like:
Intermediate & Advanced SEO | | ArchMedia
http://website.com/assets/images/a2/65680/thumbnails/638x425-crop.jpg?1402460458 Like on the old site, images on the new website will also have unreadable cache slugs, like:
http://website.com/site_media/media/cache/ce/7a/ce7aeffb1e5bdfc8d4288885c52de8e3.jpg All content pages on the new site will have the same slugs as on the old site. Should I go through the trouble of redirecting all these images?0 -
How to best serve images optimised for mobile devices in WordPress
Issue: Images too large for mobile devices in some articles, cannot be shrunk responsively, also should help reduce page size/improve site speed on small screen devices. I am thinking of switching depending on the user-agent, such as iPhone / Android devices and serving up an optimised, rediced size image. I envisage this working in the background / ie. hidden from authors so it is easy. Platform: WordPress Would like a solution or some feedback on people's experiences with this problem. No good plugins found that can handle this so would probably need to be custom coded, but no processing overhead, unless it is generated upon publication of article. Thanks peeps Keith H
Intermediate & Advanced SEO | | Greywood0 -
Technical Question on Image Links - Part of Addressing High Number of Outbound Links
Hi - I've read through the forum, and have been reading online for hours, and can't quite find an answer to what I'm searching for. Hopefully someone can chime in with some information. 🙂 For some background - I am looking closely at four websites, trying to bring them up to speed with current guidelines, and recoup some lost traffic and revenue. One of the things we are zeroing in on is the high amount of outbound links in general, as well as inter-site linking, and a nearly total lack of rel=nofollow on any links. Our current CMS doesn't allow an editor to add them, and it will require programming changes to modify any past links, which means I'm trying to ask for the right things, once, in order to streamline the process. One thing that is nagging at me is that the way we link to our images could be getting misconstrued by a more sensitive Penguin algorithm. Our article images are all hosted on one separate domain. This was done for website performance reasons. My concern is that we don't just embed the image via , which would make this concern moot. We also have an href tag on each to a 'larger view' of the image that precedes the img src in the code, for example - We are still running the numbers, but as some articles have several images, and we currently have about 85,000 articles on those four sites... well, that's a lot of href links to another domain. I'm suggesting that one of the steps we take is to rel=nofollow the image hrefs. Our image traffic from Google search, or any image search for that matter, is negligible. On one site it represented just .008% of our visits in July. I'm getting a little pushback on that idea as having a separate image server is standard for many websites, so I thought I'd seek additional information and opinions. Thanks!
Intermediate & Advanced SEO | | MediaCF0 -
How to See Image Metadata?
We sell 1000s of audiobooks and get our cover images and descriptions from the publisher’s sites. When I download a cover image such as this one (http://www.audiobooksonline.com/media/Alex-Cross-Run-James-Patterson.jpg)
Intermediate & Advanced SEO | | lbohen
I always rename and re-size it before installing at our Web store. Would this process result in any publisher’s metadata in the image we use at our Web store and/or anything else Google would not like?
Is there an online utility that would allow me to see metadata in our images?0 -
Show Decorative Details or Consolidate Pages with Attributes
This is a site with handcrafted home décor products. Is it better seo to have 1 product for each spoon style and use attributes to show the display options? The decorative display details are important. How do you deal with the important details of the display options? One set of products is measuring spoon sets. For each spoon there are 4 different display options: wood or pewter and hang on a tall post or hang on a wide wall hanger. And there are 8 different spoon styles. The pewter displays have design details matched to the spoon style. (eg. the fish spoon has fishes on it's hanger, the fleur de lys has fleur de lys on it) So the attributes do not change the product itself but instead change the look of how they are displayed. At present each display option/ spoon style is shown as a separate item. That makes 32 different products on the category page. What do you feel is the best way to deal with showing style details and consolidating pages for better seo? Best wishes from Vermont Handcrafter
Intermediate & Advanced SEO | | stephenfishman0 -
How are PDF image alt tags and "subject" field in document properties used for search
Hello, 1. Does google use image alt tags? According to this 2011 document, the answer is no, but I have seen others claiming yes- has google since begun using alt tags for images within PDFs? http://googlewebmastercentral.blogspot.com/2011/09/pdfs-in-google-search-results.html I am trying to decide if it is worth updating existing PDFs with alt tags for images for the purpose of SEO. 2. How does Google use the "Subject" field in document properties for a PDF? Should it be used as a description field for the document, similar to a meta description? Thank you!
Intermediate & Advanced SEO | | winstoncho0 -
Image Maps
Hey forum, I'm curious about Image Maps. Few things I'm not sure about: 1. Will the links be followed? If so, will Google respect rel="nofollow"? 2. Will the image be considered 1 image? (indexed as image, etc.) Or will each map segment be treated as a separate image? 3. Any other SEO pros\cons to consider when adding an image map to an existing page? Thanks, Corwin.
Intermediate & Advanced SEO | | corwin0 -
How can I specify which image to show in SERPs from my Rich Snippet?
When I test my web page (which has Schema.org based content embedded within it) using the Google Rich Snippets Testing Tool, it displays the last image I have defined. I want it to show the first (primary) image. Is there a way I can specify which image to use, or should I only be specifying one image? Thanks.
Intermediate & Advanced SEO | | Techboy1