Computers process and display images in two different ways than digital graphics: vector graphics and bitmap graphics.
They are made up of lines made up of mathematical equations. Each line is delimited by two points called nodes. Curved lines are called Bézier curves and get their shape thanks to small handles attached to the nodes. Vector graphics are very light, i.e. they weigh very few bytes. They are also resolution independent, i.e. they do not distort when you enlarge them. Unfortunately, the colors that a vector can represent are limited to fill color and outline color. We use them in texts, logos, drawings, CAD, designs for cutting by knife, laser or CNC.
Sometimes creating this type of graphics can be a bit cumbersome, as curves are created by pulling the handles of a magnetic shape. A practical way to create these curves is to imaginatively divide the vector into thirds and pull the handles to the height of the thirds.
Bitmap or raster graphics
This type of graphics is formed by a matrix of pixels. Each pixel can store a different color. Bitmap graphics are very heavy because they must store the color of each pixel of which it is formed. As they are made up of pixels they are limited to rectangular shapes and when they are enlarged the pixels start to become more visible. This causes the image to become pixelated and lose definition.
We can call color depth to the number of colors that can be created based on the number that can be represented in certain storage bits. This is because each pixel within raster images stores a color.
As bitmap images are very heavy it is necessary to reduce their size in bytes in order to be able to transfer them over the Internet more quickly as well as saving space. There are different compression algorithms that are extremely effective under certain conditions. Let’s look at them in detail.
JPEG or JPG (Joint Photographers Experts Group)
The JPG compression system uses an algorithm called Interpolation. This algorithm detects areas of similar colors and creates a matrix of pixels in which it takes the ends and eliminates the rest. When opening the image only the pixels marked as poles or ends are opened and the rest is calculated mathematically. This way you save a lot of space but you suffer a loss of quality. You can adjust the compression level by sacrificing quality to reduce the weight.
GIF (Graphics Interchange Format)
GIFs use a compression algorithm called Indexing. Indexing compares all the similar colors that exist in the image, then groups and mixes them giving a single color. In total you can make a maximum group of 256 colors. In this way it eliminates the color information saving space but losing quality. GIFs support transparency and multiple frames which allows them to simulate animation.
PNG(Portable Network Graphics)
The PNG format uses a compression system without loss of quality using a logical algorithm of pattern repetition. The PNG also allows you to store more complex metadata and high quality transparencies.
When should I use JPG, GIF or PNG?
Due to their characteristics, each algorithm works best on certain graphics. The first thing to take into consideration is the number of colors, a JPG can reproduce more than 16 million colors while the GIF only 256. So if we have a picture with many flowers and small details is ideal to choose JPG. If on the contrary our image is a graph of sales with ulgunas bars and a red arrow, to have few colors the ideal thing is to use GIF. Finally, if we want a graphic that has high quality and very clear transparency can use PNG even if the compression is not as effective. PNG is ideal for small icons.