some basics on web images

On this page: Back to school time is here, and if you want to learn about how to create and add web images to your pages, this is the right classrooom! Lois uses a lot of images in pages where they add value, and this is a distillation of all the basics on adding them to web pages, and the intricacies of different file formats.

back to articles index

This isn't a detailed treatise on graphic design for the web, just a summary of the basic concepts, and some useful things that I've learned from experience. As it's more of a tutorial than many of the other articles, I've divided it up into a number of topics - you can either choose one from the list of links on this page, or follow the series in the order I suggest, using the back and next links on every page.

It starts with a summary of how to get an image into a web page, and then talks about the technical side of the formatting and processing of images for the web. Anyone who knows a bit about constructing a web page can probably skip the first topic.

getting the image in a web page: a basic primer on the the <img> tag and how it works.
image file formats (JPEG, GIF and PNG): the features of the different formats introduced.
- interlacing samples: what a GIF interlace looks like, and comparison with JPEG progressive rendering.
GIF palettes: making the most of the limited colours available for an image, and reducing the file size.
JPEG compression: taking advantage of the compact files offered by JPEG (optimisation).
choosing an appropriate file format: different formats are appropriate for different kinds of image; find out which to use for logos, photos, etc.
odds and ends: short notes on graphics card colour support (colour depth), and image problems with AOL browsers. [largely obsolete - left for interest]
- graphics card colour depth samples: what the same page looks like at 16, 256 and 16M colours. [largely obsolete - left for interest]

If you want a more design-oriented take on graphics, I can recommend Joe Gillespie's excellent Web Page Design for Designers - he used to run a very beautifully-crafted site, and now seems to have sold it on to someone else with the visual equivalent for a tin ear - perhaps a brass eye? - but his words are still there, thank goodness.