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.
A patent on the LZW compression algorithm is held by Unisys; see
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
- 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.
Here are some example images.
Here are some examples using Content-Type
Here are some examples using X-ALTSRC.
Another emerging standard that addresses the problem is the X-ALTSRC tag.
It is used as a modifier in the IMG construct, eg.
Tar file of this document tree.
Remove an Entry