Picture is worth a thousand words
Print this article
Let's talk about graphics on the web pages. Thank graphics, in fact, WWW became most popular Internet service, and we have gazillion of variety of web pages.
What is specific in graphics
used on the web?
There are some limitations we should count on, and at the same time get advantage of them.
Two basic file formats GIF and JPG are recommended for use on the Web. Relatively new PNG format (pronounce "ping") is now advancing, but it is still not widely used and not all browsers understand it.
So, we start analysis of GIF and JPG formats, we’ll describe their basic properties and specifics.
- Supports no more than 256 colors (less is possible and often necessary);
- Uses a graphic pallet of colors;
- Uses compression without loss of an information by LZW method (which is similar to compression used in PKZIP archive and, therefore, GIF-files practically are not compressing);
- Is a streaming format, i.e. image begins show up during loading;
- Allows to assign transparent attribute to any color, which is used for creation so-called transparent GIF(s);
- Has ability saving in one file several images, which is used in creation of GIF-animation.
- Supports insertion of control blocks in the file, which allow inserting comments into the file (for example, about copyrights), assigning a delay between frames etc.
Some explanations about results of these properties. As you’ve read, GIF-format supports no more than 256 colors, and this means that images saved in a GIF-format explicitly or implicitly reduce an amount of colors to this limit (different programs with different success). Therefore, if your beautiful photo with smooth transitions and catching shades of colors has been converted to GIF-format, it could be humbled, and get unnatural and unrealistic view. So, if you want use GIF-format anyway, you should go tricky. For example, you can apply some filter, or convert image to drawing, or desaturate/colorize image. But there are no problems to save sketches and drawing in this format, they, as a rule, are well compressing and do not have many colors.
Consider now properties and specifics of the second most popular format on the Web.
- Allows saving images with 16.7 millions colors (or 24bpp). Drawings converted to this format become full-colored images.
- Uses compression with loss of information, at the expense of that reaches high degree of compression.
- Supports progressive development, i.e. an image occurs at first with bad quality which gradually improving.
Perhaps, that is all advantages of JPG format. Basic use of it is storing images with photographic quality.
All job of editing images do in intermediate format
After we can tell GIF format from JPEG, we'll consider some specifics of working with images. In spite of the fact that we save images in the GIF-file with support of 256 colors, or in the JPG-file with 16.7 millions colors, it is better to work with images in any intermediate format, which allows saving without distortion and loss of depth of the color (for example, TIFF, or specific for editors formats like PSD). The thing is that you need to alter and modify image many time to get a result, which, eventually, means multiple rewriting the file. For GIF format these brings loss of nuances, and for JPG format each new rewriting of the file introduces new distortion, and later photo could look awfully. Therefore editing an image file is better in intermediate format (it's OK to have huge file sizes), and only at the final stage convert the image to the necessary format (with optimization of the file size).
Optimization of images
Size of the image is very important for web-pages. What size of images is optimal? Whether they loading too long? Optimization reduces a file size, but scarcely it is necessary to optimize a photo with empty sense. The very first step of optimization is selecting of the principal part (with rejection of remaining) and focusing on the elements illustrating the contents. This is reached with the help of operations of cropping and identification of the most expressive part showing a sense of the image. After this, optimization can take place. And file size at this point really can be reduced to the least size.
There is some tradeoff with sizing of the images. Don't make them too small, when you can't see even with magnifier, and don't make them too large, not stretching loading time to eternity. Certainly, things happen, badly optimized small image can loaded to the end of the days, and right optimized large image can take time of loading equivalent to loading of a usual image. I understand a usual image with the size approximately 250x300 pixels and occupying memory about 6-10 kilobytes. It doesn't mean, your images should be of such size, but the image area is recommended as above. These recommendations concern images illustrating a text, and do not refer to images playing navigation functions.
In this article some basic aspects of applying graphics to web pages was discussed. In the next articles we look in different approaches of working with images and optimization.
<< Previous Article |
Next Article >>