Welcome to WebmasterWorld Guest from 18.205.176.85

Forum Moderators: not2easy

Message Too Old, No Replies

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

Opinions and considerations on what responsive website means

     
7:57 am on Aug 15, 2015 (gmt 0)

Senior Member from GT 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Mar 30, 2006
posts:1615
votes: 164


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).
1:37 pm on Aug 15, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


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?
1:51 pm on Aug 15, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4563
votes: 364


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.
5:33 pm on Aug 15, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15941
votes: 889


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 ::
9:33 am on Aug 16, 2015 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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.
9:15 pm on Aug 17, 2015 (gmt 0)

Senior Member from GT 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Mar 30, 2006
posts:1615
votes: 164


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.