I recently ran an audit on my web site using Google Developer Tools. My images are all the same size (500 horizontal by 300 vertical pixels) so I thought it would be better if I left out the image size attributes as there would be no need to calculate an image size when it already is the correct size.

Under Networking Utilization, Specify Image Dimensions I see the following

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

Now, I'm confused. Should I really add width and height attributes to my images, even though they are already the right size? It seems redundant.

Browsers download data in parallel and try to start rendering the page as soon as possible.

If you do not specify the size, the browser has no idea how large the image is going to be until after the image download is fully complete.

This delay forces the browser to repaint or reflow the layout - delaying the page load time.

The more images with this issue - the slower the page will load.

If you specify the image sizes, either in HTML or CSS, then browser can avoid repaints and reflows of content.

Due to this you should always specify image sizes. Google has some tips on this.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

For more on the browser rendering process see: http://taligarsiel.com/Projects/howbrowserswork1.htm

Not sure how up to date this is but gives insights into how browsers work and why you may want to do things like not use inline CSS to override style sheets.

  • Funny that they say to include it in the CSS. I suppose they do not start the rendering before the CSS gets loaded, which would make sense since without the CSS the page generally looks completely different... – Alexis Wilke Aug 26 '14 at 20:49
  • 1
    Actually, most current browsers process rendering information from HTML/CSS in parallel. These are then fed into the rendering engine to go onto painting. If you properly specify images and other layout, the page layout can be ready while other non-blocking assets are downloading. – jeffatrackaid Aug 26 '14 at 21:01
  • 1
    In that case, for image size, if I want my page to be responsive due to different screen dimensions, would it be better to specify percent instead of pixels? An image would look vastly different on a laptop versus a phone. – FastElephant Aug 26 '14 at 21:13
  • Your question is about performance, so the addition of any sizing elements that prevent reflows/repaints will speed up page rendering. However if what you render is ugly -- what's the point. See bybe comment about using JS to serve smaller sized images on smaller viewports. That's a better solution if quality is more important -- and it could be faster but you would have to test. – jeffatrackaid Aug 26 '14 at 21:17
  • 1
    I like to tell people to always do something in hopes they do it at least 80% of the time. :) – jeffatrackaid Aug 27 '14 at 14:49

Responsive Design does not normally use any width or height attributes

Google Development Tools is a guide and you shouldn't need to enforce everything you read on their site, in fact some of the stuff is outdated. The majority of responsive websites do not use width or height because they want the images to adapt to the screen size and by using fixed width and height using <img> which would dampen user experience and Google has declared this one of the most important factors.

CSS Workaround

You could opt to use a block level element that has the width and height, personally I wouldn't use one but here is what Google says about block level.

Be sure to specify dimensions on the image element or block-level parent Be sure to set the dimensions on the element itself, or a block-level parent. If the parent is not block-level, the dimensions will be ignored. Do not set dimensions on an ancestor that is not an immediate parent.

I imagine this would look something like:

Static Design .ic {width:500px;height:500px;}

Responsive Design:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

Then you would need to use JavaScript or another solution to detect viewpoint and serve 4 different versions of the image, which again is less than practical. So if you are using responsive design then I would safely go ahead and not bother adding width and height so that your website is fluid no matter what screen views it.

  • I am not so sure that you do not use width/height information but that the information is relative to the viewport? – jeffatrackaid Aug 26 '14 at 21:15
  • You generally use max-width:100%; in the CSS when using responsive design. Using height and width would disable the fluid upscaling and down scaling – Simon Hayter Aug 26 '14 at 21:26
  • Do you have any information on how this influences painting or reflows of content? I would assume internally the browser may just translate this relative amount to a fixed size so you don't have to repaint. – jeffatrackaid Aug 27 '14 at 14:48

I just answered a similar question on Wordpress Stack Exchange. Reposting it here (admins/moderators: if this isn't allowed, let me know the proper way to help).

doesn't really means you need to specify width and height in the html. What it means is that is you gotta reserve te proper space and when the image is loaded, the browser doens't have to reflow and repaint the page.

Besides, if you hardcode the dimensions, it kinds of defeats responsive behaviour. If your layout is not responsive, it's ok, but if you want to keep some responsiveness, you could use only CSS to achieve the results.

Most of time, using both width and max-width:100 will do the work, but this post from Smashing Magazine has an interesting technique: instead of using max-width:100%, you can use The Padding-Bottom Hack :

"With the technique, we define the height as a measure relative to the width. Padding and margin have such intrinsic properties, and we can use them to create aspect ratios for elements that do not have any content in them. Because padding has this capability, we can set padding-bottom to be relative to the width of an element. If we also set height to be 0, we’ll get what we want. [...]

The next step is to place an image inside the container and make sure it fills up the container. To do this, we need to position the image absolutely inside the container, like so:"

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

The process goes something like this:

  1. read .html file
  2. from .html file header, read .css, .js files (.js should be AFTER .css...)
  3. read img and script from the page

Thus, image tags are read "late". However to calculate the formatting of your page, having the size of the image is a good thing (otherwise browsers use a "random" size such as 1x1, 25x25, ... whatever the browser has programmed.)

So to avoid having a page that looks broken until the images get read, putting the width and height attributes allow the browser the calculate the proper page layout immediately. This is why it is a good idea to have them there, even if they are the same sizes.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.