Processing pictures for the web

by Wilma Keppel

Tony and Jerrie Tipton Just 150 pixels wide and 4,234 bytes (4 K), this image is still usable.

For best results, pictures on the web should

• Be large, sharp, and detailed enough for good viewing, BUT
• Have small files so they load quickly.

Fortunately, there are ways to shrink the size of graphic files while keeping the pictures large and their appearance good. This is called "squishing".

We can also make small, good-looking pictures that are clear enough to do the job (see example at right).

Squishing pictures

You will need a program that lets you view, change, and save pictures, such as Photoshop, Paint Shop Pro, or GraphicConverter.

Always work with a copy of your picture, not the original!

1. Open your picture in your picture-editing software.
2. Reduce image size:
• Crop by removing the less important parts. See effective cropping tips demonstrated at useit.com (scroll down to the photos).
• Resize the image (reduce the number of pixels). Keep your pictures about as small as you can get them and still see details. We use 150 pixels the long way for thumbnails on the land restoration page, 250 pixels for most pictures, and 360 pixels for large pictures. 360 pixels is narrow enough to print well with virtually any browser and printer.
3. Pick the right format to save your picture in. Use JPEG for photos, GIF for drawings and diagrams.
4. Compress the image when you save it
   • Compress JPEGs by saving your file at lowest quality. This can drastically reduce file size (900 K to 40 K). If your saved image looks too bad, make another copy of your original and sharpen it before you save, or save at slightly better quality.
   • Compress GIFs by reducing the number of colors. To compress an existing GIF in Photoshop 5:
   • Select Image > Mode > RGB
   • Select File > Export > GIF89a Export...
   • On small images, uncheck Interlace
   • In the dialog box, pick Adaptive palette
   • Type in a very low number of colors, then Preview the image. Work up gradually until you get an acceptable result, and save that. (The small test image I used while writing this reduced from 16 to 10 colors, and from 26,238 to 755 bytes.)
   • To compress a GIF when you make it from another type of file:
   • Select Image > Mode > Indexed Color
   • Follow the rest of the steps above, starting with "Select File > Export > GIF89a Export..."
   • To save a JPEG to a GIF in Photoshop 5, select Image > Mode > RGB, then Export as GIF. Choose Adaptive color, then reduce the number of colors. A 300-color image may look fine with 32 colors or less. Tip: selecting areas before Exporting forces Photoshop to build its palette from colors in the selection.
5. Don't save previews or custom icons. (This setting may be in your software's Preferences).

Using these methods, you should be able to get even large pictures well under 100 K.

Kachana Pastoral Company This 360 pixel image is just 10,433 bytes (10 K).

Resources

• David Siegel's Creating Killer Web Sites covers picture squishing and many other aspects of web design in detail.
• Web Style Guide has a good diagram of picture sizes that work for web viewing and printing. The site is available as a book. Also see their second edition site and book.
• Effective web design tips, links, and resources

Updated 4 December 2002
URL: managingwholes.com/squish.htm