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 -
Image Sitemap for non indexed Products
Hi, we have several ecommerce sites. We want to do an image sitemap, as we have lots of attractive images. The question is, can you put images for non-indexed products there as well, or does that conflict with the normal sitemap (the images would be indexed, the products not)? Thanks in advance. Dieter Lang
Intermediate & Advanced SEO | | Storesco0 -
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 -
Alt tag for src='blank.gif' on lazy load images
I didn't find an answer on a search on this, so maybe someone here has faced this before. I am loading 20 images that are in the viewport and a bit below. The next 80 images I want to 'lazy-load'. They therefore are seen by the bot as a blank.gif file. However, I would like to get some credit for them by giving a description in the alt tag. Is that a no-no? If not, do they all have to be the same alt description since the src name is the same? I don't want to mess things up with Google by being too aggressive, but at the same time those are valid images once they are lazy loaded, so would like to get some credit for them. Thanks! Ted
Intermediate & Advanced SEO | | friendoffood0 -
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 -
Google Preview not showing images
No matter which our pages i find in the SERP the Google Preview does not show images for www.spies.dk Try searching for "rejser til malaysia" on google.dk. The result www.spies.dk/malaysia is not showing images. Why is that? Using the "google preview tool" under labs in Google Webmaster Tools sys it found 13 errors on that page: | Ressource: | Information: http://images2.spies.dk/images/SiteID11/SiteLayout/logo-spies.png?v=4 | Indekseret http://images1.spies.dk/images/StaticLayout/Spies_hori_sRGB.png?v=1 | Indekseret http://images1.spies.dk/images/SiteID11/Button/search-button-text3.png?v=2 | Indekseret http://images2.spies.dk/images/Country/my1001_10_48.jpg?v=1 | Indekseret http://images2.spies.dk/images/SiteID11/Button/Opdater_bt.png?v=2 | Indekseret http://images1.spies.dk/images/SiteID11/Button/Sog_bt.png?v=3 | Indekseret http://images2.spies.dk/images/Country/my1002_2_22.gif?v=1 | Indekseret http://images2.spies.dk/images/Resort/bkikki1001_4_11.jpg?v=1 | Indekseret http://images2.spies.dk/images/SiteID11/Button/Vaelg_bt.png?v=7 | Indekseret http://images1.spies.dk/images/Resort/bkiskn1001_4_11.jpg?v=1 | Indekseret http://images1.spies.dk/images/Resort/kulkum1001_4_11.jpg?v=1 | Indekseret http://images1.spies.dk/images/Resort/lgklak1001_4_11.jpg?v=1 | Indekseret https://track.adform.net/serving/scripts/trackpoint/async/ | Indekseret |
Intermediate & Advanced SEO | | alsvik0 -
Can use of the id attribute to anchor t text down a page cause page duplication issues?
I am producing a long glossary of terms and want to make it easier to jump down to various terms. I am using the<a id="anchor-text" ="" attribute="" so="" am="" appending="" #anchor-text="" to="" a="" url="" reach="" the="" correct="" spot<="" p=""></a> <a id="anchor-text" ="" attribute="" so="" am="" appending="" #anchor-text="" to="" a="" url="" reach="" the="" correct="" spot<="" p="">Does anyone know whether Google will pick this up as separate duplicate pages?</a> <a id="anchor-text" ="" attribute="" so="" am="" appending="" #anchor-text="" to="" a="" url="" reach="" the="" correct="" spot<="" p="">If so any ideas on what I can do? Apart from not do it to start with? I am thinking 301s won't work as I want the URL to work. And rel=canonical won't work as there is no actual page code to add it to. Many thanks for your help Wendy</a>
Intermediate & Advanced SEO | | Chammy0 -
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