Thread

Is it still best practice to include width and height attributes in an image tag? I ask because a colleague told me last week that it’s not necessary if you use CSS to set width and height properties on a block-level element which contains the image.

It’s been so long since I’ve even considered this - I include the width and height attributes as a matter of habit, but now I’m curious if my colleague is right.

Thanks,
Frank

Defining width and height in the IMG tag helps a browser render the page slightly quicker, though specifying dimensions in the CSS should (in theory) do the same thing. Of course CSS will overwrite the image tag attributes anyway.

Thanks Rob. When you say “in theory”, it sounds to me like you doubt whether using CSS to set the dimensions at the block-level container (not on the image itself) would be as effective in reducing load time as setting the height and width attributes at the image level. Have I read you correctly?

If so, what makes you think that (not doubting - just knowing that my colleague will bring that question up - to be honest, I was so baffled when I realized he wasn’t using the height and width tags, that I’m not sure where the conversatino will lead).

Thanks,
Frank

I meant to say I’ve always assumed that CSS based image dimensions (not the parent container) would have the same effect as specifing them in the IMG tag since the CSS is loaded in tandem with rendering the page HTML.

I’ve not actually tested it so can’t prove it, there may be some tests somewhere online to show the differences?

i’m pretty sure you’re better off specifying the attributes in the img tag itself. the page is read originally when the page is first obtained. CSS rules happen after that. So the fastest way would be in the img tag.

just for example, ever hit a page that loads slow, and see it first come up garbled, then when the css is applied it straightens out? in that case if the img tag were stated in the HTML markup the page could render past any non specified images

This post made me wonder how the image would be handled in different examples and if the img tag attributes or the CSS rules would be respected in different cases. I did a small test to see. I tested this in Firefox, Safari and IE7 and they all seems to behave the same. Take a look at the test here: http://test.server.viminteractive.com/image_test.html

Some frameworks (such as http://cssgrid.net/) relay on it image size not being defined…some js based galleries as well.
So flexibility vs. speed.
With connections getting better on mobile devices most opt for flexibility…at least my observation.
Personally, I see an image is an object within content and with defined size - don’t like that css is manipulating the sizing and quality for presentation only. If an image is used as layout then it bothers me less. 😊

I’ve always used the img tags.  It doesn’t hurt anything and it makes for a tidy package.

Whilst defining the width/height in the img tag can stop the page being re-drawn as the images are loaded (as you have reserved the space for the image), it’s a problem if you want to make your page responsive to different screen sizes. So that’s where leaving the size out of the img tag and using css to define the size of the space it is presented comes in useful.

I agree with Paul.  I always set width/height in an img tag unless I am creating a responsive design site.

I even have some CSS I use when doing non-responsive sites to make sure all images have width/height set on img tags.  It will add a red border to any image with height or width not set.

img:not([width]):not([height]), img:not([alt]) {
  border: 2px solid red !important;
}

@mz911184 Great idea on the CSS rule for flagging images without width, height and alt tags. Thanks for sharing.

I meant to say I’ve always assumed that CSS based image dimensions (not the parent container) would have the same effect as specifing them in the IMG tag since the CSS is loaded in tandem with rendering the page HTML.

In WebKit and Gecko, image dimensions on the img tag are just aliases for the same thing in CSS styles, so whether it’s defined in CSS or in the image tag, it’s the same thing. I am not sure about IE or Opera tho.

In Chrome for instance, if you inspect an image with dimensions on the img tag, you’ll see something like this in the css property list, even if it’s not in your CSS file:

img[width=300]{
    width:300px;
}
img[height=300]{
    height:300px;
}

I’m not sure in which version of chrome this was added. I’m guessing that WebKit doesn’t even have any code that handles the dimensions on the tag separately from css, and instead uses css attribute selectors to handle the dimensions on the tag itself. In standards mode at least.

img:not([width]):not([height]), img:not([alt]) {
  border: 2px solid red !important;
}

Border could break the layout, or the borders could be hidden. Outline doesn’t affect layout, and is always displayed on top of everything else.