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
-
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 -
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 -
Would changing the file name of an image (not the alt attribute) have an effect of on seo / ranking of that image and thus the site?
Would changing the file name of image, not the alt attribute nor the image itself (so it would be exactly the same but just a name change) have any effect on : a) A sites seo ranking b) the individual images seo ranking (although i guess if b) would be true it would have an effect on a) although potentially small.) This is the sort of change i would be thinking of making :  changed to 
Intermediate & Advanced SEO | | Sam-P0 -
Duplicate content - Images & Attachments
I have been looking a GWT HTML improvements on our new site and I am scratching my head on how to stop some elements of the website showing up as duplicates for Meta Descriptions and Titles. For example the blog area: <a id="zip_0-anchor" class="zippedsection_title"></a>
Intermediate & Advanced SEO | | Cocoonfxmedia
This blog is full of information and resources for you to implement; get more traffic, more leads an
/blog//blog/page/2//blog/page/3//blog/page/4//blog/page/6//blog/page/9/The page has rel canonicals on them (using Yoast Wordpress SEO) and I can't see away of stopping the duplicate content. Can anyone suggest how to combat this? or is there nothing to worry about?
0 -
Is there a downside of an image coming from the site's dotted quad and can it be seen as a duplicate?
Ok the question doesn't fully explain the issue. I just want some opinions on this. Here is the backstory. I have a client with a domain that has been around for a while and was doing well but with no backlinks. (Fairly low competition). For some reason they created mirrors of their site on different urls. Then their web designer built them a test site that was a copy of their site on the web designer's url and didn't bother to noindex it. Client's site dived, the web designer's site started ranking for their keywords. So we helped clean that up, and they hired a brand new web designer and redesigned the site. For some reason the dotted quad version of the site started showing up as a referer in GA. So one image on the site comes from that and not the site's url. So I ran a copyscape and site search and discovered the dotted quad version like 69.64.153.116 (not the actual address) was also being indexed by the search engine. To us this seems like a cut and dry duplicate content issue, but I'm having trouble finding much written on the subject. I raised the issue with the dev, and he reluctantly 301 the site to the official url. The second part of this is the web designer still has that one image on the site coming from the numerical version of the site and not the written url. Any thoughts if that has any negative SEO impact? My thought it isn't ideal, but it just looks like an external referral for pulling that one image. I'd love any thoughts or experience on a situation like this.
Intermediate & Advanced SEO | | BCutrer0 -
Does this require site-wide 301 redirects?
I have an old site that we are re-building, and also moving form Yahoo Stores to Big Commerce. yahoo uses site.com/page.html and BC uses site.com/page. Is there any SEO benefit to keeping the old .html format? some of the pages on the old site have no links to them from external sites. Do they even need re-directs, or should I just let Google find the new page equivalents when they crawl the new version of the site? While some of the old pages (primarily product pages) have OK urls, others have obscure product numbers as the URL. Obviously the latter need re-directing to a more relevant page, but what about situations like this:
Intermediate & Advanced SEO | | Grabapple
_/accessory-product.html _ > product-accessory
In this example, the existing URL is fine, except for the .html extention. If I just used the old URL, would having a mix of /sample.html and /sample pages hurt me? Thanks in advance for your help and input! Dave0 -
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 -
Is there a way to stop my product pages with the "show all" catagory/attribute from duplicating content?
If there were less pages with the "show all" attribute it would be a simple fix by adding the canonical URL tag. But seeing that there are about 1,000 of them I was wondering if their was a broader fix that I could apply.
Intermediate & Advanced SEO | | cscoville0