Over 90% of the input our brains process is visual.
As a species, we’ve been coming up with ways to display images since the invention of the first computer. There are many compressed image file formats available today, so knowing what they are and how they’re used can get confusing fast.
To help you out, here’s a quick primer on image formats: the terminology behind them, some common formats in use today, and what their uses are.
Image File Format Terms
When we talk about image file formats, there are a few terms that pop up consistently. They help us describe the behavior of certain formats so it can be helpful to understand what they are.
Here are some of the more common terms associated with image formats.
Lossy and Lossless Compression
Lossless compression is a class of algorithms that allows original data to be reconstructed perfectly from compressed data. It’s called “lossless” because the original data loses no quality from being reconstructed. Lossy compression, on the other hand, reconstructs an approximation of the original data.
There are benefits to both lossy and lossless compression. Lossy compression often improves compression rates resulting in smaller file sizes. Lossless compression obviously results in the best looking final image.
8-Bit and 24-Bit color
Bit stands for “Binary Digit”. When discussing computer graphics, 8-bit and 24-bit refers to how many digits you have to represent a color. With 8 binary digits, you can represent 256 separate colors. With 24 binary digits, you can represent 16.7 million separate colors.
Indexed Color and Direct Color
Indexed color refers to images whose palettes are 256 colors or less. They’re called indexed color images because the actual image data for each pixel of the image is a reference to a finite palette. The palette of index color images is stored in the file along with the image itself.
Indexed color was essential in the early days of computing because computer screens were commonly limited to 256 colors. Today, computer hardware easily renders the full spectrum of color but indexed color images still have their uses. For one, they’re usually much smaller, saving the user bandwidth and storage space.
Direct color images lack a color palette lookup table. Instead, each pixel has its own RGB color value. Such images are generally bigger in terms of file size but they support an unlimited amount of colors.
Bitmap and Vector Images
Bitmap or raster images are images that are stored as a series of pixels. Each pixel is a tiny square assigned a color. These pixels are then arranged in a certain order to form an image. When you zoom into a bitmap image you can see the individual pixels that make it up.
The alternative to bitmap is vector. Vector images aren’t based on pixel patterns, rather they use mathematical formulas to draw the lines and curves of the image. Vector graphics lose no quality when zoomed in or out.
Common Image File Formats
Now you know the terminology, let’s take a look at some of the most common image file formats in use today.
PNG
PNG stands for “Portable Network Graphics”. It’s a raster-graphics file format that supports lossless data compression.
Originally developed as an improved, non-patented replacement to the GIF, PNG images have a lot of benefits. They support greyscale images, palette-based images, and full-color non-palette-based RGB/RGBA images.
They also support transparency, something originally relegated to GIFs in the early days of the web. Unlike GIFs, PNGs support alpha transparency – a type of transparency that can create the appearance of partial or full transparency.
PNG was made for the web and it’s where it shines. JPEG may still lead in terms of compression but PNGs lossless quality and transparency support make it the go-to file type for niche uses.
If you need to clearly render a logo or text then PNG is the file-type of choice. PNGs have also found their home as the default for mobile screenshots.
Need to convert your old GIFs to PNGs? We can help you with that.
JPEG
JPEG stands for “Joint Photographic Experts Group”. It’s a lossy image format that sees extensive use online where its high-compression rate is a boon to file storage and load speed.
JPEG is a great image format to use when displaying realistic, photographic imagery. Where it falls down is in situations where images contain crisp lines or text. Because of the compression used, such images can develop “JPEG artifacts” or sections of image distortion.
This image distortion can also occur when a JPEG is opened, edited, and then resaved. This is the “lossy” characteristic at play. Because each save approximates the original data, consecutive saves will result in a gradual loss of information.
GIF
GIF stands for “Graphics Interchange Format”. It’s a bitmap image format that was developed in 1987 and remains one of the most widely used formats today.
GIFs use lossless compression but store image data using indexed color, so a standard GIF can include a maximum of 256 colors. To achieve any palette higher than 256 colors, GIFs must be separated into multiple blocks that individually support 256 colors. This is rarely feasible because of the resulting file size.
GIFs are well-suited to buttons or banners on websites – uses that typically require a finite number of colors. Because they support animation, they’ve also found niche uses in this respect. If you’ve ever used an animated reaction image, you’re using a GIF.
As versatile as GIFs are, they’ve fallen out of favor in recent years due to the wide-spread adoption of PNGs. PNGs support 24-bit color and transparency, making them ideal for uses typically associated with GIFs. The only niche PNGs haven’t managed to take over is animation.
SVG
SVG stands for “Scalable Vector Graphic”. It’s a graphics file format that uses a two-dimensional vector graphic format created by the W3C. Developed as the standard format for displaying vector graphics online, SVGs describe images using a text format based on XML.
SVGs support graphical elements including gradients, transparency, filters, and animations. They’re used extensively as icons, buttons, and other simple graphical elements. Because they can be scaled to different sizes without losing quality, they’re known as “resolution independent”.
SVGs can be compressed with GZIP compression. This results in an SVGZ file and is often 50 to 80 percent smaller than the original SVG file.
Image Formats Made Easy
The characteristics and use of image file formats vary widely. Now you know the definitions behind the most common image format terminology. You’re also up to speed on the most common file formats in use today.
Want to know the benefits of PDFs? Here’s why you should be using PDF instead of Word.