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
-
Can Image Quality In Online Store Effect Main Site SEO?
My client is building a new shopping cart that will be mobile friendly BUT will have terrible image quality - tiny images, with text on them. How will these tiny images impact the SEO on the main site? Should they put the store on the mainsite.com or on a subdomain (store.mainsite.com)? Does google see subdomains as part of the main site? I would think that having thousands of shopping product pages could be beneficial to the main site SEO, as long as the images don't negate the content. Thoughts?
Intermediate & Advanced SEO | | jerrico10 -
Lazy loading images
Hello, Currently we are working on a new website. Within this new website we have the option to lazy load the images. My question regarding this: will this cause any SEO problems? Will google detect / see all images properly? If not, how can we make sure that google does? Thanks in advance! Remco
Intermediate & Advanced SEO | | AMAGARD0 -
Google doesn't index image slideshow
Hi, My articles are indexed and images (full size) via a meta in the body also. But, the images in the slideshow are not indexed, have you any idea? A problem with the JS Example : http://www.parismatch.com/People/Television/Sport-a-la-tele-les-femmes-a-l-abordage-962989 Thank you in advance Julien
Intermediate & Advanced SEO | | Julien.Ferras0 -
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 -
Given the new image mismatch penalty, is watermarking considered "cloaking"?
Google has released a new penalty called "Image mismatch". Which actually penalizes sites that show images to Google than are not the same as the ones offered to users when accessing the site. Although I agree with those sites that the image is completely different that the one shown in image search, lately I've seen lots of big sites using some king of watermark or layer that reads something like "To see the high quality of this image, click here" in order to "force" the user to visit the site hosting the image. Considering the latest changes to Google's image search, which made lots of sites lose their "image search traffic", are these techniques considered part of the new penalty Google is applying? Or does it only apply to the first scenario when the image is completely different? You can read more on this new penalty here.
Intermediate & Advanced SEO | | FedeEinhorn0 -
Title Attribute for H2 & h3 Tag SEO Question
Hi , We have an eCommerce Site and from looking at a competitor , they seem to be rank better than us even though our everything about our site is better . We hire the same products (are affiliated the same company) so the product list is the same. Both our category pages score A grade in Seomoz reports. So This is what I can deduce from the competitors category page I am trying to compete against. On the cement Mixer hire category page The competitor has put the Main Keyword "Cement mixer hire" in all the Title Attributes on their H2 and H3 tags as well as it being the main H1 tag. They have 5 product links in h3 tags all with the same title attribute (cement mixer hire) These links go through to product page. Am I missing a trick here ?..... I would have though using the title attribute so much for main keyword would be a bit spammy ?. I have copied them with the point 1 but I have not done mine h3 as yet. Just wondering that the SEO guru's thought ?. thanks Sarah
Intermediate & Advanced SEO | | SarahCollins0 -
Blocking Pages Via Robots, Can Images On Those Pages Be Included In Image Search
Hi! I have pages within my forum where visitors can upload photos. When they upload photos they provide a simple statement about the photo but no real information about the image,definitely not enough for the page to be deemed worthy of being indexed. The industry however is one that really leans on images and having the images in Google Image search is important to us. The url structure is like such: domain.com/community/photos/~username~/picture111111.aspx I wish to block the whole folder from Googlebot to prevent these low quality pages from being added to Google's main SERP results. This would be something like this: User-agent: googlebot Disallow: /community/photos/ Can I disallow Googlebot specifically rather than just using User-agent: * which would then allow googlebot-image to pick up the photos? I plan on configuring a way to add meaningful alt attributes and image names to assist in visibility, but the actual act of blocking the pages and getting the images picked up... Is this possible? Thanks! Leona
Intermediate & Advanced SEO | | HD_Leona0 -
Optimization for an Car Image Gallery Site
I have a site where I feature several car images and the details/press releases about those cars. So normal layout would be an article page consisting of the following: Article Text Image gallery list laid out for user to browse. Now, when a user clicks on the image, the link opens up in another page with the image as a main content and then other image belonging to same article are shown below to browse. Each of such pages with images from same article are linked to one another with 'rel'=prev/next and has a 'rel' canonical to the page with article text. Am I doing this right to prevent thin content and duplication issue? Each of the images are for same car and are related to one another. The site under question is DieselStation. Also, if you can provide a general feedback on the site's layout and architecture in terms of SEO, that would be great.
Intermediate & Advanced SEO | | ketan90