Drawing hundreds of words is dearer to us
Now let’s talk about graphics on Web pages, because it is thanks to her that WWW has become the most popular Internet service, it is to her that we owe all this variety of pages.
What is special about the graphics used on web pages?
And the fact that it has its own specific limitations, with which we must reckon with and benefit from this.
For use on the Web, two main file formats are used – GIF and JPG. Now a new format for web graphics is being promoted under the name PNG (pronounced “ping”), but it is still not widespread, and not all browsers understand it, so we will not deal with this format yet.
So, let’s start the analysis of GIF and JPG formats, describe their main properties and features.
Supports no more than 256 colors (less is possible and often necessary :);
Uses a color picker;
It uses compression without loss of information according to the LZW method (which is similar to that used in the PKZIP archiver, and, therefore, GIF files are practically not compressed);
It is a stream format, i.e. display of the picture begins during 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 multiple images in one file, which finds its application in the manufacture of animated GIFs;
It supports the ability to insert control blocks into the file that allow you to insert comments into the file (for example, about copyright :), to delay the display of images, etc.
And now a little explanation – what these properties can lead to. As you read, GIF supports no more than 256 colors, which means that all the images that we save in GIF format explicitly or implicitly reduce the number of colors to fit this limit (different programs with different successes). And here comes the conclusion – if you have a beautiful photo with smooth transitions and subtle shades of color, then after the conversion everything will be much worse – the shades will cease to be elusive, and the whole photo will become unnatural, unrealistic. Therefore, if you still want to save the photo in GIF format and convey all the shades, then you have to go for tricks. For example, you can apply some kind of art filter to a photo and turn it into a drawing or apply toning. But there are no problems with saving drawings and drawings in this format, as a rule, they are well compressed and do not contain many colors.
Now consider the properties and features of the second most popular format on the network.
Allows you to save full-color images with 16.7 million colors (or 24bpp), and if the picture has fewer colors, it will still be converted to a full-color image before saving the file;
Uses compression with loss of information, due to which it reaches wild degrees of file compression;
Supports progressive scan, i.e. the image appears initially with poor quality, and gradually improves during the download process.
Perhaps these are all the advantages of the JPG format, and its main purpose is to store images of photographic quality.
Do all graphics processing work in an intermediate format
Well, we’ve figured out the formats, now let’s look at some features of working with graphics. Despite the fact that we save images in a GIF file with support for 256 colors or in a JPG file with 16.7 million colors, we need to work with the image in some intermediate format that allows you to save the picture without distortion and without loss of depth colors (for example, TIFF and internal formats of editors such as 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 overwriting of the file. Repeated recording in GIF format will cause the image to lose its tones, and in JPG format, each new rewriting of a file will introduce new distortions, and after a while the photo will look terrible. Therefore, do all the work on processing graphics in an intermediate format (and do not be confused by the huge file sizes) and only at the very last stage convert the image to the desired format (often – at the same time as optimizing the file size).
For web pages, the issue of photo size is very important. What size do they make? Will they take too long to load? With optimization, you can reduce the file size, but it is hardly worth optimizing 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 discarding everything else) and emphasis on the illustrated element. This is achieved using the framing operation and finding the most expressive part that conveys the meaning of the photograph. After this operation, it is already possible to optimize the image, in which case it will really have the smallest size.