This is a basic guide to dealing with images on the web — - file formats, sizing, naming protocols, and adding them to a page.
Choosing the Right File Format
There are three common image file formats in use on the web: JPEG (also JPG), GIF and PNG. Respectively, these stand for Joint Photographic Experts Group, Graphics Interchange Format, and Portable Network Graphic.
The most simple and important way to divide between these three formats is to realize that JPEG is designed for use with photographic images; the others are intended for graphical images. This isn’t a hard and fast rule — - in general, however, the “lossy” compression of a JPEG image file will result in a smaller, clearer image when used with more complex images.
PNG and GIF formats are most effective with images containing sharp edges and clear expanses of colors — - cartoons, illustrations, lettering, or planar graphics.
You may find recommendations against using the PNG image format. These are usually based on older information. The Portable Network Graphics format is a relatively new format, developed in 1995. In general, the PNG format is an improved version of the
GIF format.
Examples:
GIF Version (18 kilobytes)
PNG Version (19 kilobytes)
JPG Version (5 kilobytes)
These three example images look fundamentally similar; at this size and level of detail, the visual difference is minimal. However, the file size is substantially different — - the JPG file will load 3 1/2 to 4 times as fast as the GIF or PNG versions.
Advantages of the PNG format:
- 24-bit Transparency: although not yet supported by all browsers, 24-bit transparency allows an image to allow a background of any complexity show through transparent regions of the image.
- 5% – 25% better compression than the GIF format.
- Lossless compression
Advantages of the GIF format:
- None, really.
Advantages of the JPEG format:
- Best reproduction of complex images.
- Controllable compression quality. (You can compress as far as needed in order to produce a clear image at the smallest file size.)
One of the things you want to do with web images is produce the smallest possible file size which will still be a clear, attractive image. Using the right file format will significantly help in this respect.
Setting Standards for File Names
In general, it’s allowable to use any of these for file extensions either capitalized or not; but I strongly recommend using a consistent method. In general, it’s best to establish a clear rule for file naming: all lowercase is a common preference.
One reason for using a consistent image naming scheme is for your own ease of use. An entire web directory filled with images names “DSC_00nn.jpg” is very difficult to reference when you’re attempting to incorporate those images into your site. Clear labels which indicate what’s depicted can save a great deal of your time.
Search engines like real words, and they will read the names of your files. An image named “joe-dolson-and-me-at-ses-chicago-2006.jpg” will be very clear to them. The hyphens are commonly understood as word separators, so search engines will have an easy time parsing the basic contents of your image.
Use of Code to Implement Images
The basic code to include an image follows this pattern:
<img src="" alt="" height="" width="" />
The src value is the location of your image, of course. alt is a place to put an alternative description of the image if one is needed. The alt attribute should always be included in your image code for accessibility reasons, whether the value is filled or not. For more on this subject, see Search Optimization, Accessibility, and Images: Best Practices.
height and width are commonly abused attributes. One thing I’ve seen many times is the use of these attributes to define the displayed size of an image. This is NOT what these attributes are for. Image files have absolute sizes. In your browser, if you right click on any image and select “Properties,” you’ll see a dialog box containing information about the image. One of those pieces of information is the dimensions of the image, as displayed. It may not, however, by the actual dimension of the image.
You can control what size an image will display at by setting the height and width attributes. It works. However, displaying any image at any dimensions other than its native dimensions will cause distortion in the image. The image is not being changed to these new dimensions; it’s simply being squashed or stretched.
Examples:
JPG Version, actual size 200 pixels by 150 pixels.
JPG Version, actual size 200 pixels by 150 pixels, displayed at 300 pixels by 225 pixels.
JPG Version, actual size 200 pixels by 150 pixels, displayed at 100 pixels by 75 pixels.
This is a relatively small shift for these images. The change is proportional; so the images aren’t being skewed out of their normal change, which helps keep the problems minimal. However, you’ll still easily be able to see that the two adjusted images are noticeably pixelated compared to the original image. These images should have been resized, instead:
JPG Version, actual size 300 pixels by 225 pixels, displayed at 300 pixels by 225 pixels.
JPG Version, actual size 100 pixels by 75 pixels, displayed at 100 pixels by 75 pixels.
When an image is warped (changed in a manner which changes the proportions) the effects can be much more substantial:
JPG Version, actual size 200 pixels by 150 pixels, displayed at 180 pixels by 60 pixels.
These changes can distort the image to a degree where it can become almost unrecognizable.
Editing and Sizing Your Images
There are two key rules to editing and sizing images: reduce the quality to the lowest level which provides a high-quality image and show what’s important. Both of these are rules which depend on your judgment. It’s up to you to decide whether the image you’re working on is acceptably high quality. There are no set rules for what a good quality image will be.
From a quality perspective, the degree to which you’ll be able to reduce is dependent on the complexity of the image. Extremely complex images with fine details can only be practically reduced so far. With JPG images, they’ll quickly lose definition in the detailed areas. With GIF and PNG images, you’ll either find yourself with a bloated file size or you’ll lose critical colors. Try different file formats if the default isn’t working; the actual choice of format isn’t what’s important.
“Showing what’s important” is an important rule for thumbnail generation. If you’re using a thumbnail view to provide a preview of larger images, what’s more important: that visitors can see the entire image at a tiny size, or that they can see a few details of the image and understand them?
Take these two example thumbnail images as food for thought:
JPG Version, 80 pixels by 60 pixels: full file reduced.
JPG Version, 80 pixels by 60 pixels: selected detail.
While the first image does provide the full image, the visitor isn’t really able to draw any practical conclusions about the product from the image. The second image, while still hardly detailed, is at least clear, and may do more towards drawing a visitor further into the product.
On the whole, working with your images in a consistent and systematic manner, paying attention to file size, file format, and the content of your images will help you a great deal in providing a faster, more attractive web site. It’s a simple step; but it’s well worth it.
