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
-
x-default hreflang attribute value
Hi When is it best to use the x-default hreflang attribute value tags? Screaming frog is flagging lots as missing, but is it necessary? Thanks
Intermediate & Advanced SEO | | BeckyKey0 -
How important is the file extension in the URL for images?
I know that descriptive image file names are important for SEO. But how important is it to include .png, .jpg, .gif (or whatever file extension) in the url path? i.e. https://example.com/images/golden-retriever vs. https://example.com/images/golden-retriever.jpg Furthermore, since you can set the filename in the Content-Disposition response header, is there any need to include the descriptive filename in the URL path? Since I'm pulling most of our images from a database, it'd be much simpler to not care about simulating a filename, and just reference an image id in my templates. Example: 1. Browser requests GET /images/123456
Intermediate & Advanced SEO | | dsbud
2. Server responds with image setting both Content-Disposition, and Link (canonical) headers Content-Disposition: inline; filename="golden-retriever"
Link: <https: 123456="" example.com="" images="">; rel="canonical"</https:>1 -
Pagination and matching title tags - does it matter when using rel="prev" and "next" attributes?
I'm looking at a site with the rel="prev" and "next" HTML attributes in place, to deal with pagination. However, the pages in each paginated category have identical page titles - is this an issue? Rand gives an example of how he'd vary page titles here, to prevent problems, though I'm not entirely sure whether this advice applies to sites with the rel="prev" and "next" HTML attributes in place: https://moz.com/blog/pagination-best-practices-for-seo-user-experience Any advice would be welcome - many thanks, Luke
Intermediate & Advanced SEO | | McTaggart0 -
How do we preserve images in google search after CMS migration?
Hi Folks we are about to migrate to a new CMS (bigcommerce/volusion type of thing) are are advised that we will preserve our google love for our old URLS with 301 re-directs. OK but what about images that show in search (we have a lot of our images show up high in relevant google image search) will this method work the same or should we do something else to keep the image benefits? many thanks Tom
Intermediate & Advanced SEO | | tomnivore0 -
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 -
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 -
Link to image (jpg) - Do I benefit? If not how can I?
Doing some research I found a .edu page linking directly to an image on my site. I can't see how this really benefits me so am wondering how to point the link juice somewhere useful, like the page on which the image resides. Can this be done? One idea that just occured to me would be to rename the image and set up a 301 in the .htaccess. Would that work?
Intermediate & Advanced SEO | | Cornwall0 -
Image maps and keyword density?!
If image maps/shapes are showing as keyword density in SEO tools, could they skewing the SEO effectiveness of a page?
Intermediate & Advanced SEO | | Crumpled_Dog0