GIF (Graphics Interchange Format)

Mnemonic:

“GIF is for Graphia's.”

Color depth:

8-bit (256 color)

Used for:

Graphical art (any image that consists mostly of flat areas or lines of contiguous colour: most logos, diagrams, drawings, maps, cartoons, arrows, etc). Text that must be turned into bitmap images is usually saved in GIF format.

Compression:

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

Optimal settings:

• Minimise the number of colours (you can type in and experiment with the number of colours used; it does not have to be what PhotoShop or any other image editor suggests).
• Try using the “Restrictive” palette first. “Perceptual”, “adaptive”, “selective” or “greyscale” may also be options.
• Try to keep “Web Snap” at or near 100%.
• Try to keep “Dither” off.
• Do not attach metadata. Do not convert to sRGB.
• “Transparency” may or may not reduce file size. Experiment with removing the background to the image and turning “transparency” on and off.
• “Matte” only matters if “transparency” is on. If it is, “matte” should be set to the predominant background colour the image will be set against.
• Finally, experiment with interlacing. If turning it on reduces file size, leave it on.

Transparency:

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

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:

• Ignore “Low”, “Medium”, “High” pre-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.
• Do not attach metadata. Do not embed a colour profile or convert to sRGB.
• “Progressive” may or may not reduce file size. Experiment with turning “progressive” on and off.
• “Blur” is not usually required, but may be useful if the image was already blurred to begin with. Higher levels of blur will allow the JPEG compression algorithm to further decrease file size.

PNG (Portable Network Graphic)

Mnemonic:

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

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

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 colour 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.)