34

I've learned that it is a best practice to explicitly specify image dimensions. The browser can then already layout the page while still downloading the images themselves, thereby improving (percieved) page rendering time.

Is this true? And if so, is there a difference in specifying the dimensions in either HTML or CSS?

  • HTML: <img src="" width="200" height="100">
  • Inline CSS: <img src="" style="width: 200px; height: 100px">
  • External CSS: #myImage { width: 200px; height: 200px; }
Wookai
  • 20,883
  • 16
  • 73
  • 86
Daan
  • 6,952
  • 4
  • 29
  • 36

5 Answers5

37

According to Google Page Speed, it does not really matter if you specify the dimensions via CSS or HTML, as long as your CSS targets the IMG tag itself and not a parent element :

When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS.

However, note that they advise not to resize the image using these dimensions, ie to always use the real dimensions :

Don't use width and height specifications to scale images on the fly. If an image file is actually 60 x 60 pixels, don't set the dimensions to 30 x 30 in the HTML or CSS. If the image needs to be smaller, scale it in an image editor and set its dimensions to match (see Optimize images for details.)

Wookai
  • 20,883
  • 16
  • 73
  • 86
  • This is the kind of answer I was looking for. But, coming from Google, does this only apply to Chrome, or other browsers as well? – Daan Dec 22 '09 at 15:39
  • 5
    Google does not discriminate between browsers. Never. – Josh Stodola Dec 22 '09 at 15:41
  • 1
    I can't speak for them, but I don't think they would discriminate between browsers. Google Page Speed is aimed at speeding the whole Internet, and for all users, thus giving advice specific to their browser (that has a very low market share) would not be very useful... – Wookai Dec 22 '09 at 15:45
  • If I put the height and width in the inline element it works, but if I put it in the css class even with the id selector, google page speed mark the element as if it does not have the size specified, I don't know what's happening. – Roberto Alarcon May 09 '12 at 17:25
3

I tend to do it in the CSS. This is certainly a win when there are multiple images with the same dimensions (so you can do stuff like .comment img.usergroup { width: 16px; height: 16px; }), and have the same images subject to scaling in different stylesheets like user-selectable themes.

When you have completely independent images that are used on the site only once, it doesn't really make sense to abstract their size out to CSS, so the HTML version would probably be more appropriate there.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • “have the same images subject to scaling in different stylesheets” — literally the same image files? Don’t you find they tend to look a bit rubbish in IE? – Paul D. Waite Dec 22 '09 at 15:33
  • This makes sense from a coding / maintenance point of view, but in this case I'm specifically interested in the rendering performance: which method causes the page to render the fastest? – Daan Dec 22 '09 at 15:37
  • 1
    @Paul: not necessarily; some images like simple block-colour GIFs might be specifically designed to be scaled. Plus in IE7+ you get optional bicubic interpolation so other material needn't look bad. @Daan: there will be no measurable difference. In different browsers either the HTML or the CSS may in theory have a more direct path to the renderer (in Firefox, it's the CSS), but the difference will be beyond minuscule. – bobince Dec 22 '09 at 15:47
  • Ah, that’s true. “in IE7+ you get optional bicubic interpolation” — optional? How do you turn it on? – Paul D. Waite Dec 22 '09 at 17:14
  • 2
    `-ms-interpolation-mode: bicubic`. http://msdn.microsoft.com/en-us/library/ms530822%28VS.85%29.aspx (see also https://developer.mozilla.org/En/CSS/image-rendering ) – bobince Dec 22 '09 at 21:34
1

I think CSS gives you more flexibility: you can specifically set the width or height while setting the other dimension to auto. But when setting both dimensions, I don't thing there's a difference.

Kaleb Brasee
  • 51,193
  • 8
  • 108
  • 113
  • Actually you can do that with HTML too, by omitting one attribute! However CSS does give you more flexibility in that you can also use `min-width`, `max-height` et al. – bobince Dec 22 '09 at 15:33
  • 1
    In most browsers, if you only set one dimension the other is auto by default. – Andy E Dec 22 '09 at 15:38
1

If you put a large image in an HTML page without dimensions, you should definitely notice the page layout shifting as the image is downloaded (over an internet connection, if not locally).

As per other answers, it doesn’t make much difference whether you do this in the HTML or the CSS.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • 2
    Many browsers won't render anything before the CSS is parsed anyway. Certainly the CSS will come down before images. (See ‘flash of unstyled content’ for discussion of when this doesn't happen.) – bobince Dec 22 '09 at 15:34
1

This does not answer your question directly, but I would not rely on the dimensions of your image for page layout. Instead include the image in a block level element. This relieves both the HTML and CSS from having to hold information that it really shouldn't as the image may change from time to time.

Oliver White
  • 265
  • 2
  • 9