CSS and img width - height regarding RESPONSIVE designs, yes or no

Opinions and considerations on what responsive website means

[explorador]

Hi webmasters, so many of us respect old rules of providing images with alt and also WIDTH - HEIGHT attributes, it helps to display the content as it loads and it's been considered important for validation.

But... responsive design means images, while being the same img-file, can have diff widths and height depending on your window size or device. If you remove those attributes (width and height) the design still works based on CSS, but the html won't validate. How important do you think is this? We have lots of old threads regarding how search engines value our websites, validation has been considered by many as "good", valuable point.

Would you keep or remove the width and height on your images? even that CSS would make this obsolete while rendering (unless the css file hasn't been loaded).

[Fotiman]

WIDTH and HEIGHT attributes have never been required attributes, so removing those will not affect validation. Are you using a proprietary validator of some kind?

[not2easy]

I agree with Fotiman, to see why it is not validating, try checking at W3's Jigsaw Validator: [jigsaw.w3.org...] If the html is not validating it will give you a list of reasons.

[lucy24]

it's been considered important for validation

Alt is essential for validation; width and height aren't. And even then, the alt attribute can be empty, as with a decoration. (For some required attributes, there's mandatory content such as "non-negative integer".)

It's a tricky question, because width and height do help the browser render the page more efficiently: if it knows ahead of time how much space to allocate for each image, it doesn't have to wait and see what the actual dimensions are but can lay out the whole page at once. Or at least as soon as it's got the stylesheets, which will typically be named sooner than images in the HTML.

But in a responsive design, you might want to set something like "max-width: 100%;" that only kicks in if the viewport is narrower than your image ... and then you get unintended effects if the browser is still using the stated height, because the image is no longer proportional. So then you throw in a "height: auto;" to keep it proportional, and then what was the point of the initial "height" declaration? (You can't say "max-height: auto;").

A possible compromise is to put the extra bits-- the max-height and auto-- inside a (max-width) envelope that's only read if the rendering area is, in fact, narrower than some of your images.

:: idly wondering how long it will take me to find description of "CSS3 object-fit property" given my execrable record at finding stuff in w3.org docs ::

[Paul_o_b]

Where possible you should always include the width and height attributes in images as this allows the browser to calculate how much space to allocate before it downloads the image and also to work out the aspect ratio if you have set max:width:100% and height auto in the css.

Setting the width and height in css only will not help the browser to work out the image size or aspect ratio until it has actually downloaded the image so add the width and height attributes in the html even if you later over-ride it in css.

Remember that any width and height you set in css will over-ride the image attributes automatically anyway so there is no reason not to add them by default (unless its some sort of CMS where you have no control). It's just that the browser only uses the html attributes to work out the image size and aspect ratios otherwise it has to download the image first and then it knows.

It makes no difference to responsive design as that is done in the css which over-rides any attributes in the html anyway.

[explorador]

Thank you all for reminding me and correcting my wrong conception on validation, yes I'm now clear those attributes are not needed to validate the site (w3). Got it wrong on some website metrics.

Just as Lucy and Paul point out, it's important for the page rendering properly, many times we forget about this due to fast connections but it's in fact important, some people got slow internet or at least, sometimes it fails and we see some weird stuff rendered.