Is setting image dimensions with CSS as “good” as setting them in HTML?

Question

When I was first learning HTML a very long time ago, I was told that it was important to always set the dimensions of your images in your HTML, so that browsers could draw an empty box where the image should go, render your page, and then download and render the images where they belong. If you didn't set width and height values for your images, the browser would have to download the images first to discover their dimensions, and it would slow page loading for people with crappy connections.

For the past few years I've been using CSS, I always put a width and height declaration in my img tags in my HTML. My question is, is setting width and height in the style sheet, and no longer adding these HTML attributes, just as good? It certainly makes my spartan HTML look even cleaner without them.

Answer 1

This is a good question, but it's a bit subjective and may lead to more discussion than is generally advised on SO.

Back in the 90's, browsers were slow, and so was the internet. 56k took a while to transfer medium sized images. During that time, the layout would resize to fit the image.

Fast-forward a decade, and internet speeds are much faster, rendering times are much faster. People are used to layouts that change a bit in the first half-second of page load. It's not bad to not specify an image size, as long as you understand the layout of the page may shift during loading.

CSS is parsed before the page is loaded, so specifying the height & width in CSS will work just as well as specifying it inline.

One thing to keep in mind is that inline styles (and that includes height and width declarations) always trump CSS in specificity. If you specify heights and widths of images inline, you may have to go back through every page where an image is present if you want to adjust the size of the images.

Personally I'd suggest using CSS, as it keeps all your styles in the same place.

Answer 2

The problem you mention with the image not being downloaded immediately also applies to your CSS.

The difference is that without the rest of the CSS the whole layout may not make sense. In other words, if the rest of the CSS hasn't loaded then the fact that the image dimensions are also missing won't really be that noticeable.

So personally I think it's fine to put the dimensions in the CSS.

Answer 3

Yes, setting these properties in CSS will work just as well.

I don't know that it affects page rendering speed in any manner, however. The little effect it does have, is that layout that depends on the image will appear to jump around on the page until the image is loaded and allocates all the space it eventually will.

This is not a practice I follow myself.

Answer 4

A similar question has already been discussed and answered here:

Image width/height as an attribute or in CSS?

It should be defined inline. If you are using the img tag, that image should have semantic value to the content, which is why the alt attribute is required for validation.

If the image is to be part of the layout or template, you should use a tag other than the img tag and assign the image as a CSS background to the element. In this case, the image has no semantic meaning and therefore doesn't require the alt attribute. I'm fairly certain that most screen readers would not even know that a CSS image exists.

This is also helpful:

If it's part of your site template, I'd place it in the CSS file.

If it's just on one page, it should be inline (or defined in a block of page-specific CSS at the top).

Answer 5

I think the only difference is that css can (yeah it's possible!) not to be read, so <img> attributes are used. But I'm not sure, I'm going to check that.

EDIT: http://www.mezzoblue.com/archives/2005/05/10/image_attrib/

Answer 6

While you can use CSS to clean up the layout, if your layout messes up by inability to load a single image you should fix that first.

Modern layouts should be controlled by divs and CSS, images in the layout should be supplied only in the form of a background-image:

Answer 7

The reason for always putting the dimensions into HTML code back in the day was due to loading times -- on a 14.4K modem, even relatively small image files would load noticably after the main HTML document had loaded.

These days this is much less of an issue. If it is an issue, it's worth noting that a CSS file will load after the main HTML document, so if you only specify your dimensions there you could potentially suffer the same problem, but CSS files are typically fairly small, so the effect should be minimised.

The other point is that old-school HTML design was very focused on layout, and image sizes were often a critical part of that - if the images were the wrong size, the layout of the whole page would often be completely wrong.

Modern page design approaches things very differently, putting minimal of any layout information into the HTML, and abstracting it all to the stylesheet. Therefore on a typical modern site, until the stylesheets have loaded, the site will just be a series of blocks, and be completely lacking in design. In fact, often the graphics themselves - not just their dimensions - are defined in the stylesheet.

So the answer is that to follow modern page design methods, you should put it in the stylesheet.

Obviously it's critical for most sites these days that the stylesheets load quickly, but it isn't just the size of the graphics that it'll affect.