HTML/CSS: What should I use to define image height/width to make it resolution independent?

Question

I've read all over the Internet that I should not define fonts (or anything) with absolute pixel height/width/size and instead, use EM ... so that on higher resolution displays, my web site can scale appropriately.

However, what do I use to define IMAGE height/width ... because images won't scale well (they look pixelated)

UPDATE:

To clarify, I'm not referring to page zoom. I'm referring to how to make my web application resolution independent so that it will look correct on higher DPI displays.

Answer 1

I know this question is a bit old, but want to put this out there for anybody who may come along later. When talking about mobile devices which have higher pixel densities, the mobile browsers will zoom the page in by an amount to make it appear as though the web page is not very small. Devices implement this zooming as per the CSS 2.1 specification.

For example, many devices today have a 1.5x pixel density ratio compared to desktop monitors. As a result, the mobile browser will zoom websites by about 150% to compensate for the extra pixels. The new retina display has a 2x pixel density ratio... and as such the browser zooms in websites by about 200%.

Point of the matter - developers should not have to worry about different resolution devices. If you wish for your images to show up clearly on high resolution devices, you will need a higher resolution image. You generally don't have to worry about 1.5x devices as the quality difference is negligible and not worth the effort. However, the new retina display causes some really blurry images, and as a result you should use 2x the image.

So for the following image, you would want to export a 600x400px image in order for the image to show up clearly on the new retina display:

<img src="photo.jpg" style="width:300px; height:200px" />