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
-
Any tips on how tp get reddit or pinterest posts rank high on google images?
Hello I have noticed that for a keyword that has high competition it has on top image searches not that popular pinterest post & a reddit post, explorergram , youtube etc., the keywork is "24k gold iphone" and I am wondering if I could create somehow myself a pinterest or reddit post or something similar that would have images with my product rank high on that keyword, since my website does not rank well in mage search for some reason... https://www.google.fi/search?q=24k+gold+iphone+6&source=lnms&tbm=isch&sa=X&ved=0CAcQ_AUoAWoVChMI1f2LkpTxxgIVhI8sCh1SGwjy&biw=978&bih=550#tbm=isch&q=24k+gold+iphone thanks a lot
Intermediate & Advanced SEO | | bidilover0 -
What is the point of having images clickable loading to their own page?
Hello, Noticed a lot of sites, usually wordpress (seems to be the default) have the images in their posts clickable that load to their own page, showing just the image, usually a .jpg page. I know these pages seem to be easily indexed into google image search and can drive traffic to those specific pages... My questions are... 1. What is the point of driving traffic to a page that is just the image, there are no links to other pages, no ads, nothing... 2. can you redirect these .jpg pages to the actual post page? I ask because on google image search, there are 3 links to click (website, image link, image page), when you click to view the image, it loads the .jpg page, why not have that .jpg redirect to the real content page that has ads and also has other links. Is this white-hat? 3. Do these pages with just images have any negative effect on optimization since they are just images, no content? 4. Can you monetize these .jpg pages? 5. What is the best practice? I understand there is value in traffic, but what is the point of image traffic if I can't monetize those pages?
Intermediate & Advanced SEO | | WebServiceConsulting.com0 -
Competitor keyword image alt tag on their templates company logo
A competitor with maybe a couple of hundred pages throughout their website has recently added an image alt tag of a keyword to their company logo which links back to there homepage. The homepage is not particularly optimized towards this keyword and do not use the keyword within the text content at all apart from within the page title, So the image and link destination are not relevant towards the keyword. They seem to rank well for this competitive keyword in our industry using what i see as a slightly unethical internal linking strategy. We are currently working on some solid content to compete with this, but i was just wanting some advice on the situation, How does Google not see this as manipulative having the same link in the template from each page?
Intermediate & Advanced SEO | | Antony_Towle0 -
How do I fix item warnings? Invalid URL in attribute: image_link
Today, I have submitted Test Data Feed on Google merchant center for one Ecommerce website. (http://www.techcart.co.uk) But, I can see item warnings for invalide URL in attribute: image_link. You can find out attachment to know more about it. My website contain image path as follow. http://images.icecat.biz/img/norm/high/101859-8677.jpg I have read detail guidelines for Google merchant center and come to know as follow. Product feed must contain image link with domain name like follow. http://images.vistastores.com/product/large/63241/Professional-Air-Grid-Managers-Office-Chair-with-Black-Mesh-Seat.jpg But, I have found approved merchants and products in Google shopping which does not contain image path with domain name. You can check following path to know more about it. http://common1.csnimages.com/lf/50/hash/19276/6218082/1/Tozai-Sun-Mirror-on-Pedestal.jpg https://www.google.com/shopping/product/14637277284367613483 So, How do I fix item warnings regarding Invalid URL in attribute: image_link? I need urgent help on this issue. Image_Link_Issue_Test_Data_Feed_TechCart.png?view=1∂=4
Intermediate & Advanced SEO | | CommercePundit0 -
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 -
Duplicate content clarity required
Hi, I have access to a masive resource of journals that we have been given the all clear to use the abstract on our site and link back to the journal. These will be really useful links for our visitors. E.g. http://www.springerlink.com/content/59210832213382K2 Simply, if we copy the abstract and then link back to the journal source will this be treated as duplicate content and damage the site or is the link to the source enough for search engines to realise that we aren't trying anything untoward. Would it help if we added an introduction so in effect we are sort of following the curating content model? We are thinking of linking back internally to a relevant page using a keyword too. Will this approach give any benefit to our site at all or will the content be ignored due to it being duplicate and thus render the internal links useless? Thanks Jason
Intermediate & Advanced SEO | | jayderby0 -
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