images em sized

This page briefly explores the possibilities of em-sized images, and summarises conclusions from these and a wider range of ad hoc trials...

Readers are supposed to try varying their browser's font size settings to see how well the images behave. If the browser is working to the usual specification, then the "natural px size" versions will stay the same physical size, whereas the em-sized images will zoom according to the same factor as the text. (Opera's View> Zoom feature behaves differently, as it's designed to also scale px-sized images.)

Demo 1:
JPEG image, outdoor scene, 300 wide x 420 high

Image in natural px size:

Image 15em wide, 21em high:

Image 30em wide, 42em high:

Demo 2:
GIF image, 629 wide x 492 high

Image in natural px size:

Image 32em wide, 25em high:

Image 40em wide, 31em high:


As observed with a number of browsers in common use:

The use of em units to resize JPEG photo-style images gives generally acceptable results, by everyday standards, despite the somewhat rough and ready scaling algorithms evidently used by some browsers. The use of em units is beneficial in maintaining the balance of size between images and text. I offer this advice in the context of everyday web authoring: those who are publishing professional-standard photography or other precision image material will need to reach their own conclusions.

Not surprisingly, scaling an image size down tends to produce better results than scaling it up; when sizing images in em units in this way, it's advisable to choose the image's natural (px) size to be somewhat larger than the intended (em) display size, as referred to typical browser settings. Of course there is no fixed relationship between em values and px values - it depends on browser settings etc. - so this has to be a judgment call, depending on what quality you aim to achieve, and how much overhead you consider acceptable in the circumstances.

The equivalent technique applied to indexed images with sharp contrasts and edges (GIF was demonstrated - indexed PNG produces similar results) tends to produce displays which are visibly rough and pixellated, even when the image size is not too far off the natural size of the original. The conclusion is that em sizing should be applied cautiously, if at all, with that kind of image material.

Opera's different behaviour when zooming px-sized images means that this demonstration shows neither disadvantages nor benefits for choosing em units versus px units, i.e the results of the demonstration are neutral on the Opera browser.