Loading

Office for Information Technology

Graphics for the Web

There are 2 basic types of computer graphics- vector and bitmap. Vector graphic programs, such as Illustrator, store images as mathematical equations describing points, lines, curves and polygons. Bitmap images, also known as raster graphics, are stored as a description of each pixel.

Vector image (left) vs. bitmap (right)

As of now, only certain types of bitmap images (GIF, JPG /JPEG, and PNG) are widely supported by browsers (see SVG for more about vector graphics on the web).

The format you choose can affect:

  • maximum number of colors allowed
  • file size
  • image data loss (lossy vs. lossless compression)
  • image clarity
  • transparency support
  • animation support

Transparency

GIFs and PNGs allow the background of the webpage to show through the image, if desired. GIFs allow binary transparency- any given pixel can be either transparent or opaque. This works well when you create the image on the same background color as the web page it will live on, but if  the web page’s background color changes, you’ll see ugly anti-aliasing  (see below). PNGs allow alpha channel transparency, which allows any pixel to have any degree of transparency, so you can get neat see-through effects, and don’t have to worry about creating the image on a specific background color.

From left to right: no transparency, binary transparency created on white background (GIF), binary transparency created on blue background (GIF), alpha channel transparency (PNG)

File type comparison

If you don’t want to worry about the technical details, just use PNG – it’s really hard to go wrong with.

JPG

  • best for: photographs or any item that contains many colors with subtle variations
  • bad at: maintaining crisp lines/edges (e.g. text or clip-art), compressing blocks of color
  • color: full color
  • compression: lossy, adjustable levels (if not kept at 100% quality, the image loses data each time it’s saved). Keeping a full size, full quality backup of photos is highly recommended.
  • does not allow: transparency

GIF

  • best for: vector graphics, text, art with crisp edges and blocks of solid color
  • bad at: color gradiants, subtle shading, photograhs
  • color: up to 256 colors
  • compression: lossless
  • allows: binary transparency, animation

PNG

  • best for:  art with both subtle colors & crisp edges (e.g. text over a photo), or art with drop shadows or partial transparency effects.
  • bad at:  nothing
  • color: up to full color (in PNG-24 mode)
  • compression: lossless
  • allows: alpha channel transparency, but not supported by old browsers (IE6)

Further reading

Is this documentation accurate and current?
Did you find this documentation useful?