Servage Magazine

Meet the Formats
Once you have your hands on some images, you need to get them into a format that will work on a web page. There are dozens of graphics file formats out in the world. For example, if you use Windows, you may be familiar with BMP graphics, or if you are a print designer, you may commonly use images in TIFF and EPS format. On the Web, bitmapped (pixel-based) images need to be saved in one of three formats: GIF (pronounced “jiff” or “giff’), JPEG (“jay-peg”), and PNG (“ping” or “P-en-gee”).

There is a fourth format I want you to know about, SVG (Scalable Vector Graphics), which is a bit of an oddball in that it is a vector drawing format generated by an XML text file, so I’m going to save that for the end of this chapter. In the meantime, we’ll focus on the universally supported bitmapped image formats GIF, JPEG, and PNG.

If this sounds like alphabet soup to you, don’t worry. By the end of this section, you’ll know a GIF from a JPEG and when to use each one. Here is a quick rundown:

GIF images are most appropriate for images with flat colors and hard edges or when transparency or animation is required. JPEGs work best for photographs or images with smooth color blends. PNG files can contain any image type, but they are especially efficient for storing images with flat colors. PNG is the only format that allows multiple levels of transparency.

This section tackles terminology and digs deep into the features and functions of each format. Understanding the technical details will help you make the highest-quality web graphics at the smallest sizes.
The ubiquitous GIF
The GIF (Graphic Interchange Format) file was the first image format supported by web browsers. Although not designed specifically for the Web, it was adopted for its versatility, small file sizes, and cross-platform compatibility. GIF also offers transparency and the ability to contain simple animations. Over 20 years later, it is arguably still the most widely used web graphics format.

Because the GIF compression scheme excels at compressing flat colors, it is the best file format to use for logos, line art, icons, etc. You can save photographs or textured images as GIFs, too, but they won’t be saved as efficiently, resulting in larger file sizes. However, GIF does work nicely for images with a combination of small amounts of photographic imagery and large, flat areas of color. To make really great GIFs, it’s important to be familiar with how they work under the hood and what they can do.
8-bit indexed color
In technical terms, GIF files are indexed color images that contain 8-bit color information (they can also be saved at lower bit depths). Let’s decipher that statement one term at a time. 8-bit means GIFs can contain up to 256 colors—the maximum number that 8 bits of information can define (28=256). Lower bit depths result in fewer colors and also reduce file size.

Resources and further reading

Shallow Sky

Graphics soft