In design, graphics are one of the most important aspects that define the design as a whole. It is very important to understand the graphics in your design as they would greatly affect the quality of the website/app you make.
There are two types of graphics, Vector & Raster. In this article, we’ll understand these two types and the best way to use them.
Raster Graphics:
- Made of ‘Pixels’
- Zoom in the graphic to the maximum and you’ll see the pixels (tiny colored squares)
- Raster graphics are in JPG, JPEG, PNG formats.
Vector Graphics:
- Made of ‘Paths’ (Mathematically, a composition of points, lines, and polygons)
- Zoom in or out as much as you can, it will never break.
- Vector graphics are in SVG (Scaleable Vector Graphics) format.
- These SVG graphics are in a human-readable XML format.
Pros & Cons:
1. RESOLUTION INDEPENDENCE:
Modern devices like smartphones have a very high pixel density, some being even more than 300 ppi. This is supposed to be the limit at which human eyes could determine the fine details. Here Vector graphics come to the rescue. VECTOR WINS!
2. SCALABILITY:
Vector graphics could be scaled in any dimension whereas raster images will visibly break after a limit. VECTOR WINS!
3. REUSABILITY:
Some properties of vector graphics could be modified & hence the same graphics could be reused in many ways. Properties like color and dimension are very easy to modify by using the vector graphics as fonts. There is no such feasibility with Raster graphics. VECTOR WINS! Here is a cool tutorial regarding ‘How to turn your vector icons into web font‘.
4. SIZE:
Raster graphics are much smaller in size as compared with Vector. That means, lighter & faster websites! RASTER WINS! (Though, the good news is that minification of vector graphics is also possible!)
When to use what:
- Use raster graphics if the probability of your website being used on a large screen is low.
- Photographs can be used in raster format only, so make sure that you have photographs in a very good resolution to the largest required dimension if required to be used in high-resolution devices.
- Use vector graphics when you need to reuse them. Like, in icons & logos.
- Illustrations could be used in vector, just make sure that they do not make your website heavy.
A Case Study:
I need to use a plus (+) icon 10 times on my website, all in different colors. So, instead of using 10 different colored raster icons, each of size 10kb, I would prefer using a single vector icon of size 50kb just by simply modifying the color of the icon wherever needed.
Not only did it make my website lighter, it saved the time of the graphic designer & is very easy to maintain!