HTML Image Tips

Images are what makes the Web so popular using Netscape or Mosaic. But they take up a lot of bandwidth on the net, and often the amount of information in the pictures is very small. With a bit of thought, inline images can take much less space and still get the message across. Small images load faster, don't jam up the Internet, and everybody benefits.

Note: A patent on the LZW compression algorithm is held by Unisys; see PNG conversion

Techniques for reducing net load from HTML documents

Reduce the number of colours in GIFs.
Most browsers will only display 50 colours anyway, so reducing the colourmap will make no difference to the viewer but will acheive at least a 25% saving in file size, possibly more. The convert tool in the ImageMagick package works well in YUV colourspace, reducing the colourmap smaller than a given size if possible. ppmquant from the pbmplus package can also be used.
Reduce the number of GIFs.
Images are usually cached in the browser. Using the same image many times in a document incurs no additional penalty.
Use graphic art, not photographs.
The run-length encoding in GIFs works much better with broad areas of colour. In a photograph, where every pixel may be a different colour, the file size is basically the width times the height.
Use JPEG images
Netscape and Mosaic 2.6 support inline JPEG images. With a high compression factor these are much smaller than GIFs. Note that this only applies to photographic-type images. Simple line-art may be smaller in GIF; besides, JPEG smears sharp edges.
Consider using Netscape extensions
Netscape provides several HTML extensions for inline images. The LOWSRC modifier allows a smaller image file to be loaded on the first pass, so that a 75% JPEG image could be preceded by a 15% JPEG. The WIDTH and HEIGHT modifiers allow the client to display an image larger than its natural size. Note that other browsers will see a smaller image.
Don't use large images in home pages
Use graphic banners as attention-getters. If you must have big images, use a link or icon to another page. For really big images, giving substantial detail, use a raw JPEG file. Netscape will display a raw JPEG file itself; Mosaic will spawn an external viewer.
Use Abstracts
Don't serve a huge text file. HTML style requires documents to be split into small pieces. If big files can't be avoided, serve an abstract first with a link to the complete file.
Use compressed audio
Provide a small sampler of big audio files. Use compression where possible. Audio/basic is 64kbps, most WAV files are more. ADPCM or other compression techniques will acheive better than 10kbps for speech. Progressive Networks' RealAudio software will serve audio in real time so that it is not necessary to download a complete file before hearing (and possibly rejecting) the audio information.
Avoid PostScript
PostScript files are very large, often for little information content. Convert them to HTML. Convert PostScript images to GIF (JPEG does not work well with drawings - it smears lines). If you must serve PostScript files, serve them compressed using a platform-independant tool such as gzip.

Serving inline JPEGs

Although Netscape and now Mosaic 2.6 support inline JPEGs, earlier versions of Mosaic did not, so they were not much used. One way around this is to use a CGI script to examine the value of HTTP_USER_AGENT returned from the browser, and return an appropriate image file.

A better way is to use the emerging Content-Type negotiation scheme. Browsers such as Arena can interact with servers such as Apache to negotiate for which version of a file to serve.

Examples

Here are some example images.
Here are some examples using Content-Type negotiation.
Here are some examples using X-ALTSRC.

X-ALTSRC tag

Another emerging standard that addresses the problem is the X-ALTSRC tag. It is used as a modifier in the IMG construct, eg.

<IMG
X-ALTSRC="image/x-art;triangle.art"
X-ALTSRC="triangle.tif"
SRC="triangle.gif"
ALT="Warning:"
$gt;

References

Tar file of this document tree.

Vancouver Webpages

Remove an Entry

Webpages Admin