Some guidelines for creating and storing web images

By Branko Collin

Once a web site has been delivered and gone live, clients often choose to maintain it themselves, either by assigning an employee as a webmaster or by using a Content Management System (CMS). The people involved are not always well-versed in successfully maintaining web sites. The mistakes they make with images include making image file sizes too large, resulting in long download times, letting the browser scale images, resulting in unsightly files, and using image file names that confuse the web browser, resulting in the failure to display images.

Keep your visitors happy, your reputation unscathed and your web site beautiful by following these simple guidelines.

Use the PNG and JPEG file formats

When saving an image file, you can choose from a wide range of file formats. Only the formats supported by many web browsers are useful for the web. Generally, these are file formats optimised for use on computer networks by generating small file sizes for certain types of images. The three file formats most web browsers support are JPEG, PNG and GIF, of which the latter two serve similar purposes.

To decide which of these three to use for a given image, the following guidelines are useful about 90% of the time:

Use JPEG for photographs
Use PNG for abstract images

GIF supports only a subset of PNG's features and can safely be ignored. Only consider using GIF if you still want to support Netscape's version 4 web browsers. Animations are not addressed in this article.

The difference between photographs and abstract images is actually the difference between images with soft blends and those with abrupt colour transitions. If you have an abstract image with lots of soft blends, consider using JPEG. If you have a photograph of, say, a page of text, consider using PNG. Experiment a lot and always pay attention to the resulting file sizes: the smaller the better.

To reduce a PNG's file size, convert it to a so-called 'indexed' or 'palette-based' PNG. However, this conversion may cause colour loss, which is probably not desirable if it is noticeable. Again, experiment.

Scale images yourself

Web browsers are capable of scaling images for you, and a CMS might allow you to set the scaling factor. Your web site may also have a pre-set size factor for all images. Web browsers produce unsightly results when scaling an image. If you want to make sure that an image looks good, scale it beforehand to the size you need, then upload it.

A web page editor like Dreamweaver makes matters worse, as it pretends to scale your images, but instead it sets the scaling factor, which produces unsightly images. When you need to resize an image in Dreamweaver, use the Edit With function (right click the image) to resize and optimise your image in a dedicated graphics editor.

If you think you will need to resize a lot of images, make sure you have large original images to work from and save them locally in the native format of your graphics tool.

Figure 1. Scaling example.
1. Original image (64×64 pixels)	2. Resized by web browser (50×50 pixels)	3. Resized by graphics tool (50×50 pixels)	4. #2 zoomed 3×	5. #3 zoomed 3×

Use lower case letters without spaces for filenames

Web servers tend to be case sensitive, although your image file upload tools and web browsers are not. This means that a web server makes a distinction between 'firetruck.jpeg', 'Firetruck.jpeg', 'FIRETRUCK.jpeg', et cetera.

The reason this can cause confusion is that the problem is not always obvious. When you test locally, from a hard drive or company network, web browsers generally have no problems accepting 'FIRETRUCK.jpeg' when the web page prescribes 'firetruck.jpeg'. However, once you have uploaded your files to the web server, the server cannot locate 'firetruck.jpeg', because you only uploaded 'FIRETRUCK.jpeg'.

In order to avoid this, always use lower case letters in the file names of web documents, whether they are web pages or web images.

A file name generally consists of the following three parts:

base name
full stop
extension

In the first example given before, 'firetruck' is the base name, '.' the full stop, and 'jpeg' the extension. The extension denotes the type of image file. Generally, any given image file format has a limited number of possible extensions.

Follow these recommendations to avoid problems:

start the base name with a lower case letter
use lower case letters, digits, hyphens (-) and underscores (_) for the rest of the base name
do not use capitals in the extension.

It is also good practice to keep your file names relatively short and descriptive, so that the people who edit your web page are less likely to make a mistake when typing in the image file name.

Further considerations

This article outlines some common web imaging mistakes and explains how to avoid them.

Consider always using a workflow chain of author—editor—web. Once the author (artist) has created an image, the editor checks to see if the image is fit for the web. If it is, the image can be uploaded. The editor can be any colleague: the important consideration is to have multiple 'eyeballs' look at the image before it goes live.

Creating PNG images can be problematic because some imaging programs, such as older versions of Adobe Photoshop, have inadequate support for PNG. Also, PNG has many features and it will not always be clear which format you should use. Consider using GIF in those cases instead. ~~In some countries, you have to pay a license fee to cover patents used in GIF files.~~

PNG Tips for Cartoonists [external link] is an excellent guide to this web image format.

This article was first published in 2004. On February 20, 2008, I made some minor changes to make the text clearer.

article overview contact/home