Width and Height attribute replacement in CSS

[weegillis]

Somewhere along the way I picked up the idea that it is possible to remove width and height attributes to the CSS, rather than include them with the img tag. Perhaps I misunderstood. For example,

[img]images/image.jpg[/img]

would become,

[img]image/image.jpg[/img]

with the CSS,

.my_image{
	width:200px;
	height:150px;
}

As near as I can tell, the browser will still be able to map out the page without excessive calculations (the main reason for including the attributes). The space for the image is still reserved when the page is being drawn so surrounding content is able to flow into place, regardless of when the actual image arrives.

Now I can see the folly in this thinking, but favour the compactness, especially when dozens of pages have the same image element (though with perphaps a different picture). Can anyone help clarify the pros and cons of this line of approach?

Thanks, Roy

[bj]

There are a couple older browsers that work better where floats are involved if images have width and height specified in the html. One example is when you've used a class to float an image left or right so you could wrap text around it, and wanted to use the class on different and differently sized images. It's not necessary in the newer browsers, but it is a good idea so you're backwards compatible.

Also, for those on a dialup connection, they won't have a layout jump around every time an image loads, since the space will be "reserved".

[weegillis]

So for the sake of backward compatability it is better to have the page 300 bytes larger (assuming 12 images). Seems we're never going to be free to make the most of CSS, no matter what.

Can one assume that since Google uses what amounts to HTML 3.x these attributes are important to their spiders?

One needn't expect that screen readers need any information with respect to image size, so it makes more sense to remove width and height, as superfluous to the markup. Might there be a time when we can actually implement this approach?

[PARoss]

Roy,

You might include this in your CSS style sheet, too:

a img, img {
border:0;
}

It eliminates the border for all images.

Phil

[bj]

You need to have it specified somewhere for it to be backward compatible re floats, and also for it to be kinder to dialup folks.

I guess I wasn't clear in my explanation.

For instance, in css--

img.leftfloat {
float: left;
}

and in html:
[img]myimage.gif[/img]

OR

img.leftfloat {
float: left;
width: 200px;
height: 100px;
}

[img]myimage.gif[/img]

The first example allows you to use any size image and float it left. The second will give you a floated left image that is width 200px and height 100px no matter what size it is, which could result in funhouse mirror distortion if it isn't 200 x 100.

Screen readers don't "read" what's in tags except as it applies to their particular chore, ie the alt attribute, so I doubt it's much overhead where they're concerned.

[iany]

You could also use:

img.myimg {
float: left;
width: 12.5em;
height: 6.25em;
}
[img]myimage.gif[/img]

Do this for each image and you will have zooming images too.

Ian

[bj]

True, as long as you don't mind the pixellation and loss of quality in the image that results with zoom.

[iany]

Sure in extreme zooms the image is all to hell in a hand bag and it depends on the quality of the original but where I have used em's with images, the trade off is acceptable.

[weegillis]

Originally Posted by iany

You could also use:

img.myimg {
float: left;
width: 12.5em;
height: 6.25em;
}
[img]myimage.gif[/img]

Do this for each image and you will have zooming images too.

This works 'nearly correctly' as long as the inherited font-size relates 12.5em to 200px, and 6.25em to 100px.

The downside to relative sizing of images is that there really is no guarantee that all users will see the image at its correct size, with no scaling applied by the browser. We might be taking a pretty big chance leaving it up to the browser, since some may render images rather more poorly than others when scaled to fit the relative sized viewport.

The idea of declaring image size in the CSS applies not just to floats, but to any redundant image element of fixed size, regardless how it is inserted in the layout, float, absolute position, image block or plain inline. As a rule, one might always include a width to accompany any float, for the sake of some browsers that don't deal well with floats, such as IE Mac 5.x. For example,

img{
	border:none;
}
img.inpage{
	width:300px;height:225px;
	border:3px double #b0d0c0;
	position:relative;z-index:10;
}
img.inpage.left{float:left;margin:6px 8px 0 0}
img.inpage.right{float:right;margin:6px 0 0 8px}

Sightly off topic, the position and z-index properties are applied to keep the image on top of the parent layer (also positioned relatively). This overcomes the disappearing float problem often experienced in IE.

In the following example, images are inline, positioned by text alignment in their parent container. Descendant selectors dial in the appropriate image:

div.content.photo_box{text-align:center}
div.content.photo_box p{margin-top:2em;margin-bottom:1.8em;text-align:center}
div.content.photo_box h3{margin-right:50px;text-align:right}
div.content.photo_box img{
	display:inline;
}
div.photo_box p img{
	width:512px;height:384px;
	border:4px double #a0c0b0;
}
div.photo_box h3 img{
	width:200px;height:150px;
	vertical-align:middle;
	border:3px double #a0c0b0;
}

[iany]

Originally Posted by weegillis

The downside to relative sizing of images is that there really is no guarantee that all users will see the image at its correct size, with no scaling applied by the browser. We might be taking a pretty big chance leaving it up to the browser, since some may render images rather more poorly than others when scaled to fit the relative sized viewport.

This seems to me a lack of understanding of em's and CSS and how they relate in various browsers.

The use of em's in IE6 can cause problems in defining font size, but only if the font size is not defined in the body.
eg body{font-size:100%}. Other than that there is no problem using em's for font or images across all browsers.
The use of img width/height in em is not restricted to floats in any case.
I have tested in Konqueror, Safari, Mac IE5.2, IEs (5.5,6,7), FF1.5&2 at 800x600, 1024x768 and 1280 800 and they all render images defined in this way fine.
If you use only em's for all positioning, then your entire page will zoom holding the layout stable.

BJ's point about zooming causing breaks in pixellation and therefore resolution is more important.

Have a look at this link where I have used my own site as an exmple of em defined image:

http://www.browsercam.com/public.aspx?proj_id=292331