team3 logo

Battle of formats. Part 1

All cool layout designers when developing a website know how to choose image formats for their layout so that images are displayed without errors and have the optimal size when loaded.

The Team3.lv team has prepared a guide to formats for you to understand what images are and in what situations it is better to choose one format or another.

First, let's look at those related to raster graphics:

    1. GIF. (Graphics Interchange Format)

Animated web pictures. Emotional guy, this GIF. It helps to convey emotions and feelings much better than a picture or text. With one caveat: it is not suitable for storing full-color images and photos.

The GIF algorithm selects the 256 most used colors in the original image, and all other shades are created by selecting neighboring pixels in such a way that the human eye perceives them as the desired color.

    2. JPEG. (Joint Photographic Experts Group)

The first pictures of this format appeared in 1992. It can be used to save various photos, but if you need to send an image with text, then PNG is better.

Keep in mind, JPEG has one nasty trait: when you re-process a photo in this format, the image quality deteriorates.

    3. PNG. (Portable Network Graphics)

PNG is a relatively recent format that has been introduced as an alternative for GIFs. PNG allows you to compress the file without loss and allows you to save images that require special clarity. For example, drawings and printed text.

PNG is your best friend if you have:

    • images with transparency and translucency;

    • the need for increased accuracy of full color images;

    • images with sharp color transitions.

And that is not all. In the continuation of the article, you will find the rising star of WebP and the vector SVG format.