Where to specify image dimensions for fastest rendering: in HTML or in CSS?

html css rendering
Daan picture Daan · Dec 22, 2009 · Viewed 26.5k times · Source

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; }

Answer

Wookai picture Wookai · Dec 22, 2009

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.)

Related questions

How to render thin fonts more smoothly in CSS 3 on Windows?

When I've designed my web site in Adobe Flash Pro CS6, the font looks like this: The font looks smooth and slightly thicker, and when I create HTML and CSS to render the font in a browser, it appears like …

Read More
Chrome rendering issue. Fixed position anchor with UL in body

There is a rendering issue with Google Chrome and Opera (why?=) with such code: <html> <style> #content { width: 150px; background: gray; } #sidebar { position: fixed; left: 200px; background: gray; } </style> <body> <div …

Read More
IE CSS display: inline-block Rendering issue

I'm having an annoying rendering issue with IE my code is CSS : div { display: inline-block; margin-right:40px; border: 1px solid; } HTML : <div>element</div> <div>element</div> <div>element</…

Read More