Part of the Image Basics Reading List

Bitmaps: images composed of induvidual pixels, or “dots” of color, come in three major formats for the web: JPEG, GIF and PNG. Each of these formats has a particular purpose, use, and limitations.

GIF (Graphics Interchange Format)

NASA
The NASA logo, a good example of the correct use of the GIF 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. 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:
Optimal GIF SettingsMinimize the number of colors (you can type in and experiment with the number of colors used; it does not have to be what 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 unless you are actively using it as a means of captioning the image with PHP or part of a sitemap
  • “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 color the image will be set against.
  • Finally, experiment with interlacing. If turning it on reduces file size, leave it on.
    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)

    Christine Adams
    A photograph of Christine Adams, saved as a JPEG
    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:
    • Optimal JPEG SettingsIgnore “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 unless you are actively using it as a means of captioning the image with PHP or part of a sitemap.
    • Ensure that you convert the image to sRGB.
    • 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.
    • “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)

    Google Maps icon
    Google Maps icon, a good example of the PNG format
    Mnemonic:
    “GIF and JPEG met, married, and had a baby named PNG” i.e. 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 ( 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 is not yet supported by the majority of browsers. Until that situation changes, I'll leave coverage of other formats as a side note.

    Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.