HTML and CSS Reference
In-Depth Information
PNG's 3D effects. Simplify your drawings. Stay away from panor-
amic photographs. Avoid large, empty backgrounds in your images,
as well as gratuitous borders and other space-consuming elements.
Also avoid
dithering
(blending two colors among adjacent pixels to
achieve a third color); this technique can significantly reduce the
compressibility of your images. Strive for large areas of uniform
colors, which compress readily.
Reuse images
This is particularly true for icons and GIF animations. Most
browsers cache incoming document components in local storage for
the very purpose of quick, network-connectionless retrieval of data.
For smaller GIF animation files, try to prepare each successive im-
age to update only portions that change in the animation, instead
of redrawing the entire image (this speeds up the animation, too).
Divide large documents into smaller segments
This is a general rule that includes images. Many small document
segments, organized through hyperlinks and effective tables of
contents, tend to be better accepted by users than a few large doc-
uments. In general, people would rather "flip" several pages than
dawdle, waiting for a large one to download. (It's related to the TV
channel-surfing syndrome.) One accepted rule of thumb is to keep
your documents smaller than 50 KB each, so even the slowest con-
nections won't overly frustrate your readers.
Isolate necessarily large graphics
Provide a special link to large images, perhaps one that includes
a thumbnail of the graphic, thereby letting readers decide whether
and when they want to spend the time downloading the full image.
Because the downloaded image isn't mixed with other document
components like inline images, it's also much easier for the reader
to identify and save the image on her system's local storage for
later study. (For details on noninline image downloads, see
section
