Drawing for the Web

When preparing content for the web, a common task is to create various line drawings, which need to be presented as images well integrated with the page. This means, for example, that any text present in the picture needs to have a similar size with the text in the body of the page, maybe a little smaller.

A little preparation goes a long way. Let’s consider a web page which uses a font size of 16px, and accepts pictures with a maximum width of 720px. How do we prepare a drawing to be included on the page?

• Begin by deciding on a resolution for the drawing. I prefer to use metric units, so a nice resolution is 50 pixels/cm, or 127 pixels/inch; since this makes each CSS pixel in the future bitmap exactly 0.2 mm, so that a line thickness of 0.2 mm should be one CSS pixel, 0.3 mm one CSS pixel and a half, 0.4 mm two CSS pixels and so on. How many actual device pixels this is, it cannot be known; but browsers normally render web pages at simple ratios for device pixels per CSS pixels.

• In these conditions, 16 CSS pixels, the chosen font size, is 9.07 pt; 15px is 8.50 pt almost exactly; and 14px is close to 8 pt.

Web size Resolution Drawing size Width for 720px 16px 127 pixels/inch 9.07pt 14.4 cm 15px 127 pixels/inch 8.50pt 14.4 cm 14px 127 pixels/inch 7.94pt 14.4 cm

Then there is the problem of transparency. Some web pages are shown with plain white backgrounds, but many prefer a pale colored background, to provide for a more pleasant experience for the readers, who quite often read the page in an environment with subdued light. This means that the picture must have a transparent background, and practically imposes choosing the PNG format.

The way do it is to have a dedicated color for the  background of the picture, something which is never used in the picture except as the background, and which will become transparent. #FFFFCC is a good choice. Export the picture to a higher resolution, taking care to tell your drawing program to avoid antialiasing; if we stick with the nominal 127 pixels/inch shown in the table above, then 762 pixels/inch (6 times higher) or even 1270 (10 times higher) works. Then,

1. Open the exported bitmap in your favorite graphics editor, and make the chosen background color transparent.
2. Resize the bitmap to the desired dimensions.

In these modern times we live in, it makes sense to prepare several versions of the bitmap, to cater for the massively different resolutions of display devices. When possible, have at least a version intended for display at the nominal 96 pixels/inch, and one at twice the resolution.