Graphics on the Web

File Types

• gif
  • Graphics Interchange Format at wikipedia
  • 8 bits of data total (256 colors max)
  • allows for one color to be transparent
  • allows designer to specify fewer colors which usually result in smaller files
  • good for line art and text
  • bad generally for photos
  • supports animation due to an error in the file format
• jpeg
  • Joint Photographic Experts Group or at wikipedia
  • uses the extension jpg most often
  • good compression for small files sizes
  • lossy compression
  • compression quality can be set to store larger files/better quality to smaller files/lower quality
  • 24 bits of color (~16.7 million)
  • good for photos or images with lots of color
• png
  • portable network graphic
  • supports 8 bits (256 levels) of transparency
  • IE 6 and prior do not properly support transparency in pngs (although there are work arounds)
  • lossless compression
  • 24 bits of color (16.7 million)
  • photo type files are larger than jpeg
  • line art/illustrations are usually smaller than jpeg

When To Use Which Type

When selecting an image, it is always helpful to know how the imge is to be used. Look at the above info to know when to choose what method.

But how do you know what effect dropping an image from 256 colors to 8 colors will have on the quality and file size, or setting a jpeg quality to 4 instead of 6? This is where the Photoshop and Image Ready "Save for Web" tools become helpful.

Optimization of Graphics

In Photoshop, File > Save For Web

• You are given up to 4 saving options. The original and 3 others.
• Select one of the squares
• Change the "preset" from the right panel
• Notice the file size and approximate download below the image. (This is usefull for determining file sizes and best image to pick when quality is acceptable.)
• You can also zoom in and out with CTRL + and -.