Bitmap Images for the Web: Formats and Optimisation Options

GIF (Graphics Interchange Format)

Mnemonic:

“GIF is for Graphics.”

Color depth:

8-bit (256 color)

Used for:

Graphical art (any image that consists mostly of flat areas or lines of contiguous color: most logos, diagrams, drawings, maps, cartoons, arrows, etc). Text that must be turned into bitmap images is usually saved in GIF format. SVG may be considered as an alternative format in some circumstances.

Compression:

Uses LZW compression algorithm in run-length encoding. Lossless, assuming that colors in the original image are the same as the target palette of the GIF.

Optimal settings:

• Minimise the number of colors (you can type in and experiment with the number of colors used; it does not have to be what PhotoShop or any other image editor suggests).

Transparency:

One color only may be specified as transparent. (Tends to produce “halo” effects when used against colors that are different from its assumed background color.)

Other features:

Can be animated.

JPEG (Joint Photographers Experts Group)

Mnemonic:

“JPEG is for Photographs.”

Color depth:

24-bit (16,777,216 colors)

Used for:

Photographs.

Compression:

Uses lossy compression. Technically: 8 × 8 pixel blocks are transformed via a discrete cosine function into a quantized matrix of coefficients. Less technically: JPEGs can appear “blocky” at higher compression ratios.

Optimal settings:

• Start the “quality” slider as low as possible. 20 is a good start, but you may be able to go as low as 10 to 15 in some cases.
• Don't think of the slider as “quality”, but as compression, with high compression to the left, low to the right.
• Judge the visual quality of the image at normal resolution (i.e. no zoom). If the quality is acceptable, leave the slider position where it is (or even move it down a notch). Otherwise, work the slider up in small increments (steps of 5 or 10) until the quality becomes acceptable.
• Turn “progressive” on for images greater than 10K in size: it will usually be smaller a smaller file size, and the image will feel like “loads faster” while looking better on high-density displays such as Retina-based Apple devices.

PNG (Portable Network Graphic)

Mnemonic:

“GIF and JPEG met, married, and had a baby named PNG”

(Meaning: PNG combines many of the best features from both formats, as a child can inherit the best qualities of both parents).

Color depth:

8, 16, 24, or 32-bit

Used for:

Lossless compression of graphics or photographs. Images for which an alpha mask is required. Can, in theory, be animated, via the APNG format. Often a smaller file size than GIF, and therefore often a better alternative (SVG is another possibility).

Compression:

Uses a lossless compression algorithm. Tends therefore to have large file sizes.

Optimal settings:

8-bit PNGs follow the optimization guidelines for GIFs. 24-bit PNGs follow the applicable optimization values for JPEGs.

Transparency:

8-bit alpha mask (256 levels of grey, the same as PhotoShop). Not supported well by Internet Explorer before IE8.

Once you have stepped through the workflow we have discussed: creating the original image in as high a resolution and color depth as possible; saved it in an originals folder in your site; reducing the image size, eliminating excess pixels; and saving the image as a GIF, JPEG or PNG, with optimized settings, you are ready to add the final web-ready image to your page. (You don’t need PhotoShop to optimize images: online resources such as Kraken can also do a good job of compressing your files.)

“What About Format X?”

Occasionally other web image formats are proposed, such as JPEG 2000 and, more recently, WebP. None of these have yet gained a substantive foothold. While WebP is promising, it has its detractors, and is not yet supported by PhotoShop or the majority of browsers. Until that situation changes, I'll leave coverage of other formats as a side note.