With the overabundance of image extension types, it’s no surprise that many people feel confused and overwhelmed when trying to decide which image is the best to include on their website (or elsewhere online). The easiest way to keep them organized, however, is to keep in mind that all image types fall under the categories of vector or raster. In this guide, we’ll be defining the difference between vector and raster images, along with scenarios of when each is and isn’t appropriate for use.
What are raster images?
Raster images (also commonly referred to as Bitmap images) are definitely the most common type of image you’ll be coming across online. Images taken with cameras and just about every digitally generated image will be raster, and for simple reason. Raster images are generated using pixels with specific dimensions; in turn, this means that most commonly used image viewers can only see these files, as they can only register images using pixels to render their visuals.
The list of raster image extensions includes:
- JPEG/JPG
- PNG
- GIF
- TIFF/TIF
- BMP
- HEIF
What are vector images?
Vector images are less commonly encountered, and this is due to the way in which they’re rendered. Rather than saving images with pixels, vector images are generated using percentages and values; this means that no matter how far into the image you zoom, you will always see a smooth and uncompressed visual. Whereas with rasters you can begin to count the pixels and individual shades of colors, Vectors are designed to be perpetually smooth, allowing for a literally infinite zoom without ever being able to note a single pixel.
The list of vector image extensions includes:
- SVG
- AI
- CDR
- EPS
- WMF
- EMF
When Should You Use Them?
More often than not, you’re going to want raster images as they can be loaded by more browsers and programs, and thus can be seen by more people. However, there are times where the almost impossibly smooth visuals of a vector may be preferred. The best and most practical use for vector images is for logos and other assets that will need repeated use at different sizes. For example: if you want your brand’s logo to be large on your Home page but small on your Contact page, storing it as a SVG (or other vector) image is more practical because it can have the same quality on both pages, whereas the raster version would look very choppy on the Home page and possibly too compressed on the Contact page. Conversely, vectors aren’t very good for complex images with a lot going on, which is why images like media embeds in articles or thumbnails for blog posts should be in a raster file type like PNG instead. Hopefully with this guide you’ve been able to learn the difference between all these different files and when it’s best to use them.