100 points to know about...
Eco-Design Web Development

In a sustainable approach to your web design, it is important to consider image optimization.
In this post, we will discuss the main types of images.

Just like text, images are an integral part of a website. There are 2 types of images:

• Raster image, also called raster or bitmap image. "It is an image consisting of a matrix of colored points. It is a juxtaposition of points forming, as a whole, an image." Its size is characterized only as a printing size, it depends mainly on the technical and material display possibilities (pixel quality).

In the case where a raster image is intended to be printed, the notion of measurement is important.
Note that they are stored in a graphic format and the principal formats are BMP, GIF, PNG, JPEG, etc.

• A vector image "is a digital image composed of individual geometric objects, each defined by different attributes (shape, position, color, etc.) and to which different transformations can be applied."

In other words, they are stored as mathematical expressions before being translated into images on our screens. Its size is relative, as long as the image is in an environment adapted to its type, it adapts without losing quality.
On the other hand, if the environment is not adapted (printing, background, etc.), it will have to be transformed into a raster image. In this case, it is essential to establish a size and adjust its resolution.
Note that the main formats in which vector images are saved are Postscript, PDF, Illustrator, SVG, etc.

The main difference between these two types of images is that the vector format can be resized without losing the quality of the image, unlike the raster format.

Here is an example of what the two images look like: