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
-
Why Aren't My Images Being Indexed?
Hi, One of my clients submitted an image sitemap with 465 images. It was submitted on July 20 2017 to Google Search Console. None of the submitted images have been indexed. I'm wondering why? Here's the image sitemap: http://www.tagible.com/images_sitemap.xml We do use a CDN for the images, and the images are hosted on a subdomain of the client's site: ex. https://photos.tagible.com/images/Les_Invalides_Court_Of_Honor.jpg Thanks in advance! Cheers,
Intermediate & Advanced SEO | | SEOdub
Julian0 -
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 -
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 -
How to manage images
We have been using Google+ to load our images straight on to our site, we did this to make sure our site loaded fast. google+ delivers them to website at the size we specify, so even if original is say 4000px x 3000px we can ask for them at 100x100 and they send as resized scale. we dont have to manage sizes just the original images and their tagging If we wanted to improve our SEO opportunities should we be doing this another way? Our images show if you look in the image serp but they dont appear on the main serp. How much of a difference would having the images on our own domain rather than having them on Google+ I am working through the recommended list below, would love to hear guys who are doing well with images and have to manage 1000's of them. There are a number of ways to optimise your images to increase your visibility within Google image search, and the chance of being featured within the main search results (as seen in the 'tablet PC' example): Use a short descriptive piece of text featuring desired keywords within the image alt text attribute.
Intermediate & Advanced SEO | | PottyScotty
Save the image using a descriptive file name
Create an Image XML sitemap
Ensure your images directory isn't blocked by robots.txt
Ideally host images on the same domain
And surround the image with related text content to build a stronger page context/association0 -
Do image sitemaps provide value for non e-commerce sites?
Is it worth putting together an image sitemap to submit to Google if you're not an e-commerce site? Also, if you're using a CDN like Amazon Web Services (cloudfront), can you even submit an image sitemap? According to Google you need to verify your CDN in webmaster tools if you're going to do so. https://support.google.com/webmasters/answer/178636?hl=en
Intermediate & Advanced SEO | | kking41201 -
Problem with SEO for my Image based website.
My website focuses on movie posters. I'm having a little debate on what is the best way to have images linked to. The current image location is stored like this: /movie-name/poster-1.jpg
Intermediate & Advanced SEO | | thedevilseeker
/movie-name/poster-2.jpg Is it best to leave it like that or change it to : /movie-name/movie-name-poster-1.jpg
/movie-name/movie-name-poster-1.jpg The reason I ask, is that I read today that Google uses the image name to help detect what the image is about. At the same time, if the movie name is the in folder structure, along with the image name... wouldn't it start to look like keyword stuffing?0 -
Best Strategy to display 8mg Images on Product Pages for Ecommerce
I have an ecommerce store that has a variety of images including some super high quality images that are 8 mg. This style of image could be completed for hundreds of products in the store. Does anyone have any tips on what I should be watching out for here? Is 8 mg too unusable?
Intermediate & Advanced SEO | | LukeyJamo0 -
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