It might be argued that images have become more important than text for the online information we consume.
Whether posting the latest puppy photos on Facebook or creating the next blockbuster website, image quality matters. Here’s a quick tutorial on image formats for the Web.
A review of the most popular image formats
To understand how images change when edited and how they display online, you need to know how the various formats differ. Here are the basics:
Bitmaps (aka raster images): Most of the images used online are some form of bitmap. They include GIFs, JPGs, and PNGs. They’re popular for websites because they’re often compressed and easy to render.
Bitmapped images are constructed from rows and columns of pixels. Each pixel contains a color which, when combined with millions of adjacent pixels, creates an image.
The counterpart to bitmaps is vector graphics. Since vector images are defined mathematically, they can be scaled up or down with virtually no loss in visual quality. Computer fonts are typically based on vector data. But to be displayed on a monitor, vector-based graphics must be converted to bitmaps (otherwise known as rasterization).
The bitmap format works well, provided you use it at its intended resolution — 100 pixels per inch (ppi) for the Web. As anyone who uses a digital camera knows, when you zoom in, the image will eventually become pixelated. It “falls apart” — the pixels become more obvious, and previously smooth curves and diagonal lines become jagged. This process is especially apparent for images containing text.