Preparing images for the web

Since we're all blogging now(we are all blogging now, right?) I thought this recent article from lines and colors could be really useful to everyone. I'll just quote the most essential parts for those too lazy to click a link.

What’s the format, Kenneth?

Web browsers can generally display three kinds of images, news, comics and por… er, I mean GIF, JPEG and PNG. They all use some method of compression to reduce the file size of images so they can be transmitted over the web without taking a week to download.

GIF (Graphics Interchange Format) can be pronounced with either a hard or soft “G”, but the originators of the format say choosy artists choose “jif”. GIF was the original format back in the early days, when the web was 5 steam-powered computers hooked together with Radio Shack speaker wire across the MIT campus. GIF is really only suitable for images with a limited color range (256 colors) and flat areas of color. The GIF format can produce images with a small file size and can be good for some things, like simple, flat-color comics, typography and cartoons of the President’s head on Arnold Schwarzenegger’s body.

JPEG (Joint Photographic Experts Group) is pronounced “jay-peg”. JPEG images are by far the most common image format on the web, and are usually the format you will use to reproduce your art for the web. They support the full range of millions of colors. Used correctly, JPEG compression can compress images to to a remarkable degree without losing apparent image quality. Used incorrectly, it can turn your images into a grunky mess that looks like the cat threw up in your digital camera.

JPEG is a “lossy” compression method, meaning it throws away image data that the algorithm has determined you won’t miss; kind of like your wife cleaning out your studio when you’re not home. If you compress a JPEG too far, however, or re-compress an existing JPEG, you can wind up with dirty looking “artifacts” in the image. This is where is pays to have an image editor that gives you a preview, like Photoshop’s “Save for Web” feature, that shows you an approximation of how your image will look as you choose the compression level. You want the smallest file size possible without seeing any artifacts - dirty, squarish roughness in areas of the image (see the JPEG image above with the compression level of “10″). The stronger the level of compression, the lower the file size; but also the more image data that is thrown away. Always keep copies of your original files; and let your wife know that you really did buy 2 copies of Uncanny X-Men 96 on purpose.

As a general rule don’t re-save a JPEG as a JPEG; create a fresh one from the original file. Re-compression throws away more image data. JPEG’s that are originally saved with minimal compression, however, like those from a digital camera, can be used to make new JPEGs. Not much image data has been discarded. JPEGs saved for the web, though, are generally “pushed to the edge” and compressed as hard as possible without looking bad; re-saving those will make your images look like spoiled peaches.

PNG (Portable Network Graphics) is, the originators insist, pronounced “ping”, though you will hear “pee en gee” in certain circles. PNG images combine some of the characteristics of GIF and JPEG. Like GIF they are a lossless image format and support transparency. Like JPEG they support the full color range millions of colors. The main disadvantage is that their lossless compression method is not as efficient as JPEG’s lossy compression, and they make images with larger file sizes for the same level of apparent image quality.
The emails were right: size matters

Image size
In addition to file size you need to be concerned with image dimensions. You will need to determine how your images will display within your interface design, and how much room you have in your design area, before you resize them and save them out as final files for the web. I’ll be covering the design of online galleries and portfolios in a future post.

Once you know how the images will be displayed, you will probably be making more than one version of each image. Depending on your gallery design, you might be making:
a thumbnail and a full size image,
a thumbnail, medium size preview image, and full size image,
a thumbnail, full size image and jumbo, extra large, Grade-A, hi-res detail image,
a cropped detail close-up,
and/or all of the above.

If you’re clever and persistent, and not doing anything on Friday nights, you may be able to figure out how to have your image editing software save out several size versions simultaneously, for an entire folder full of files, using batch processing.

Resolution, or dpi and ppi, FYI, QED
Resolution in print is measured in “dots per inch” (dpi), or “lines per inch” (lpi), and on the computer is measured in “pixels per inch” (ppi). While this matters in print, or when scanning or working in Photoshop, image resolution does not matter on the web. What matters is the dimension in pixels.

If a 2″ by 2″ (5cm x 5cm) image has a resolution of of 100ppi (i.e 100 pixels per inch), it will be 200 pixels by 200 pixels. If the 2″ image has a resolution of 300ppi, it will be 600 pixels by 600 pixels. Both of those images will print at the same size, 2″; the higher resolution one will have more detail.

Web browsers, however, don’t understand or care about image resolution. All they understand is dimensions in pixels. So the first image will display much smaller on screen than the second. (Unless you learned “new math” in the 60’s, in which case 5 images + 5 images = 12 images.)