Working With Digital Images

Introduction
Because text makes up the bulk of the Web’s content, it is most likely inevitable that you’ll end up working with them at some point, unless you favor a terribly basic website. Images are part of the foundation to the internet, comprising the bulk of website interfaces, the navigation of millions of sites, and a considerable amount of a web site’s content. As the Web continues to plow its way into every facet of life, this trend can only continue.  website visitors now expect a certain amount of visual stimulation, just as readers of a magazine expect illustrations or photographs.

Of the many image formats, two formats inparticular are noteably the most popular, GIF and JPG file formats.

JPEG
The JPEG (Joint Photographic Experts Group) format is used primarily for images that require smooth color transitions and continuous tones, such as photographs. JPEG supports millions of colors, and relatively little image detail is lost—at least when compression settings aren’t too high. This is because the format uses lossy compression, which removes information that the eye doesn’t need. As the compression level increases, this information loss becomes increasingly obvious.

Although it’s tricky to define a cutoff point, it’s safe to say that for photographic work where it’s important to retain quality and detail, 50 to 60% compression (40 to 50% quality) is the highest you should go for. Higher compression is sometimes OK in specific circumstances, such as for very small image thumbnails, but even then, it’s best not to go over 70% compression.  If the download time for an image is unacceptably high, you could always try reducing the dimensions rather than the quality—a small, detailed image usually looks better than a large, heavily compressed image. Also, bear in mind that common elements—that is, images that appear on every page of a website, perhaps as part of the interface—will be cached and therefore only need to be downloaded once. Because of this, you can get away with less compression and higher file sizes. 

GIF
GIF (Graphics Interchange Format) is in many ways the polar opposite of JPEG—it’s lossless, meaning that there’s no color degradation when images are compressed. However, the format is restricted to a maximum of 256 colors, thereby rendering it ineffective for color photographic images. Using GIF for such images tends to produce banding, in which colors are reduced to the nearest equivalent.

GIF is useful for displaying images with large areas of flat color, such as logos, line art, and type. You should generally avoid using graphics for text on your web pages, but if you do, GIF is the best choice of format. Although GIF is restricted to 256 colors, it’s worth noting that you don’t have to use the same 256 colors every time. Most graphics applications provide a number of palette options, such as perceptual, selective, and Web. The first of those, perceptual, tends to prioritize colors that the human eye is most sensitive to, thereby providing the best color integrity. Selective works in a similar fashion, but balances its color choices with web-safe colors, thereby creating results more likely to be safe across platforms.