The image formats used on the Web

The 'image is certainly one of the types of data with which you are most often interact, particularly surfing the net. Almost all web pages are populated with multimedia content, including photos or logos, which contribute to embellish and in many cases also to enrich the message.

Even the least savvy among users, however, have no doubt noticed, for example, save an 'image from a web page, there is no single format for this type of data, but different.

To see this, it suffices to note carefully the 'same file extension (the initials after the "." In the name of the file, for example, the file has prova.jpg jpg), which is not unique. We are therefore faced with different ways to store a data type image, or to different encodings of the same data.

But what are the main codes used? What are the main features of each?

The BMP

The bmp format is not really one of the most used online, but is probably the most intuitive representation of a given type of image: so is still worthwhile to examine it, to better understand the other representations, more compact but also more complex .

An encoded image in bmp format can be likened to a chess board. Each box of size 1 pixel can be white or colored a certain color (usually expressed as a combination of red, green and blue, according to the standard RGB ).

The image is thus defined by points, in a way which is called the raster. The parameters that characterize the image are:

• Resolution, the number of pixels per unit area (usually the unit of reference is the thumb, then we speak of dots per inch, or dots per inch, DPI
• Color depth, measured by the number of bits dedicated to the building blocks of color, the number of colors available and therefore the quality of the nuances

The bmp format is very interesting images on which you wish to apply changes in contrast or brightness, or color filtering. Each point is indeed well-defined and filtering of this type can be calibrated to perfection.

Moreover, in all those cases where the size of the image is altered by subsequent amendments, as in the case of a zoom, you may need to create from scratch the points belonging to the new image, which did not exist in its previous version.

There are some techniques, such interpolation, specifically dedicated to this task, but the quality of an 'image. Bmp is in any case made ​​worse by such an operation.

Also not to be underestimated, especially in a context such as that of the Internet, which, in terms of disk space, encoding. Bmp requires a number of bits equal to three times the color depth multiplied by the number of pixels .

Images. Bmp files are therefore usually not suitable to be included on a web page, since it would slow the loading resulting in much inconvenience to users. There are alternatives that provide greater compression, for example. Jpg.

The JPG format

This is one of the most widely used for encoding data and image type. Immediately evident as the space occupied by a disk file. Jpg is far less compared to the same file format. Bmp. How do you implement this compression?

First of all type of jpg compression alters the original data. The colors deemed unnecessary are eliminated, leading to a reduction of the chromatic scale, the stronger the more the quality of the jpg file is set to a low value (this parameter is in fact at your own risk, while saving the file).

Of course, a greater reduction allows greater compression and thus a faster loading image when placed on a web page. But also witnessing a loss of quality due to the alteration of data. It is therefore a lossy technique (with loss of quality that makes it impossible to reconstruct the original data) and not a technical lossless (no loss of quality that makes it impossible to reconstruct the original data).

The visual effect is that of a lack of focus, all the more evident the decrease of the quality parameter. Considering the fact that this parameter can be set by the user, the encoding jpg is still often a compromise between image size on disk and pleasure.

• <<
• 1
• 2
• >>