Relative Sizing and Images

Few people realize that with today's modern browsers, relative sizing can in fact be added to images as well as text elements on your web page.

The two images to the left should appear identical under normal circumstances. However, the first image uses the em value, so that as the text in the browser is enlarged, so too the image. Go ahead, try it.

While most images, when subjected to this treatment, may lose a fair bit of quality, it is an important consideration when developing graphics such as buttons or "clickable" icons. In these instances, making the image scale with the text may aid in accessibility, despite the degradation of quality. This example has been tested and works in Netscape 6+, Internet Explorer 5.5+. The Opera browser scales images by default; the larger you make the text, the larger the image gets, regardless of the sizing declarations.

How it works

The W3C has specified 16px/96ppi as a standard default text size, and most modern browsers on the Macintosh and Windows platforms have honored that specification since 2000*. (Alas, that rules out Netscape 4.x) None-the-less, today's Standards compliant browser generally renders an EM then as 16 pixels (Camino, a Mac OS X browser that currently ships with a default type size of 14px, is the only exception we are aware of...), so specifying the image measurements in ems instead of pixels is relatively easy: divide the pixel size by 16 and express as ems. Our experience shows that ems can also be expressed as decimal numbers up to 1/100th (i.e. 1.01 em). While all images need not have their sizings expressed as ems, we would suggest that items such as "clickable" icons or navigational button images use this method. For while the image quality may degrade somewhat at larger user font sizes, at least the user can see what the icon/image is, and read any text on a button, etc. If the user must enlarge the font for legibility, we suspect that the pixelation that occurs will be generally un-noticeable.

* See the W3C CSS1 Specifications at www.w3.org/TR/1999/REC-CSS1-19990111#length-units plus the Errata Notice correcting the original CSS1 spec.www.w3.org/Style/css1-updates/REC-CSS1-19990111-errata.html

Unless otherwise noted, this work is licensed under a Creative Commons License