If you ever tried to save an image file in your life, you may have been meet with several options, like JPG, PNG, BMP, GIF, WebP, among countless others, having absolutely no idea what each of these mean or what's supposed to be the difference between them. In this article, we'll learn a little about these image formats, when you should use them, and when you should avoid them.
PNG: Safe and Huge
If you're in doubt and don't mind spending money buying new hard disks because you filled yours with PNG images, then saving everything as PNG is your choice.
PNG is an old lossless compressed image format that supports transparency. We'll understand what this means later.
JPG: Final Images and Photography
If you finished editing an image and you are 100% sure that you'll never edit or change it again, then JPG is your choice.
JPG is an old lossy compressed image format without transparency support.
GIF: Animated 8-Bit Graphics
GIF is a format that existed before PNG, and that PNG was meant to completely replace. It survived only because GIF supported animated images while PNG did not. There's almost no reason to use GIF nowadays, unless you're creating animated pixel art or something of sort.
GIF is a very old uncompressed 8-bit image format with single transparent color and animation support.
Note: nowadays, the term "GIF" on the Internet generally refers to a video format called WebM when it's a looped video, because GIFs could loop.
WebP: The new PNG and GIF
WebP is a new format that can do lossless compression better than PNG. It also supports lossy compression, but it's generally worse than JPG for photography. It's still decent for images containing text, such as screenshots, but it requires proper configurating the compression codec properly.
WebP is a new compressed lossy-or-lossless format with transparency and animation support.
BMP: No.
BMP is Windows format that you should NEVER use, because PNG is always better.
BMP is an uncompressed format.
Understanding Compression
For an image to be displayed on screen, it must be converted into a grid of tiny colored squares. These squares are called pixels. A single pixel stores its color data in the RGB format as a tuple of 3 bytes, one byte for each color channel (red, green, and blue). If it takes 3 bytes to encode a single pixel's data, it takes 3 kilobytes to encode 1000 pixels, and 3 megabytes to encode 1 megapixel. An image that is 1000 pixels of width by 1000 pixels of height has 1 million pixels (1 megapixel), and therefore should occupy 3 megabytes in memory, be it in RAM or in the GPU.
However, 3 megabytes is a lot for a single image. A typical screen has a resolution of 1600x900px, which is 1.44 megapixels. This means a single wallpaper would be 4.32 megabytes of memory. The typical photo taken by a camera has a resolution much greater than this. It's not unusual to have cameras that can take 12 megapixel images.
If this data was saved as a file as-is, it would lead to HUGE image files, and we would run out of space in our hard disks very quickly.
This is why you should never use BMP, because BMP is uncompressed. If you save a 1000x1000px fully white image as BMP, it will take 3 whole megabytes of hard disk storage. If you try this and you see it's less than 3 MB, that's because your MB stands for mebibyte (220 bytes), not megabyte (103 bytes). A 1024x1024px image would be exactly 3 mebibytes, plus some bytes that aren't for pixel data but for header data inside the file.
To solve this, almost all image formats are compressed.
This means that the pixel data goes through a compression algorithm that creates a piece of compressed data, which is smaller than the original data, and this compressed data is then saved as the file.
However, we still need the original pixel data to display the image, so whenever an image file has to be displayed on screen, a reverse, uncompression algorithm has to be executed, and the compressed data is uncompressed back into the original data.
Lossy vs. Lossless
Compression algorithms can be lossy or lossless.
Lossy compression means that part of the data is discarded when it's compressed. In this case, it would means some of the colors of the pixels will be different when you save a file compressed and then load it back again.
Lossy compression is a huge problem if you open a file and save it and then open it and save it again over and over, because each time you save the file the color of the pixels change, even if you didn't edit them. There's even a name for these changes in JPG compression: JPG artifacts.
For this reason, you should avoid saving images that you will edit later in lossy formats such JPG. Advanced image editors, such as Photoshop, GIMP, Krita, etc., have their own image file formats that saves your edits in a lossless manner. Use these formats when working with projects. Only export to JPG or lossy WebP the finished image that you don't plan to ever touch again.
Conversely, PNG is a lossless format. If you open and save, and open and save, and open and save, the same PNG file without editing it, it will remain the exactly same PNG file. No data is going to be lost.
PNG is typically used when you have an image that has transparency, mainly because JPG doesn't support transparency. It's also used for small icons and graphics because in these tiny images the color of each pixel is very important, and JPG could make the icons graphics look messy. Nowadays we have WebP, which can do lossy transparency, but because it's a newer format, it isn't as well-supported by applications as old formats like PNG and JPG.
A third situation occurs in formats that only support 8-bit color, such as GIF. GIF is lossless in the sense that if you open and save a GIF without editing, it will probably stay the same file (this may depend on your image editor). However, in order to save an image as GIF, you need to reduce the amount of colors for the typical 3 bytes (24 bits per pixel) to 8 bits per pixel, which means that the image's pixels can only have up to 256 different unique colors.
Leave a Reply