Image Formats¶
If you’ve ever interacted with images, you know that there are several kinds of image files. At its core, an image file is a set of ones and zeros that the computer is able to interpret and display as an image.
There are two ways of storing image files, as a raster or as a vector.
Raster images are stored as individual pixels. The computer takes each pixel in the image, and represents it as a set of ones and zeros, and then stores that in a file.
These are called Raster Images, with origins from the Latin word “Rastrum” , translated to “rake”. We can imagine that the computer rakes across the screen to display each correct pixel from the image file. Raster images are also sometimes referred to as “Bitmap” Images.
RAW, JPG, JPEG, and PNG are all raster images, since we store each individual pixel.
RAW images are the simplest to understand, where we take each individual pixel and directly store its information as ones and zeros. Almost every other image type will try to use clever tricks to avoid having to store all the information. This is called image compression.
If the image is just a plain black background, a compression algorithm might just store a single pixel along with an instruction such as “This same pixel, 20,000 times”.
You may ask, what is the difference between JPG and JPEG? The answer: nothing. They are identical files. JPG exists because Windows had a limit of three characters on file endings. Today both are interchangeable, but .JPG is recommended.
You may already know that JPG’s are often smaller than PNG’s for the same image, this is because they use different compression algorithms.
JPG is called a “lossy” file format, because it takes the image and stores it in a way that is very efficient, but will lose some information.
The way JPG compresses images is optimised for images of people and natural landscapes, which is why text looks particularly terrible in JPG.
The JPG compression algorithm does this to text¶
PNG is a “lossless” file format, as every pixel in a png is perfectly preserved. In addition, PNG allows for transparency. If you need an icon to not have a white background, PNG is required over JPG.
This lossless compression, along with support for transparency, makes PNG files larger than JPG files.
SVG is the most popular vector file format. The way that SVG’s are stored are completely different to our raster image types, as we don’t actually store each pixel.
In vector files, the image is stored as a set of shapes and paths, using complex mathematical equations to represent each curve and line in the image.
The most amazing part of vector graphics, is that they can be displayed at any size, and don’t get blurry! When you zoom in on a JPG or PNG, you eventually see the pixels. This is not so with a vector graphic, as the computer can just keep zooming up the mathematical functions that represent the image.
An example of how a raster (left) image and a vector (right) image would look when blown up.¶
Sadly, vectors are not great for everything. Complex natural images are basically impossible to represent as a vector. As they have so many lines and curves, it would result in a file that wouldn’t look much like the original.
Vector graphics work best when there is a simple shape or icon, like starts, company logos, or illustrated pictures with simple shapes and colours.
Lastly, when you know that a picture will only be used as a very small image, such as an icon, PNG will often be smaller than the SVG. This is because no matter how large the image is displayed, the SVG will still need to store every mathematical equation.
On the other hand, the size of an image causes a PNG or JPG to require more or less pixels to store. This is why small icons often still use PNG, even though they could be easily represented as a vector.
So as a recap, when should you use each file-type?
JPG/JPEG:
Photos of the real world
Smallest file size
Terrible with text
File size scales with image size and image complexity
PNG:
Photos that need transparency
Photos of the real world
Bigger file size
File size scales with image size and image complexity
SVG:
Simple illustrations or icons
Terrible with real world photos
File size scales only with complexity of image
Tiny file size, even for displaying large pictures
Can zoom in without becoming blurry
For more in depth examples of the comparison between raster and vector graphics, take a look at the examples on this well made web site
https://vector-conversions.com/vectorizing/raster_vs_vector.html