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
-
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 -
Google Indexing of Images
Our site is experiencing an issue with indexation of images. The site is real estate oriented. It has 238 listings with about 1190 images. The site submits two version (different sizes) of each image to Google, so there are about 2,400 images. Only several hundred are indexed. Can adding Microdata improve the indexation of the images? Our site map is submitting images that are on no-index listing pages to Google. As a result more than 2000 images have been submitted but only a few hundred have been indexed. How should the site map deal with images that reside on no-index pages? Do images that are part of pages that are set up as "no-index" need a special "no-index" label or special treatment? My concern is that so many images that not indexed could be a red flag showing poor quality content to Google. Is it worth investing in correcting this issue, or will correcting it result in little to no improvement in SEO? Thanks, Alan
Intermediate & Advanced SEO | | Kingalan10 -
Duplicate content - Images & Attachments
I have been looking a GWT HTML improvements on our new site and I am scratching my head on how to stop some elements of the website showing up as duplicates for Meta Descriptions and Titles. For example the blog area: <a id="zip_0-anchor" class="zippedsection_title"></a>This blog is full of information and resources for you to implement; get more traffic, more leads an /blog//blog/page/2//blog/page/3//blog/page/4//blog/page/6//blog/page/9/The page has rel canonicals on them (using Yoast Wordpress SEO) and I can't see away of stopping the duplicate content. Can anyone suggest how to combat this? or is there nothing to worry about?
Intermediate & Advanced SEO | | Cocoonfxmedia0 -
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 -
Images and SEO
Hi, I would like some opinions on the topic of using images for SEO. I have come across a few sites that I see have very few backlinks, but have decent pagerank and seem to rank well for certain keywords. One such site I looked at had very little content other than tons of images (It was a joke blog that focussed on funny images, funny pics etc) and now I am starting to question whether hotlinking images assists in SEO? are there any benefits to having someone using one of your images (hosted on your site) ? I do recall reading somewhere that someone hotlinking an image is akin to a link. Any truth in this?
Intermediate & Advanced SEO | | rightmove0 -
Is there a way to stop my product pages with the "show all" catagory/attribute from duplicating content?
If there were less pages with the "show all" attribute it would be a simple fix by adding the canonical URL tag. But seeing that there are about 1,000 of them I was wondering if their was a broader fix that I could apply.
Intermediate & Advanced SEO | | cscoville0 -
How to Define rel=nofollow Attribute for External Links?
I want to define rel=nofollow attribute for Vista Patio Umbrellas. I have designed narrow by search section on home page. I want to define rel=nofollow attribute for all text links which are available in left navigation. So, what is best solution for that?
Intermediate & Advanced SEO | | CommercePundit0 -
Convert keyword rich PDFs to web pages (text & images)
SteriPEN is a portable water purifier that kills viruses, protozoa, e-coli, etc. Because of the technical and safety requirements nature of the product, our website has much documentation of testing, organisms affected, and more. These are in pdf form and can often be found through google search (and through links on specific pages). Because of the keyword-richness of these documents pertaining to microbes SteriPEN kills, etc. does it make sense to convert these pdf's into html text and images? Then I was thinking perhaps writing a blog post AND generating key links on important landing pages to these documents (as html). Removing pdfs may be harmful? Not a clue as to the cost/benefit.
Intermediate & Advanced SEO | | Timmmmy0