Image Formats for Web Design
When you use images on a website, you have two things to consider: the image format and optimization. When you get these factors spot on, you have a crisp-looking image that loads quickly and looks the same in any web browser. If you get it wrong, you either have an image that loads at the speed of light but looks horrible, or you have an image that looks absolutely gorgeous but takes three forevers to load.
The GIF image file format for web design
An image saved as a GIF (Graphics Interchange Format) file comprises 256 (8-bit) colors. Images saved with the GIF format can be viewed on all current web browsers. The GIF (pronounced giff or jiff) image format is commonly used for images with large areas of solid color (such as logos or graphic symbols (such as buttons). This file format also works well when the banner is predominantly text.
The resulting file size of the image depends on how you optimize the image. When you optimize a GIF image, you specify the number of colors with which the image is saved and the color reduction algorithm. The goal is to optimize the image so that it still looks good and loads quickly.
GIF images also support transparency. This option is useful when you’re displaying text over a background image. When you create the image, use a background color similar to, or the same as, that of the background image for the web page.
Don’t use the GIF format to save photorealistic images with millions of colors. The restrictive color palette degrades the image quality. If you use dithering (where colors from the 256 color palette are mixed to create a reasonable facsimile of a color not in the palette), the file size is too large for practical use in a web page.
The JPEG image file format for web design
The JPEG (Joint Photographic Experts Group) file format is ideally suited for photorealistic images with millions of colors. The original JPEG (pronounced JAY-peg) format also has a derivative known as JPEG 2000, which features better image compression that results in smaller file sizes.
Unfortunately, as of this writing, JPEG 2000 is supported only by Safari. The JPEG format does its magic by compressing images. When you compress an image, data is lost; therefore, the JPEG format is known as a lossy format. The figure shows a JPEG image from a photographer’s web portfolio.
The image quality is determined by the amount of compression you apply when saving the image. The ideal compression depends on the amount of detail in the image and the size of the image in the web page in which you’ll insert it.
If the image is small without much detail, you can apply higher compression to the image. If the image takes up a large portion of the web page and contains a lot of detail, you’ll have to apply less compression to the image. Otherwise, the detail will be muddy, and the image won’t be crisp.
Fortunately, most image-editing applications, such as Fireworks and Photoshop, have options that enable you to compare the original image side-by-side to a version of the image with compression applied.
If you have an image with a lot of text — such as a banner with a text logo and a text tagline — saving the image in the JPEG format will result in text with jagged edges because of the text anti-aliasing blending the edges of the text with the surrounding image.
The best way to overcome this is to use an image-editing application (such as Fireworks) that enables you to slice an image into sections and then save them in different formats.
Save the sliced sections with text in the GIF format and the rest of the image as JPEG files. When you optimize the image, make sure you specify enough colors; otherwise, you’ll see jagged edges where the anti-aliasing blends the font to the background.
The PNG image file format for web design
The PNG (Portable Network Graphics) format was originally designed to replace the GIF format. For graphics such as buttons and banners, you can save a file using PNG-8 format, which results in an 8-bit file that supports transparency. When you’re working with photorealistic images with millions of colors, you can save the files using the PNG-24 format, which saves the file with millions of colors.
The best feature of the PNG (pronounced ping) format is that it uses lossless compression, similar to the LZW (Lempel-Ziv-Welch) compression used when compressing files saved as TIFFs (Tagged Image File Format). This results in a good-looking graphic with a relatively small file size.
The drawback to using the PNG format has been differing levels of support by popular web browsers. Current browsers offer better support for the PNG format, but there are still issues when PNG files saved with transparency are displayed.