It is believed that it was the ability to use graphics that led to the transformation of the World Wide Web from a purely technical and scientific tool into the most important component of modern pop culture. Nowadays, we can often observe that the complete absence of images on a Web site can simply turn visitors away (however, excessive overload of images affects the loading speed and leads to similar results).
Strictly speaking, HTML is not designed to store images. Instead, links to image files and possibly some formatting commands for them are placed in the HTML code. When downloading a file in HTML format, the browser reads links to graphic files, requests them from the Web server and displays them according to their location defined in the HTML code. However, in practice, images and text on a Web page are closely related to each other and are usually specially designed by designers to complement each other.
Microsoft FrontPage provides not only tools that allow you to access any method of placing graphic files on a Web page, but also tools for integrated image viewing, as well as (in a somewhat limited version) image editing tools.
Formats of graphic files
Most browsers can display graphic files in only two formats: Graphic Interchange Format (GIF) and Joint Photographic Expert Group (JPEG). Some browsers also support the Portable Network Graphics (PNG) format, a new format with many features. Information about the differences between different formats is given in the table. 4.
• Compression: lossy or lossless. Raster files must store information about each pixel of the image. However, simply recording the information for each pixel can make the file very large. That’s why most image file formats include compression tools: special mathematical algorithms that allow you to record image information using a smaller number of bytes. Usually, compression is done at the expense of repeating areas of the image.
GIF files use such a compression algorithm that no information about the image is lost. Thus, compression is performed without losses (lossless). Another compression mechanism is provided in the JPEG format. On the one hand, it provides various degrees of compression according to the author’s wishes, on the other – in many cases, after JPEG compression, it becomes impossible to return to the original file. Depending on the settings, the image may lose some information about the color palette, contours and contrast. This approach is called lossy compression. The greater the number of losses is permissible, the smaller the final size of the graphic file.
• Transparency. All graphics file formats require the use of rectangular images. At the same time, the height and width of the image in pixels can be any, but using ordinary means it is not possible to make the image round, oval or of any shape.
One of the possible ways to avoid using exclusively rectangular images is to use the same color as the background in the browser on the edges of the image. However, simply selecting the appropriate color may not work in some cases (for example, when the page uses background images or when the browser is configured to use its own color palette).
Therefore, the best solution is to assign the transparency property to one of the colors of the image. In this case, instead of this color, the browser will display what should be below it (usually the background).
An even stronger tool is to use the so-called alpha channel, which allows you to set up to 256 degrees of transparency.
• Animation. The GIF format allows you to save several images in the same file and adjust the time of each of them. This is the easiest way to use animation without installing additional software in the browsers of website visitors.
• Gamma. In different systems, there are different relationships between the brightness that is defined in the graphics file and how this brightness will be reproduced on the hardware level (in addition, this relationship is non-linear). To solve this problem, PNG files provide the ability to remember the gamma on one computer to reproduce it with maximum accuracy on other computers.
Most Web-designers use the GIF format for text, images created using lines and icons due to compression without loss of quality and the ability to use transparency. JPEG is used for background images, photos, and in all other cases where stronger compression and better color transfer are more important than contour accuracy.
The latest PNG (Portable Network Graphics) graphics file format provides full support for 32-bit color using an alpha channel, multiple compression methods, preservation of gamut information, and additional features that allow you to smooth out differences between different platforms. Unfortunately, the PNG format is not supported by all browsers. Also, PNG files are usually larger than GIF and JPEG images.
Remember that HTML files cannot actually contain graphics. Instead of graphic images, they store links to graphic files that are downloaded separately by the browser.
Additional features when working with images
The remaining part of the chapter will be devoted to some additional features that can be used when working with graphic files. You will need most of them when working with images using specialized programs.