How to open a png file. What is PNG

Moreover, being a free format, PNG offers various practical advantages over GIF for the web designer:
- Better compression: For most images, PNG achieves smaller size file than GIF
— Great color depth: PNG offers truecolor up to 48 bits, while in GIF we only have a 256 color palette
— Alpha channel transparency: Where GIF only offers binary transparency, PNG allows for virtually unlimited transparency effects by offering an alpha channel for transparency

It's worth noting that PNG doesn't allow for animation like GIF does. But there is a standard (MNG) that allows this, but it is not so widely supported by web browsers and graphic editors.

So why is GIF still so popular?

You're probably wondering why PNG isn't such a widely used format on the web if it's as good as advertised. The answer is, in large part, a misconception about the format and browser support for it.

Because of Internet Explorer 6 or more early versions do not support the full range of PNG features (including alpha channel transparency), people are left to believe (although this is incorrect) that Internet Explorer does not support PNG at all, or at least does not support transparency. In fact, Internet Explorer 5 and 6 support enough PNG specifications to make it functionally equivalent (or better) to non-animated GIF images. All other browsers mentioned, including Firefox, Netscape 6 and above, Mozilla, Opera 6 and above, Safari, and Camino fully support PNG transparency.

Apart from this misconception about browser support, GIF's built-in animation was (and continues to be) the main reason for its success. Although, over the years, the use of GIF has become less and less popular compared to other technologies (for example Flash), which are becoming more suitable for animation.

Transparency - key characteristic GIF and PNG, which is often the reason for a web designer's choice of format to use. Although PNG offers more comprehensive support for transparency, web designers often need to create a GIF version of images to fit older browsers. Using CSS this is possible (and somewhat trivial) by sending GIF images for older browsers and high-quality PNG images to browsers that understand them. But this is double work for a web designer and as a result, people follow the path of least resistance and continue to use GIF images.

So, we've looked at a few reasons why GIF is still so popular, but most of them are based on a misunderstanding of the concepts or using a familiar workflow. Armed with some key knowledge of PNG and how it can be used reliably in browsers, you can take advantage of all the benefits it has to offer.

What about JPEG?

JPEG is another ubiquitous web format and in most cases, such as photographs (and the like), it is even better than PNG or GIF. PNG is not intended to compete with JPEG. JPEG compression produces significantly smaller files than PNG when working with photos. On the other hand, PNG produces smaller files when there is text, artistic lines, logos, “flat” colors, etc. inside the images.

Some great examples of using the humble PNG

Now let's look at how to use PNG in web design. I have compiled all the files for each example in separate folder, available on (handyblogger: the original menu is there, but I didn’t find the source).

Gradient

Over the past few years, the gradient is smooth transition between two or more colors, became best friend web designers. Particularly popular are subtle, barely visible gradient fills, which without being conspicuous create a feeling of depth and texture.
Sometimes GIF is the best choice for a gradient. If the gradient is a simple two-color transition, GIF works flawlessly in it. However, GIF's limitation to only 256 colors often creates noticeable and sloppy "banding" among more complex gradient transitions. JPEG, on the other hand, can produce some pretty neat gradients, but often at the cost of bigger size file. While JPEG gradients are generally quite good, you need to remember that JPEG uses lossy compression, which means the resulting image will never live up to the quality of the uncompressed image.

The typical background gradient style in question is used for buttons, blocks or just anywhere else. It might look like Figure 5-1. Clockwise from the top left corner, we see the original (uncompressed) image, GIF version, PNG version and JPEG. You can see that the resulting PNG has smallest size(515 bytes). This is four times less than GIF image. JPEG is slightly larger than PNG at 637 bytes and is also lower in quality due to lossy compression (although the human eye is unable to detect the difference in quality in this simple example remains in question).

Figure 5-1
Photoshop's Save For Web panel showing the differences file size for the same image in various formats

An image that should work on any background

Sometimes you need to create an image that works the same on different substrates. Some general examples- this is a logo and icons. GIFs have traditionally dominated these situations, but there are several reasons why PNG may be more best choice in this situation. PNG usually wins in file size for logos or some other simple “art”. In addition, the inherent transparency of PNG makes simple creation single files that work on top of any background. PNG offers binary transparency like GIF, but also provides the much more desirable option of an alpha channel, in which pixels can be partially transparent instead of just being turned on or off. Using the latter increases the file size, sometimes even larger than a GIF with binary transparency, but it allows for anti-aliasing on the edges of your image and makes it more elegant to place it on top of the background.

However, I reworked their concept using white image with symbols - stencils. They used a white symbol on a transparent background, which could generally be quite effective. In this case, your background color The CSS would appear in a square or rectangular area around the symbol, instead of the symbol itself.

Both Dan and PJ used a transparent GIF instead of a PNG. This completely covered their needs, and they had to create pixel images to match the style of the icons. Using PNG, you can achieve a similar technique, but with some benefits in the form of anti-aliasing and partial transparency for use in more detailed icons.

Okay, but in which browsers does this work?

I know what you're thinking: all this PNG transparency looks good, but is it practical?

The good news is that everything modern browsers fully support PNG images, including alpha channel transparency, the benefits of which I showed in the examples. Safari (all versions), Firefox (all versions), Opera (versions 6 and above), Netscape (versions 6 and above), and Mozilla (all versions) will do everything I ask them to do. But there is one bad news - the only browser that I have not yet mentioned and which most of your users have: Internet Explorer.

Internet Explorer 6 and below does not support the alpha channel transparency built into the PNG format. Ever since the browser choice (or non-choice) was made for most of the many web surfers, this gaping hole has kept web designers away from PNG. But with the release of Internet Explorer 7 we got full alpha support PNG transparency in all significant browsers. What's next, are there any ways to work with PNG alpha transparency in Internet Explorer 6 and below? So if you want to use this effect, nothing will stop you. Internet Explorer 6 and its earlier versions require more attention than necessary, but it is definitely possible.

Hack for Internet Explorer: AlphaImageLoader

Internet Explorer comes with various native filters. They are used in CSS, but they are not any part of the official CSS specification. In other words, they are not standardized on the web. Unfortunately, Internet Explorer 6 and below do not fully support the PNG format (which is recommended by the W3C), Microsoft has a filter that eliminates this shortcoming: AlphaImageLoader.

Computer graphics have now filled everything around us, we even look at photographs more often on a monitor, phone or TV screen than on paper. But what’s most interesting is that the ways these images are stored are very different. There are dozens of image storage formats, each with its own advantages and disadvantages, but the most effective and popular of them remain those that provide best quality and, moreover, the file is small in size. One such format is the PNG format. What is this format and where did it come from?

Briefly about the very reason for the appearance of this image storage format...

On January 4, 1995, the idea of creating free format instead of a paid GIF, and already in December of the same year new format PNG was already ready and proposed for consideration. The GIF format at that time made it possible to obtain very small files that were convenient to use on websites. But the former free GIF unexpectedly became paid - the owner of the patent for it, the company Unisys Corporation, intended to charge money for each image that uses this format. This was the reason for the development of a free format called PNG - an abbreviation for the English expression “portable network graphics”. As the name implies, it is intended for use on the network, due to the small files, which allows pages with graphics to load faster.

What are the advantages and disadvantages of the PNG format compared to others, especially its main competitor, the GIF format? There are a lot of differences, but first things first...

IN PNG format it uses a compression algorithm called Deflate, which itself is freely distributed, that is, absolutely free. This algorithm works on the principle of a conventional archiver, effectively compressing information about color scheme each pixel, and it is this that allows you to get a fairly small file. In addition, in this format you can save full-color images, that is, those that use up to 48 bits per pixel - and this is a very large color gamut, even more than the human eye can perceive. The GIF format allows you to use only 256 colors and shades - enough for the simplest pictures, but very little for photographic quality.

PNG, GIF and TIFF formats use the so-called alpha channel. This means that you can make some parts of the picture transparent. At the same time, in the GIF format this is done very simply - just one of the colors to choose from is assigned transparent and when viewing the image it is simply not visible - this is how you can make a transparent background. The TIFF format is more thoughtful in this regard, but it is very rarely used - too big size files are obtained. But in the PNG format, the alpha channel is made wisely - not only is there transparency, but it also has 256 gradations of brightness. That is, you can easily make the transition from a completely transparent background to a full-color image, and at the same time get beautiful effects. It looks especially beautiful on websites. If transparency is not needed, you can simply not use it when saving the image and get an even smaller file.

Unfortunately, the PNG format has one drawback, not a very significant one - it does not allow saving a sequence of images, the so-called animation. GIF allows you to do this. This happened because at the time of the creation of the new format, animation was practically not used anywhere, and in 1995 there was no particular need for colorful websites, so animation was excluded from the project as unnecessary. Today the niche of animation has been occupied by Flash technology which is no ordinary graphic format not a competitor.

If the PNG format is so good, then why hasn't it become super popular? The answer is simple - it was poorly supported by the developers of other programs. Particularly influential was the fact that the majority of Internet users used Internet browser Explorer, but it didn’t “understand” images in PNG format, although the developers of other browsers immediately built such support into them. The situation improved only when Internet Explorer 7 appeared, but the time for “promotion” has long passed.

Today, the PNG format is one of the three most popular and recommended formats in web technologies, along with GIF and JPG formats. And, if you don’t consider the lack of animation as a disadvantage, then it wins in all respects compared to others. High quality image lossless quality, small file, smooth transitions to transparent background, and without violating anyone’s copyrights – what else does a website developer need to be happy?

One of the main tasks facing designers of new sites is fast loading browser pages. And since not all users like minimalistic design, we have to look for a compromise between beautiful design with elegant graphic elements and the speed of the web resource. Previously, in order to reduce the weight of images, website developers used either GIF or JPG. Nowadays, layout designers are increasingly using images in PNG format. Let's try to figure out together why this happens.

Why was the PNG format invented?

The abbreviation that is the name of this type of graphics is formed from the first letters of the following English words: portable network graphics, which can be translated as “movable graphics for use on the network.” The PNG format was specifically invented to eliminate the disadvantages of compression using the simpler GIF algorithm, which was slowly beginning to become obsolete. In addition, it can to some extent be used to replace the much bulkier TIFF, which is used mainly for editing.

What is the PNG format?

Today, two versions of this algorithm are widely used. In the first case, 8-bit is used, and in the second, 24-bit. Photos in PNG-8 format, compared to the GIF version, are slightly better and lack the ability to create animation. Although this image can contain a maximum of 256 colors, this algorithm Widely used to create graphic text, logos, illustrations with sharp edges and pictures with gradient transparency. In cases where this is clearly not enough, developers use the 24-bit PNG format, which has a lot of additional benefits, such as:

An improved compression algorithm that eliminates any quality loss.
The ability to use alpha transparency provides 256 different levels transparency.
The presence of gamma correction, which allows you to automatically adjust the brightness of the image when playing back in different programs.
Possibility of using about 16.7 million color shades.

All this together contributes to the use of PNG24 for compressing any images containing transparent areas, drawings with big amount colors and clear image boundaries.

Development trend

Despite the fact that the spread of the PNG format is still hampered by older browsers, as well as insufficient and incomplete support for the capabilities of this algorithm in new versions, PNG is very promising for web graphics. Compared to GIF, it has three main advantages: alpha channels, gamma correction, and 2D interlacing (a method of progressively displaying an image). And compared to JPEG, it has no quality loss. Note that the PNG format was invented on January 4, 1995. 18 years have passed since then, and it has become the leader in use on websites, pushing GIF into second place.

Most user applications (for example MS Paint) today have adopted it as the standard for saving files “by default”. Probably, if not for the animation and quirks of the old Internet versions Explorer, GIF would have given way to its competitor even earlier.

The PNG format is the youngest among popular web graphics formats; Therefore, it is not yet widespread enough. However, its capabilities suggest that software manufacturers and web developers will pay more attention to it in the future.

The abbreviation PNG stands for Portable Network Graphics.

In terms of its characteristics, this format is similar to GIF, which is not surprising - after all, PNG was developed as its alternative. PNG supports the following features:

storage of color images with a color depth of up to 48 bits (in GIF - up to 8 bits);
storage of monochrome images (up to 16 bits per pixel);
support for variable transparency - up to 256 gradations (in GIF format, each pixel is either transparent or not);
lossless image compression;
use of filtering to optimize compression (not available in GIF);
the ability to display interlaced images on the screen;
built-in data transmission error detection tools (not available in GIF);
color correction tools (not available in GIF);
saving a small copy of the image.

Unlike GIF, the PNG format is free to use. This means that his support is software can be entered without paying any licenses. To compress an image in the PNG format, the LZ78 algorithm is used - the predecessor of the LZW used in the GIF format. The disadvantages of PNG compared to GIF include the inability to save multiple images in one file and create animations.

A file saved in the PNG format has a block structure, which makes it similar to the TIFF format. Any program that supports standard format PNG, should work with four types of blocks:

The header block contains the main parameters of the image. A file cannot have more than one header;
The palette block defines the palette of colors used in the image. This block is used only if a palette is needed (the image is saved in indexed color mode);
the image block contains image data;
The image end block closes the PNG file.

In addition to these blocks, the file may contain additional data, such as information about the author, text comments (including compressed ones), information about contrast and gamma correction, information about transparency (alpha channel), etc. When introducing new features, you can easy to add to file new block. At the same time, old programs simply “will not pay attention to it.” This provides possibility of easy format extensions.

The image itself can be saved in various modes. For example, Adobe PhotoShop supports RGB modes(16 million colors), grayscale (256 gradations) and indexed colors (256 colors).
The transparency of the image is stored as an alpha channel, allowing you to display up to 256 gradations of transparency. This allows for a smooth transition from the image to the background and avoids the appearance of a “halo” at the transparency border. In Fig. 2.9 shows an example of such an overlay. On the left is the original image, in the center is the background, on the right is the result.

Rice. 2.9.The result of overlaying an image with a smooth change in transparency onto the background

In Fig. Figure 2.10 shows the result of overlaying an image saved in GIF format on the same background.

Rice. 2.10.Overlaying an image with two transparency values on the background (either it is there or it is not)

NOTE.Browsers have not yet implemented the display of smoothly changing transparency.

When saving images in PNG format, you can use interlaced images and various filters to optimize compression. The interlaced image is not displayed line by line (as when reading the GIF format), but in rectangular blocks (first 8x8 blocks, then 4x8, 4x4, 2x4, 2x2, 1x2). Is this algorithm named Adam after its inventor? Unfortunately, not all browsers correctly handle the capabilities of this format. In Fig. Figure 2.11 shows how PNG files are displayed by Internet Explorer.

Filters allow you to prepare data (optimize it) and thereby increase the compression ratio. Filtering is applied to the color component bytes of pixels line by line. You can apply your own algorithm to each line or not apply it at all. There are several types of filters:

Rice. 2.11.Displaying a page with images in PNG format during the loading process

Sub determines the difference between the byte value for the current pixel and the same value for the previous pixel;
Up determines the difference between the byte value for the current pixel and the same value for the previous pixel;
Average - the value for the current pixel is predicted based on the average value obtained for the pixels located to the left and above the current one;
Paeth - value predicted based on value linear function, obtained from the values of the left, top and left top pixels.

In some cases, filtering can reduce file sizes, but the filtering method must be selected individually for each image.

Except various algorithms filtering, built-in color correction tools can be applied to the image. For PNG, this is a gamma correction indicator (allows you to adjust colors according to the brightness of the monitor), contrast information, as well as information about primary colors and the “white point”. Basic colors and white dot are specified by coordinates in standard color space. All these options can improve the quality of the image displayed on the user's computer.

We looked at the characteristics of the PNG format. In order to get a complete picture of its scope of application, we will conduct testing. In Fig. 2.12 shows three test pictures. Figure 2.13a is an example of a drawing consisting of clear lines (diagram or drawing). Figure 2.13, b - photograph containing a large area with a smooth color change (sky). Figure 2.13, c - photograph with a large number of small details. Source file sizes in TIFF format: from 127 to 129 KB.


A

b	V

Rice. 2.12.Test images to compare the capabilities of GIF, JPEG and PNG formats

To compare the capabilities of different formats, let's save all these images in GIF files, PNG and JPEG. IN in this case were used GIF formats and PNG in normal and interlaced mode, and in JPEG format the pictures were saved with a quality score (according to the Adobe PhotoShop scale) of 7. At the same time, slight noise was observed in all images (especially at the boundaries of objects). Let's compare the sizes of the resulting files.

Table 2.1.File sizes obtained after saving test images in various formats, KB

This table allows you to judge the optimal scope of application of each format. As you can see, the GIF and PNG formats provide a clear advantage when saving pictures with a small number of colors and large monochromatic areas (schemes, diagrams). Moreover, GIF provides slightly better compression. Since the compression algorithms used in these formats do not introduce noise into the image, there is no fear that fine details of the circuit will be lost or distorted. Interlaced images, although more visual to the user, take up more space than non-interlaced images. To save full color images the best way JPEG format is suitable. Although it introduces some distortions into the drawing, by selecting the compression level you can reduce them to an acceptable level. Files of this format are in this case the smallest size for all images except the diagram. When saving similar images, GIF and PNG showed the best results.

We will also compare the effectiveness of various filters used in the PNG format.

The filters were tested using examples of a diagram (Fig. 2.13, a) and a photograph with small details (Fig. 2.13, c). For the scheme, the use of filters did not result in a gain in file size and, on the contrary, caused an increase in file size by 0.5-1 KB. At the same time, for photography, the “filtered” files turned out to be smaller than the “unfiltered” ones. For images with 16 million colors, the gain was about 10%. At the same time, images with 256 colors practically did not react to the application of the filter.

Concluding the conversation about the PNG format, we can say that although it contains great opportunities, most of them are currently are not implemented in browsers. This hinders the growth of its popularity. After the introduction of its full support, this format can take its rightful place among the “tools” of a web designer.