Toward Scalable Web Images

Can Cascading Style Sheets be used to adapt images to the viewer-preferred type size?

The Scalable EM

This text is set in your preferred size and style of type. It is, no matter the nominal point size or small, medium, large setting, the defining unit of scale for the elements on this page.

This unit, called an EM in CSS (Cascading Style Sheets), is used to define the size of the images shown here. The technique doesn't work, of course, in the Navigator series 4 and earlier, but does work in 6.2 .

The CSS used here is inline, as opposed to an external stylesheet. This is for the convenience of the viewer; a clever author would organize, structure, and arrange images and other page elements so that external stylesheet classes could be applied, or changed at will.

Working Your EMs On and Off

If you alter the preferred size of the text in your Preferences or Options, the images may scale to adapt to the new setting. With a different physical size now defined by the new type size, the EM unit will change, and promulgate that change by rescaling the images accordingly. This effect will depend on the CSS capabilities of your browser.

Using the text enlargement feature of a browser might not scale the images; the purpose of the text enlargement feature is usually to affect only the text elements, and not to affect the images. Your browser may differ. (IE5 Mac zooms both; iCab Mac zooms text, and images on reload only :-( ; Opera 5 Mac zooms both; Navigator 4.x doesn't care, but 6.2 does.)

What's That EM?

In many user agents, mousing over the image will show the scaling factors used to reshape the image. This is the title attribute in action; the title text may appear in a tooltip or in the browser's status bar; or elsewhere.

Images

Images were made originally with a 12pt or 10pt em unit in mind; their native sizes are W360 x H240 (Scale, 12pt em Mac) and W200 x H200 (Daisy, 10pt em Mac). Different platforms use a different relationship from the Macintosh's usual one-to-one relationship of nominal points to pixels, so each platform will most likely display differently.

Cleaner scaling could be achieved by using higher-density images (e.g., W144dpi x H144dpi) so pixelation artifacts are not as prominent; but transmission times would increase accordingly.

This is a line of one em textThis is a line of one em text

This is a line of one em textThis is 2 em (200%) text