Image Formats: a Quick Guide for the Perplexed

From time to time I find myself explaining the differences between some of the common image formats, and when you'd better use each. I thought it would be useful to post about it, especially since I'm sure I'm going to learn something new in the process.

Raster vs Vector

Raster and Vector images: zoom in

Most commonly used are Raster image formats, such as bitmap, jpeg, gif and png. Raster means, there are pixels arranged in a grid which makes sense because most if not all display devices are eventually made of grids of pixels. However, Vector formats keep the image represented as geometric shapes, rendering to pixels only when actually displaying. This way, there's no low resolution problems. Think of flash graphics, or PowerPoint, or PDF (when not made of a scanned document) - you can zoom in as much as you want, and the curves remain sharp. These formats are often used for print, by designers, CAD tools, games, etc.

So lets focus on the raster image formats.

Bitmap (.bmp)

Bitmap is as simple as they come - uncompressed. The data for each pixel is stored in a pixel array, according to the defined image color depth (from 1-bit per pixel which is just black and white to 32-bit which supports over 4 billion colors, and even transparency information). Being that simple, almost anything can display it, so that's the up side. File size is another matter - bitmaps can get huge. Ever got a 5MB email just because someone dumped a screenshot in it?
Usually bitmaps don't contain transparency data, and even when they do, most applications don't support displaying it properly - so for most practical means, it's fair to say bitmaps don't support transparency.

Graphic Interchange Format (.gif)

GIFs are limited to 256 colors (or 255 + transparent pixels). The image data is compressed in a loss-less algorithm - meaning the quality of the image isn't damaged due to the compression. If the original image contained more colors, the first conversion to GIF will reduce the quality, of course (this effect is called "posterization").
These attributes make GIF a light weight and widely supported image type that works well for simple images, logos, diagrams, cartoon style drawings, etc - but not for photos or graphics rich with gradients.
Oh, and GIF can be animated, too.

Portable Network Graphics (.png)

GIF was patent protected, and legal disputes triggered the development of PNG as an alternative. And a good thing too - it supports rich color, and a full alpha channel - and typically compress even better than GIFs unless the image is very small. Wait... what's an alpha channel? Well, remember how GIF can have transparent pixels? In PNG, each pixel can have any level of transparency, which is great for combining images. However, PNG doesn't support animation.
Note that while it can support photos, it's compression works best for images with large blocks of solid color, similar to GIF.

JPEG (.jpg, .jpeg)

Designed for photos, this is the default standard file type most digital cameras produce. Photos are assumed to have some unstructured noise in them, and typically low contrast color transitions. These attributes allow using compression which is lossy - when you save an image as a JPEG, some noise may be added to it. The more noise you are willing to take, the stronger compression you can have.
The compression uses the same math that's in MP3 - discrete cosine transform (DCT), which is similar to Fourier transform. In a nutshell, the image is broken to 8x8 pixel squares, and each is represented as a combination of frequencies (or cosines). The amount of noise can be controlled for trade-offs of size versus quality.  
No transparency or animation.

The Cheat Sheet

Format	Extension	Best used for...	Compression	Transparency	Animation
Bitmap	.bmp	Anything if you don't care about size	none	none	none
GIF	.gif	Simple graphics, logo, icon, silly cats, limited colors	lossless	boolean	yes!
PNG	.png	Most graphics	lossless	full	none
JPEG	.jpg	Photos	lossy (noisy)	none	none

Useful Links

To learn more, here's a good start: Image file formats (wikipedia)
Cool free service for image size optimization: kraken.io/web-interface