Meaning of Vector Assets in Modern Web Development
Regardless of parameters, we can easily divide types of graphics into raster and vector formats. Raster graphics are widely used and have a huge amount of formats. If we narrow down our search to W3C-approved formats, we have three popular raster formats - JPEG, GIF, and PNG. If you want to use the modern vector format - we only have SVG. And this is the format that I would like to focus on here.
Vector assets, what’s the big deal?
Vector graphics open up new opportunities for us if we want to create modern solutions for the customer. The first significant point is its size - the vector image usually takes less than its raster counterpart. By omitting edge cases of misuse of this format, we have a solution that reduces the amount of data needed to pass to the user.
The second is its resulting form - no raster means no fixed dimensions. The image is perfectly reproduced to any scale utilizing the maximum display capabilities (no resolution constraints or color palettes).
Third and equally important, but often overlooked aspect, is its interactivity. No more static visual content. An image can respond to user actions - clicking or hovering can change the presentation of individual elements of the image. These images can also be dynamic through the use of CSS styles and JS scripts.
What kind of graphic content should not be presented as vector graphics ?
Not every image can be written in a vector graphics format. Galleries or even advertising blocks are a good example. The images contained there are often obtained by image capture devices - eg digital cameras. Trying to reproduce them in vector format could significantly worsen their quality
Such image (often subjected to further processing) has a huge amount of details and a wide range of colors. It has to precisely reproduce the real world, which we observe every day. In this case, the best solution is to use the JPEG format that was created for this purpose.
Of course, there are other unusual situations where the use of raster images makes sense - for example, when creating a service for exchanging animated images - most often saved in GIF format.
Sometimes we also need an image with partial or full transparency and the most appropriate is PNG format. However, with a large amount of colors, DEFLATE compression produces much worse results, resulting in larger output file sizes. Also, in my opinion, modern web development should avoid such design solutions.
If not vector image then .... JPEG!
As mentioned above, the most viable alternative format (and the most appropriate one, in my opinion) is JPEG. This is a lossy format, based on DCT (discrete cosine transform) - similarly to MP3, asymptomatic information is removed as JPEG eliminates high frequencies from the image, significantly reducing its size without significant loss of quality. A very important thing here is a huge possibility of compression ratio adjustment, so that we can control both image quality and its size very accurately - depending on your needs.
The PNG format was the best choice, when it was popular to combine image (or several images) with dynamic content. Such images must have an additional fourth pixel value - also known as an alpha channel. Currently, such projects are fortunately quite rare nowadays. Combining complex art with text is certainly doesn’t improve clarity.
The fact that the perceived quality of the PNG image is higher than JPEG can also be omitted - the JPEG problem of edge noise (also known as the Gibbs effect) can be reduced by adjusting the degree of compression accordingly.
The last popular raster format, GIF, defends itself only by the ability to place animation - the limit of the color palette limited to 256 (even using indexed color palette) practically writes-off this option in conventional (not animated) usage compared to other ones.
Unfortunately my existing web project contains images only in raster format
An important point in creating a web based vector graphic project is to take care of these graphics every step of its creation - from the initial design to the finished code.
If you have only raster images, there is no such process that will convert all raster images into vector images in a fully automatic manner. The process of proper segmentation of a raster image is a complex process, and the difficulty of this vectorization and its proper conversion largely depends on the complexity of the input image.
That is why at Netguru we also pay attention to the first stage - designing. This is where vector assets are prepared, and later become an integral part of the project. This ensures that the graphics that are "designed" (rather than acquired by, for example, a digital camera) are always saved as a vector.
Keep in mind that if you use such images for other purposes, if they are saved in SVG format, then it is very easy to convert them to any raster format.
Conclusions
I’ve focused here on a few important issues regarding the selection and application of a suitable graphic format. The use of vector graphics in your project opens up new technological possibilities - from better visual experiences to enhanced interactive capabilities. Storing images in this format gives you an easy way to convert to any raster format (the reverse conversion is not as easy). It gives more deployment flexibility to the developer, as well as the a guarantee of support by all modern browsers (and some ancient ones too, eg IE9+).
