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