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.

Codel

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.

Rhizotomy

That's the thought process I was noodling through, nice to hear it presented so succinctly. – Codel

Also, I agree that it's almost a forum-debatable issue more than a cut and dry "do A over B and here's the manual where it says so" deal. – Codel

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.

Coping

If you don't set the width / height inline, it won't render the space used up if the image is missing, see images for reference. Normally this won't be a problem, but it is good practice to set the width inline, because sometimes it can cause layout problems. – Memoirs

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.

Ardrey

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

Shien

the width and height aren't needed for semantics. That's why inline styles are deprecated, they are semantically meaningless. – Rhizotomy

@zzzzBov: Wrong. They are not deprecated - w3schools.com/tags/tag_IMG.asp – Shien

@Shien wrong, you didn't provide any context for your link to w3schools, and w3schools is not as comprehensive as the actual w3c spec. I didn't mean that height and width were deprecated, if that's what you're confused about. I was referring to the style attribute. Just because you can use an attribute doesn't mean you should. – Rhizotomy

@zzzzBov: I'm not confused, you just need to be clearer. Where in the w3c spec does it say anything to contradict that w3schools page? Additionally, while specific tags are deprecated, the style attribute is not, you need to check before you pass something off as fact, and you should always reference a claim as bold as "the style attribute is deprecated". If you tried too, you'd soon have noticed you are wrong. – Shien

@Dave, you're right, i should have been clearer, and I was mistaken about the style attribute being deprecated. That all being said, a designer should choose CSS over inline styles as inline styles are not particularly semantically meaningful. – Rhizotomy

@zzzzBov: Not a problem, and I completely agree that any designer worth using should use css over inline styles :) – Shien

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/

Verdha

I'm also not terribly concerned with accessibility (I know, not a very vogue opinion to hold, but the sites I do are meant for very specific target audiences, not a lot of need for web-readers-for-the-blind-compatible code when it's a site for surgeons to sign up for insurance and the like). – Codel

So difference between HTML or CSS image dimensions is useless ^^ – Verdha

Not quite, I'm just saying, the idea that the CSS might never get parsed (like, a text-only or braille browser, or someone who has turned style sheets off) isn't really a worry. I do, however, want to follow best practices regardless, and still want to have the pages render as fast as possible. – Codel

Yeah but text-only browsers just take care about the alt image attribute! The only case I see is with my old 5K connection, which sometimes load images and not css... – Verdha

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:

Holna

that's not what he was asking though. – Rhizotomy

My question was not "can I use CSS" (I knew that) but "should I". – Codel

And I answered that you shouldn't be using image tags in the layout at all. Voila :) – Holna

Also, I disagree that you should only use background-image to make an image. Background-image is for, you guessed it: background images. Content images are not backgrounds and are as important as the text of the site. – Codel

But content should be abstracted from layout to such a degree it doesn't matter what you do with it the layout will always work. – Holna

I think you mean to say "content should be abstracted from layout to such a degree it doesn't matter if the layout is removed, the content is still understandable." Content > layout. And what I'm saying is some images ARE content. So if you set ALL images as background images, and the CSS isn't parsed, the images disappear. – Codel

Of course, but the images that appear in content shouldn't affect the layout. – Holna

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.

Phraseograph