Meet the Formats & The Common GIF for Web Graphics|part 2

IN THIS TUTORIAL

Getting familiar with the GIP

Know about the Formats

Know about color palettes

Web graphics typically come in three varieties type of formats. There are GIF, JPG, and PNG. Your choice of format should depend on the kind of image you’re using.

format3

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, 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),

format1

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.

The Common GIF

The GIF (Graphic Interchange Format) file was the first image format supported by web browsers.  its versatility, small file sizes, cross-platform compatibility, transparency, and the ability to contain simple animations. So it is arguably still the most widely used web graphics format.

The-Common-GIF

Because the GIF compression scheme excels at compressing flat colors, it is the best file format to use for logos, line art, icons, etc. GIF does work nicely for images with a combination of small amounts of photographic imagery and large, flat areas of color.

8-bit indexed color

In technical terms, GIF files are indexed color images that containv8-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.

format0

Common Color Palettes

All 8-bit indexed color images, including GIF and PNG, use palettes to define the colors in the image, and there are several standard palettes to choose from. Some are methods for producing a custom palette based on the colors in the image. Others apply a preexisting palette to the image.

Exact. Creates a custom palette out of the actual colors in the image if the image already contains fewer than 256 colors.

Adaptive. Creates a custom palette using the most frequently used pixel colors in the image. It allows for color-depth reduction while preserving the original character of the image.

Perceptual (Photoshop only). Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity. Unlike Adaptive, it is based on algorithms, not just a pixel count. It generally results in images with better color integrity than Adaptive palette images.

Selective (Photoshop only). This is similar to Perceptual, but it gives preference to areas of broad color.

Web Adaptive, Restrictive, or Web216. Creates a palette of colors exclusively from a palette of 216 colors that do not dither on 8-bit monitors. 8-bit monitors are a thing of the past, so web-safe palette is no longer relevant or recommended.

Custom. This allows you to load a palette that was previously saved and apply it to the current image. Otherwise, it preserves the current colors in the palette.

System (Windows or Macintosh). Uses the colors in the specified system’s default palette.


Optimized Median Cut (Paint Shop Pro Photo only). This reduces the image to a few colors using something similar to an Adaptive palette.

Optimized Octree (Paint Shop Pro Photo only). Use this palette if the original image has just a few colors and you want to keep those exact colors.

Next Tutorial

Previous Tutorial