Images in web design

In today's article we will look at what exactly are the 3 main image formats - jpeg , png and gif , as well as what are their advantages and disadvantages.

What image format to choose?

JPEG (JPG)

JPEG images are full-color images that allocate at least 24 bits of memory for each pixel, resulting in an image that incorporates 16.8 million colors. JPEG images retain all the color information, but compress the file size by selectively discarding certain data - this compression can lead to a drop in quality. However, most design programs have options for choosing the degree of compression. If you choose the highest quality option, your image will not differ from the original. This, of course, will affect the file size.

Pros

• 24-bit color;

• excellent choice for photographs;

• Excellent selection for images with more than 256 colors.

Cons

• lose information;

• after compression, artifacts can be obtained;

• cannot be animated;

• cannot be made transparent;

• are not suitable for creating images with text;

• Not suitable for sharp-edged images.

PNG

The PNG format offers a full range of color depths, transparency and excellent color mixing . Text can be easily added to PNG images.

Pros

• when compressed, the files do not lose quality;

• the files are smaller than JPEG files;

• possibility to add a "transparency" effect;

• excellent choice for creating images with text;

• excellent choice for recording the logo.

Cons

• not suitable for larger images;

• cannot be animated;

• Not supported by all browsers.

There are two types of PNG formats: PNG-8 and PNG-24. The first is very similar to the GIF format in that it can be saved with a maximum of 256 colors. The second format can display millions of colors, but of course the file size is larger.

PNG images can also be used for large background images without the jagged effect.

Photos in PNG format are larger than photos in JPEG format because they do not lose quality when compressed.

GIF

GIF images can display a maximum of 256 colors , so they are extremely suitable for simpler illustrations and color combinations (logos, icons), but are not particularly suitable for photographs.

Pros

• can be transparent;

• can be animated;

• suitable for images with fewer colors;

• suitable for images with text;

• do not lose quality when compressed.

Cons

• support only 256 colors;

• the file size can be quite large;

• not suitable for photographs.

Transparency is not optional. If you tell a color to be transparent, it will become transparent wherever it appears in the image.

Image size

Images have two sizes - physical size and file size .

The physical size of the image is what we need to determine how much space the image will take up on the web page. This size should be consistent with the design so that the images "stand" well.

The size of the file determines the loading time of the page - ie. the larger the file size, the slower your page will load. As a rule, high-resolution images should be between 60K and 100K in file size. Smaller images should be around 30K.