What is PNG? Image formats SVG, PNG and JPG: pros and cons program to work with PNG in Mac, Linux and mobile devices
PNG image format is one of the most popular and offers users to store compressed pictures without losing their quality. Most PNG is used to edit graphics or on the Internet. Next, we look at a few simple ways, thanks to which you can open the file of this format on your computer.
There are several different methods that allow you to open PNG format files for viewing and editing. It is enough for you to follow the instructions provided below, and open the image will not be difficult.
Method 1: Programs for viewing images
On the Internet, there are many graphic editors and special software to view and edit images. They provide users with a large number of functions and tools, which makes the process of working with pictures as comfortable as possible. Consider the process of opening the PNG image on the example of the GIMP program:
If Gimp does not suit you for any reason, we suggest familiarizing yourself with the full list of programs for viewing images in our article by reference below. There you will definitely find something suitable.
In the case when you want to make various open image manipulations, use special graphic editors with extended functionality and the presence of a large number of different tools. More details with them you can find in our article by reference below.
Method 2: Standard Windows
All versions of the Windows operating system there is a built-in program for viewing images. With it, the PNG format files are also being opened. Let us consider in more detail this process:
If you need all PNG images to be opened through the standard Windows Photo Viewer, follow these steps:
Now by default, all PNG files will be opened using a standard photo viewer. To change the program to open, simply perform the same actions by selecting another software.
In this article, we examined in detail simple ways of opening PNG format pictures. As you can see, there is nothing complicated in this process, and everything is performed literally for several actions.
Computer graphics now flooded everything around, even the photos we look more often on the monitor screen, phone or TV than on paper. But what is the most interesting - methods for storing these images are very different. There are dozens of image storage formats, each with their advantages and disadvantages, but the most effective and popular of them remain those that give the best quality and moreover a file is obtained by a small volume. One of these formats is PNG format. What is this format and where did he come from?
Briefly about the very reason for the appearance of this image storage format ...
On January 4, 1995, the idea of \u200b\u200bcreating a free format was made instead of paid GIF-A, and in December of the same year, the new PNG format was already ready and proposed for consideration. The GIF format at that time allowed to receive very small files that were convenient to use on sites. But the former free GIF unexpectedly became paid - the owner of the patent for him, the company "Unisys Corporation", was removed to take money for each image that this format uses. This was the reason for the development of a free format, which was called PNG - Abbreviation from the English expression "Portable Network Graphics". As can be seen from the name, it is intended for use in the network, due to the files of a small volume, which allows you to quickly download pages with graphics.
What advantages and disadvantages have a PNG format compared to others, especially with its main competitor, GIF format? There are a lot of differences, but about everything in order ...
In PNG format, a compression algorithm called Deflate, which in itself is freely distributed, that is, absolutely free. This algorithm works on the principle of a conventional archiver, effectively compressing information about the color scheme of each pixel, and it is it that allows you to get a rather small file. In addition, in this format, you can save full-color images, that is, those in which up to 48 bits for each pixel are used - and this is a very large color scheme, even more than perceiving the human eye. The GIF format also allows you to use only 256 colors and shades - enough for the simplest pictures, but very little for photographic quality.
In PNG, GIF and TIFF formats, the so-called alpha channel is used. This means that you can make some sections of the picture transparent. At the same time, in GIF format, this is done very simple - just one of the colors to the selection is assigned transparent and when viewing the image it is simply not visible - you can make a transparent background. TIFF format is more thought out in this regard, but it is very rarely used - too large file size is obtained. But in the PNG format Alpha - the canal is made with the mind - there is no transparency there, but 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 to get beautiful effects. Especially beautiful it looks on sites. If the transparency is not needed, you can simply not use it when you save the picture and get the file for a smaller volume.
Unfortunately, the PNG format has one drawback, not very significant - it does not allow you to save the sequence of images, the so-called animation. GIF allows you to do it. It happened because at the time of the creation of a new format, the animation was not used almost anywhere, and there was no special need for the colorful sites in 1995, so the animation was excluded from the project as unnecessary. Today, the animation niche occupied Flash technology, which no ordinary graphic format is a competitor.
If the PNG format is so good, then why didn't he become superpopular? The answer is simple - his weakly supported the developers of other programs. It was especially influenced by the majority of Internet users used the Internet Explorer browser, and I didn't understand the images in PNG format, although the developers of other browsers immediately embed such support in them. The situation was corrected only when Internet Explorer 7 appeared, but the time of "promotion" has long passed.
Today, PNG format is included in the top three most popular and recommended formats in web technologies, along with GIF and JPG formats. And, unless the lack of animation is disadvantaged, he wins all parameters compared to others. A high-quality image without quality loss, a small file, smooth transitions to a transparent background, and even without a violation of someone's copyright - what else is needed for happiness to the site developer?
PNG (Portable Network Graphics) is pronounced as "ping" - raster graphic information storage format using compression without loss. PNG was created both to improve and replace the GIF format with a graphic format that does not require a license to use. PNG is an international standard (ISO IEC 15948: 2003) and officially recommended W3C.
PNG format stores graphic information in a compressed form. And this compression is made without "losses", in contrast, for example, from standard JPEG (even with the highest possible level of quality).
PNG format is designed to replace outdated and simpler GIF format, as well as to some extent, to replace a significantly more complex TIFF format.
If we are talking about web design, then compared to GIF, it has the following main advantages:
Improved compression: In most cases, the size of the PNG image is less similar in GIF format.
- More colors in the image: a practically unlimited number of colors in the image, while the limit for the GIF is equal to 256.
- Optional Alpha Channel Support: While GIF supports only binary transparency, PGN allows you to achieve an unlimited number of transparency effects by supporting the alpha channel.
As a lack, it is of course noted the lack of support for animation, like GIF. Although of course for animation and there is a similar standard called Multiple-Image Network Graphics (MNG), but it is not widely widespread and, accordingly, is not supported by massively modern browsers.
Moreover, being a free PNG format offers various practical advantages over the GIF web designer:
- Best compression: For most PNG images, it reaches a smaller file size than GIF
- Big color depth: PNG offers TrueColor up to 48 bits when we have only 256 color palette in GIF
- Transparency Alpha Channel: When GIF offers only binary transparency, PNG allows almost unlimited transparency effects, offering for the transparency of alpha channel
It is appropriate to notice that PNG does not allow to make an animation how it makes GIF. But there is a MultiPle-Image Network Graphics (MNG) standard, which allows, but it is not so widely supported by web browsers and graphic editors.
So, why is the GIF is still so popular?
You are probably surprised why PNG is not as widely used in the web format, if it is so good how it is advertised. The answer, for the most part, is the wrong idea of \u200b\u200bthe format and its support to browsers.
Due to the fact that Internet Explorer 6 and earlier versions do not support the full range of PNG capabilities (including alpha channel transparency) people remains to believe (although it is wrong) that Internet Explorer does not support PNG at all or at least does not support transparency. In reality, Internet Explorer 5 and 6 support enough PNG specifications, making it functionally equivalent (or more) untouched GIF images. All other reference browsers, including Firefox, Netscape 6 and above, Mozilla, Opera 6 and above, Safari, and Camino fully support PNG transparency.
In addition to this incorrect concept on the support of the browser, built into the GIF animation was (and continues to be) the main reason for its success. Although, in a few years, the use of GIF is becoming less popular compared to other technologies (for example Flash), which become more suitable for animation.
Transparency is the key characteristic of GIF and PNG, which is often the cause of the selection of the used web designer format. Although PNG offers more comprehensive transparency support, web designers often need to create a GIF version of images for fitting to old browsers. Using CSS it is possible (and partly trite), through sending GIF images for old browsers and high-quality PNG into browsers who understand them. But this is a double work for web designer and as a result, people go along smaller resistance and continue to use GIF images.
So, we reviewed several reasons why GIF is still so popular, but most of them are based on misunderstanding concepts or using the usual work scenario. Armed with some key knowledge in working with PNG and how it can be securely used in browsers, you are given the opportunity to take advantage of all the advantages that it offers.
And what about jpeg?
JPEG is another ubiquitable web format and in most cases, such as photos (or others with them), it is even better than PNG or GIF. PNG is not designed to compete with JPEG. JPEG compression makes significantly smaller files than PNG when working with photos. On the other hand, PNG produces smaller files when inside images there are text, art lines, logo, "smooth" colors, etc.
Some wonderful examples of using modest PNG
Now let's look at how to use PNG in web design. I gathered all the files for each example in a separate folder available on Friends of ED.
Gradient
Over the past few years, the gradient is a smooth transition between two or more colors, has become the best web designers. The sophisticated, barely distinguishable gradient fills, which not rushing to the eyes create a feeling of depth and texture.
Sometimes GIF is the best choice for the gradient. If the gradient is a simple two-color transition, GIF works in it perfectly. However, the limitations of GIF is only 256 colors often creates a noticeable and sloppy "stripping" among more complex gradient transitions. JPEG, on the other hand, can output rather spicy gradients, but often cost more file. And while JPEG gradients are usually good enough, you need to remember that JPEG uses a loss compression that means that the resulting image will never reach the quality of the uncompressed picture.
The typical style of the background gradient is used for buttons, blocks or just somewhere else. It may look like in Figure 5-1. Clockwise, from the upper left corner, we see the original (uncompressed) image, GIF version, PNG version and JPEG. You see that PNG as a result has the smallest size (515 bytes). This is four times less than the GIF image. JPEG a little more than PNG at 637 bytes and it is also lower than the quality due to the compression with losses (the truth is the possibility of a human eye to determine the difference in the quality of this simple example in question).
Figure 5-1
PHOTOSHOPA PANEL - SAVE FOR WEB,
Showing file differences for the same image in various formats
An image that should work on any background
Sometimes it is necessary to create an image that works equally on different substrates. Some common examples are logo and icons. In such situations, GIF files traditionally dominated, but there are several reasons why PNG can be a better choice in this situation. PNG, as a rule, wins in the size of the file for logos or any other simple "art." In addition, congenital PNG transparency makes simple creation of single files that work on top of any background. PNG offers binary transparency as in GIF, but also provides a much more desirable version with an alpha channel, in which pixels can be partially transparent, instead of being simply included or turned off. The use of the latter increases the size of the file, sometimes even more than GIF with binary transparency, but it allows you to make smoothing on the borders of your image and make it more elegant its placement on top of the background.
However, I processed their concept using a white image with stencil symbols. They used a white symbol on a transparent background, which, as a rule, could be quite effective. In this case, your CSS background color would have manifested itself in a square or rectangular area around the symbol, instead of the symbol itself.
And Dan and PJ used transparent GIF instead of PNG. It completely covered their needs, and under the style of the icons they had to create pixel images. Using PNG, you can receive a similar technique, but with some superiority of antiasing and partial transparency for use in more detailed icons.
Well, but in what browsers does it work?
I know what you think: all this PNG transparency looks good, but is it practical?
The good news is that all modern browsers fully support PNG images, including alpha channel transparency, the advantages of which I showed in the examples. Safari (all versions), Firefox (all versions), Opera (version 6 and above), Netscape (version 6 and above), and Mozilla (all versions) will be with a bang to work out all that I will ask them. But there is one bad news - the only browser that I have not yet mentioned and which has most of your users: Internet Explorer.
Internet Explorer 6 and below does not support the transparency of Alpha Channel embedded in PNG format. Since the most numerous web surfers has been made (or not a choice) browser, this gaping hole contained web designers away from PNG. But, with Internet Explorer 7, we received full support for the Alpha transparency of PNG in all significant browsers. What's next, are there ways to work with alpha transparency PNG in Internet Explorer 6 and below? So, if you want to use this effect, nothing will stop you. Internet Explorer 6 and its early versions require more than necessary, attention, but it is definitely possible.
Hack for Internet Explorer: AlphaimageLoader
Internet Explorer has various own filters. They are used in CSS, but they are not any part of the official CSS specification. In other words, they are not standardized in the web. Unfortunately, Internet Explorer 6 and below do not fully support the PNG format (which is recommended by W3C), Microsoft "and there is a filter that eliminates this deficiency: AlphaimageLoader.
In accordance with the section on the official website of Microsoft, AlphaimageLoader, "displays the image within the boundaries of the object and between the object of the object and its contents." In other words, AlphaimageLoader loads the PNG image with its full transparency, but it loads it as its own layer, the content of the object is located on which it is applied. PNG images loaded in such a way act more as background images than image foreground images (although they are in reality "sit" from above the background of the object).
In general, you can simply apply AlphaimageLoader in CSS on IMG elements and enjoy the result. At first, the image will be downloaded, transparency remains, but then the image will be loaded again - as the front content of the object - with opaque areas (thus "shades" your transparent version).
You cannot use a transparent PNG as a CSS background image for (x) HTML element (let's say for
Real use alphaimageloader
Let's go back to one of the earliest examples and try to load it correctly in Internet Explorer. Remember Channel 49, TV Station in Topeka? I am sure - yes. Figure 5-21 shows what the site looks like in Internet Explorer 6.
Figure 5-21
Header 49Abcnews.com, derived in Internet Explorer 6 for Windows, with untouched PNG transparency.
HTML for the upper part associated with the weather, looks like you may already suggested:
Currently in Topeka, KS:
82 ° OVERCAST.
Get the forecast and more ...
You see the image, and certainly it is PNG, even Internet Explorer loads it impeccably. The secret ingredient of this is JavaScript. In fact, I used a bit of sripting DOM in order to remove the IMG element on the fly and replace it with a DIV element, which you guessed - uses AlphaimageLoader. JavaScript is described inside the conditional comments, the other submitted, but completely unstanding idiom from Microsoft built-in in Internet Explorer. Conditional comments allow you to use the code only for the previously known version of Internet Explorer. The code is ignored by all other browsers, so he does not affect them. In element
Website www.49abcnews.com, you will find:
Thanks to the first line, if LTE IE6, this script will be included in the dizable document only if it is shown in the Internet Explorer version less than or equal (this is indicated using LTE) 6. All other browsers, including the newly arriving Internet Explorer 7, will fully ignore it. .
So, what about the JavaScript FixWeatherpng.js file? Take a look:
Window.attachevent ("OnLoad", Fixweatherpng); Function FixWeatherpng () (VAR IMG \u003d Document.getelementByid ("WeatherImage"); var src \u003d img.src; img.Style.visibility \u003d "Hidden"; var div \u003d document.createelement ("div"); div.style. Filter \u003d "Progid: dxiMageTransform.microsoft. AlphaimageLoader (+ SRC +" ", SIZing \u003d" Scale ")"; // Some 49Abcnews.com-Specific CSS Styling Omitted for Brevity. img.replacenode (DIV); )
Let's analyze, step by step, which makes the script. First, we say the browser that we want to execute the FixWeatherPNG function when the page is loaded. The remaining part of the script is the function itself.
We begin, at first we are looking for the image with which we will work on its id attribute and save it in the IMG variable. Save the SRC attribute (URL to the image file) in the SRC variable. Then we hide the IMG element exposing the CSS property of the visibility in Hidden.
As a result, we replacing the original IMG element (which is hidden) to the newly created DIV element, to which AlphaimageLoader is successfully attached.
Using DOM scripting to insert your AlphaimageLoader - filter bits on the fly, has its own impartial, but the necessary side is incorrect CSS. Moreover, outside your (x) HTML markups will contain dissective DIV elements. And while all this is described inside the conditional comments, there is no chance for other browsers to be spoiled by Microsoft code. (Handyblogger: Here Jeff is trying to finely indicate the "Correct" solution from Microsoft)
If you have to do something incorrect, at least you can extract it and save it separately from all that is not necessary.
In custody
PNG, as a graphic format, offers many technical advantages in addition to those widely used in GIF. In fact, the community is so great that PNG long ago could take a dominant position as a graphic format unrelated to photo images. Insufficient support from the Internet Explorer of some more significant PNG capabilities, such as alpha channel transparency, as a result, scares many web developers. But there are two very good reasons why you should not be afraid of PNG.
First: Even Internet Explorer 6 and its earlier versions almost fully support PNG in terms of what GIF may (of course, with the exception of animation). PNG almost always shows a smaller file size allowing them to load them faster and spend less resources.
Second: Internet Explorer 7 offers full support for the Alpha transparency PNG. Effects that can be obtained with a complete gamut of translucent options are almost limitless. I expect designers who will find interesting ways to use PNG transparency, according to the principle of those described in this article, the doors will be opened to a new level of styles of still unprecedented before. I gave you the useful ideas of what you can create using PNG transparency, but do not stop on it. Look for yourself!
Excerpt from Web Standards Creativity from Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin, and Rob Weychert; Published by Friends of ED. Copyright JEFF CROFT 2007. Used with APRESS, Inc.