One of the most important things to keep in mind when designing a website is image optimization; you need to use the right type of image for the right application. Digital images come in two different file types: vector and raster (also commonly known as bitmap). Vector images are made up of mathematically defined geometric shapes containing points (or “nodes”) that are connected by lines/curves by the computer, filling in the missing information. Raster images, on the other hand, are made up of thousands and thousands of tiny squares or dots that are assigned a specific color value. If you’re able to utilize these two types successfully, you could potentially save yourself a lot of time and money in the future.
So how do you know which graphic type to use? Below I’ve compiled a quick list of pros and cons of each type, followed by a succinct conclusion.
Vector Graphic Images
- Scalability: Because vector images are created mathematically the equation can be recalculated with no loss in data, allowing you to scale the image up or down without reduction in resolution.
- Conversion: You can very easily convert a vector image to a raster image, but not the other way around.
- File Sizes: Vector image sizes tend to be much smaller than raster images.
- Colors: It’s very easy to change colors with vectors without any damage to the image, making it very simple to edit.
- Limited Details/Effects: Vector images will never be as detail-rich as raster images, which means neat textures and effects that you can apply to raster images would be very hard to recreate in a vector image.
- Compatibility: Most vector file types are not universal, tending to be restricted to the program the file was created in (for example: image.ai; “.ai” is a file type only available in Adobe Illustrator).
Common vector files: SVG, AI, EPS, PDF
Raster (Bitmap) Graphic Images
- Rich Details: Since raster images are made up of pixels you can create lots of rich details in the image, much more than you could ever achieve with vector images, which makes raster images ideal for photographs.
- Effects/Textures: As a part of being capable of handling rich details, it’s much easier to add filters, effects, and textures to a raster images.
- Precise Editing: You can do very precise editing one dot at a time when you want to.
- File Sizes: Depending on resolution and file dimensions, raster images tend to output at a larger file size than vector images.
- Lack of Scalability: Unlike vector images, raster images do not scale up (and in some cases, down) very well. Raster images are resolution dependent, and when enlarged the image becomes blurry and loses a lot of details (as known as “pixellated”).
Common vector files: JPG/JPEG, GIF, PNG
Conclusion: Vector images are best for images that will regularly be scaled up and down, such as text and logos, while raster images are best for detail-rich images such as photographs or for digital publishing. A good way to look at this is to think of vector images as “source” files, and raster images as “output” files; for example, you could create a logo originally as a vector image and then output it as an appropriately-scaled raster image that can function for your website, merchandise, etc.