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
-
Priority Attribute in XML Sitemaps - Still Valid?
Is the priority value (scale of 0-1) used for each URL in an XML sitemap still a valid way of communicating to search engines which content you (the webmaster) believe is more important relative to other content on your site? I recall hearing that this was no longer used, but can't find a source. If it is no longer used, what are the easiest ways to communicate our preferences to search engines? Specifically, I'm looking to preference the most version version of a product's documentation (version 9) over the previous version (version 8). Thanks!
Intermediate & Advanced SEO | | Allie_Williams0 -
Best strategy for images filenames?
Hi community! For this case, which would be the best strategy for image filenames? This is a funiture company, with its own brand. What they sell is what they have created and designed Let's think on a kitchen. And we have a page we want to rank for the primary Kw "modern kitchen", and secondaries "white modern kitchen", "modern minimalist kitchen", "modern kitchen designs". Would you use the brand name in the filenames? I mean:
Intermediate & Advanced SEO | | teconsite
---------- white-modern-kitchen-brandname.jpg
---------- modern-minimalist-kitchen-brandname.jpg
---------- modern-kitchen-brandname.jpg Would you use just the kws in the filename and the brand in the alt text?
---------- filename: white-modern-kitchen.jpg Alt: "White Modern Kitchen, Brand" or should we use the brand in both items: filename and Alt? ¿Which would be the best way to do it in this case? Any suggestions? Thank you!0 -
What exactly is an impression in Google Webmaster Tools search queries with the image filter turned on?
Is it when someone does an image search? Or does it count a regular search that has images in it? On an image search does the picture actually have to be viewed on the screen or can it be below in the infinite scroll?
Intermediate & Advanced SEO | | EcommerceSite0 -
Alt image tags , shoud i reupload my site images as i never optimized right first time?
Hi guys i own a photographic website. www.hemeravisuals.co.uk And when I created it , i wasn't aware of the world of SEO , alt tags and labelling your images etc...
Intermediate & Advanced SEO | | hemeravisuals
Would it be wise to reupload my sites images (100 in total) as I cannot rename the files on my wordpress site but it does allow me to add alt text , captions etc?Or just add the data i can to the images allready on the site? Would it be worthwhile in terms of search and pagerank?0 -
Error: Missing required field "updated"
In my WordPress blog, there are pages for tags,categories,... like : https://www.abc.com/blog/category/how-to-cook-something/ On these pages I am getting the following error: Error: Missing required field "updated" So far I have 39 if these errors. Please let me know if this is an important issue to pay attention to? If yes, how I can fix it? Thanks Everyone
Intermediate & Advanced SEO | | AlirezaHamidian0 -
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 -
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 -
Who does google require a 3 digit number for news URLs?
Here, google mentions that article URLs should contain a 3 digit number: http://www.google.com/support/news_pub/bin/answer.py?hl=en&answer=68323 Why is this? Also, do you think it is good to have both a news sitemap and 3 digits at the end of a URL? Or, will one do?
Intermediate & Advanced SEO | | nicole.healthline0