A picture worth a thousand words

Now let’s talk about the schedule on the Web-pages, because it is thanks to her WWW has become the most popular Internet service, it is to her that we owe all this variety of pages.

What is special about graphics used on web pages?
And that it has certain restrictions with which we have to reckon and benefit from it.

Two main file formats are used for Web use – GIF and JPG. Now a new format for web graphics called PNG (pronounced “ping”) is being promoted, but it is still not widespread, and not all browsers understand it, so we will not deal with this format yet.

So, let’s proceed to the analysis of GIF and JPG formats, describe their main properties and features.

GIF
Supports no more than 256 colors (less can and often need :);
Uses a color palette;
Uses lossless compression using the LZW method (which is similar to the one used in the PKZIP archiver, and therefore GIF files are practically not compressed);
Supports interlaced;
It is a stream format, i.e. the display of the image begins during the pumping;
Allows you to assign a transparent attribute to one of the colors in the palette, which is used when creating so-called transparent Gifs;
It has the ability to save several images in one file, which is used in the manufacture of animated Gifs;
Supports the ability to insert control blocks into the file, which allow you to insert comments into the file (for example, about copyright:), to delay between displays of images, etc.
And now a little clarification – what these properties can lead to. As you read, GIF supports no more than 256 colors, which means that all the images we save in GIF format explicitly or implicitly reduce the number of colors to meet this limit (different programs with different success). And hence the conclusion-if You have a beautiful photo with smooth transitions and subtle shades of color, then after the transformation everything will be much worse – the shades will cease to be elusive, and the whole photo will acquire an unnatural, unrealistic look. Therefore, if You want to still save the photo in GIF format and convey all the shades, you have to go for tricks. For example, you can apply an art filter to a photo and turn it into a drawing or apply a toning. But there is no problem with saving drawings and drawings in this format, they are usually well compressed and do not contain many colors.

And now consider the properties and features of the second most popular format in the network.

JPEG format
Allows you to save full-color images with the number of colors 16.7 million colors (or 24bpp), and if the figure has fewer colors, before saving the file, it is still converted to a full-color image;
It uses lossy compression, thereby achieving a wild degree of file compression;
Supports progressive scan, i.e. the image appears at the beginning with poor quality, and gradually improves during the loading process.
Perhaps this is all the advantages of the JPG format, and its main purpose is to store images of photographic quality.

Do all the work on graphics processing in an intermediate format

Well, with the formats sorted out, now consider some of the features of working with graphics. Despite the fact that we keep the image a GIF file with 256 colors or JPG-file with 16.7 million colors to work with the image in some intermediate format that allows you to save the image without distortion and no loss of colour depth (e.g. TIFF internal formats editors type PSD). The fact is that in the process You will need to repeatedly change or distort the image, which, in the end, leads to multiple overwrites of the file. Multiple recording in GIF format will cause the image shades to be lost, and in JPG format-each new overwrite of the file will introduce new distortions, and after a while the photo will look terrible. Therefore, do all the work on graphics processing in an intermediate format (and do not be embarrassed by the huge file sizes) and only at the last stage convert the image to the desired format (often – at the same time as optimizing the file size).

Optimization of graphics
For web pages, the question of photo size is very important. What size should I make them? Won’t they take too long to load? Optimization can reduce the file size, but it is hardly necessary to optimize a photo that does not carry a semantic load. The very first stage of optimization is the selection of the main thing in the photo (with the rejection of everything else) and the emphasis on the illustrated element. This is achieved by cropping and finding the most expressive part that conveys the meaning of the photo. After this operation, you can already optimize the image, and in this case it will really have the smallest size.

And with the photo sizes need to adhere to a compromise – don’t make them too small, which even under a magnifying glass nothing make out, and don’t make them too huge, that time is not stretched to eternity. Although, of course, there are exceptions: properly optimized large photo may take time to send, equivalent to the time of sending a normal photo and, conversely, poorly optimized small picture will be loaded until the end of days. Under ordinary photo I know the photo size approximately 250×300 pixels and takes about 6-10 kilobytes. This does not mean that All your photos should be of this size, but the area of the photo should be equivalent to it. These guidelines apply to photos that” illustrate ” text and do not apply to drawings that serve as navigation elements.

This article provides some basic information about using graphics on web pages. And in the following articles I will describe various aspects of graphics manufacturing and optimization.