Should < img > Deprecate "height" and "width"?

Image adaptation and resizing is a hot topic at the moment. With devices of varying screensize accessing your site, how do you ensure that the crappy 240*240 phone gets a reasonable experience while still making everything look gorgeous on the retina-busting iPad?

One of the very first things we're taught in HTML school is that we should separate content and style.

<span font="comic sans" colour="red">This is wrong!</span>

Instead, we should be doing

<span class="stylish">This is corrent!</span>

Yet, the very next thing we're taught is

<img src="example.jpg" height="120" width="90" />

Well hang on a second! We've mixed up content (example.jpg) with presentation (the dimensions of the image). The image will almost certainly have to be resized based on the screen size accessing the site. Which means all manner of crufty JavaScript and CSS hacks to get it to display perfectly.

The Right Way

Here is how I think the image tag should work.

<img src="example" class="icon" />

The first thing to note is that the image shouldn't have a file extension. As I've set out in a comment on Bruce Lawson's blog, the server should be looking at the HTTP accept headers to see what image type to serve up. If the device is capable of displaying SVG - that's what should be sent. If the device is too old to support PNG - the image should be served up as JPG (or whatever format the device accepts).

Again, the content of the image should be separated from the presentation (i.e. the file format).

Secondly, we drop the height and the width from the img tag. In the olden days, they were needed to stop the page from dramatically reflowing as images loaded. That's still a valid concern today, but the challenge is that we don't know what physical size the image will have until it is requested.

"So what?" I hear you cry "We can already do this in CSS. Images can have their dimensions set by absolute pixel size and / or relative size."

Indeed, you are correct. But, the HTML5 spec currently lists height and width as attributes which may be used. This, I believe, acts to tempt the unwary developer into using them. They should be as obsolete as "align" and "border".

Ideally, the logic should be on the server-side. Your CSS shouldn't be asking the device for its own properties, your server should be dynamically generating CSS which suits the User-Agent. The server should be adapting images on the fly (and cacheing them) depending on the resolution of the devices.

We should be writing ridiculously simple HTML5.

As I've said before

Computers are there to do the hard work for us. We shouldn’t be writing extra markup in every single new document. Get the silicon slaves to do it all.