SVG, PNG and JPG image formats: pros and cons. PNG image - how to open, edit and convert the file PNG files

Moreover, being a free format, PNG offers various practical advantages over GIF for the web designer:

• Better Compression: For most images, PNG achieves a smaller file size than GIF
• Greater 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 Multiple-image Network Graphics (MNG) standard that allows this, but it is not so widely supported by web browsers and graphics editors.

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 and earlier versions do not support the full range of PNG features (including alpha channel transparency), people are left to believe (although this is not true) 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 built into GIF animation was (and continues to be) the main reason for his 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 is a key characteristic of GIF and PNG and is often the reason a web designer chooses the 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.

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.

Now let's look at how to use PNG in web design. I've collected all the files for each example into a separate folder, available on friends of ED.

Over the past few years, the gradient - smooth transition between two or more colors has become a web designer's best friend. 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 output some pretty neat gradients, but often at the cost of a larger file size. 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 is the smallest size (515 bytes). This is four times smaller than a GIF image. JPEG is slightly larger than PNG at 637 bytes and is also lower in quality due to lossy compression (although the ability of the human eye to detect the difference in quality in this simple example remains in question).

Figure 5-1
Photoshop panel - Save For Web,
showing file size differences for the same image in different formats

Sometimes you need to create an image that works the same on different substrates. Some common examples are logos 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 a white image with stencil symbols. 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 advantages in the form of anti-aliasing and partial transparency for use in more detailed icons.

I know what you're thinking: 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 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 major 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.

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), but Microsoft has a filter that eliminates this shortcoming: AlphaImageLoader.

According to a section on Microsoft's official website, AlphaImageLoader "displays an image within the boundaries of an object and between the object's background and its contents." In other words, AlphaImageLoader loads a PNG image with its full transparency, but it loads it as its own layer, underneath which is the content of the object on which it is applied. PNG images loaded this way act more like background images than foreground images (although they actually "sit" on top of the object's background).

Basically, you can simply apply AlphaImageLoader in CSS on img elements and enjoy the result. The image will be loaded first, the transparency will remain, but then the image will be loaded again - as the front contents of the object - with opaque areas (thus "shadowing" your transparent version).

You can't use a transparent PNG as a background CSS image for an (X)HTML element (say for ) and expect AlphaImageLoader to do the job properly in Internet Explorer. Remember that AlphaImageLoader inserts your image between the background and foreground of the object. So while it will load your image in all its transparent glory, it will also continue to load it as background image CSS, and without your wonderful translucent pixels.

Let's go back to one of the earlier examples and try to load it correctly in Internet Explorer. Remember Channel 49, the TV station in Topeka? I'm sure yes. Figure 5-21 shows what the site looks like in Internet Explorer 6.

Figure 5-21
The headline 49abcnews.com, rendered in Internet Explorer 6 for Windows, with PNG transparency intact.

The HTML for the weather top part looks like you might have already guessed:

Currently in Topeka, KS:
82° Overcast
Get the forecast and more...

You see an image, and it's definitely a PNG; even Internet Explorer loads it flawlessly. The secret ingredient to this is JavaScript. I actually used a bit of DOM scripting to remove the img element on the fly and replace it with a div element that - you guessed it - uses AlphaImageLoader. JavaScript is described inside conditional comments, another handy but completely non-standardized idiom from Microsoft built into Internet Explorer. Conditional comments allow you to use code only for a known version of Internet Explorer. The code is ignored by all other browsers, so it does not affect them in any way. In the site element www.49abcnews.com, you will find:

Thanks to the first line, if lte IE6, this script will only be included in the rendered document if it is shown in a version of Internet Explorer less than or equal to (this is indicated by lte) 6. All other browsers, including the newly arrived Internet Explorer 7, will completely ignore this .

So, what's in the JavaScript fixWeatherPng.js file? Let's take a look:

Window.attachEvent("onload", fixWeatherPng); function fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft. AlphaImageLoader(+ src + "", sizing="scale")"; // Some 49abcnews.com-specific CSS styling omitted for brevity. img.replaceNode(div); )

Let's analyze, step by step, what the script does. First, we tell the browser that we want to execute the fixWeatherPng function when the page loads. The rest of the script is the function itself.

Let's start, first we look for the image with which we will work by its id attribute and save it in the img variable. We save the src attribute (URL to the image file) in the src variable. Then we hide the img element by exposing CSS property visibility to hidden.

As a result, we replace the original img element (which is hidden) with a newly created div element, to which the AlphaImageLoader is successfully attached.

Using DOM scripting to insert your AlphaImageLoader - filtering bits on the fly - has its ugly but necessary downside - incorrect CSS. Moreover, outside of your (X)HTML markup there will be non-semantic div elements. And as long as all this is described inside conditional comments, there is no chance for other browsers to be corrupted by Microsoft's code. (handyblogger: Here Jeff is trying to subtly point out Microsoft's "clumsy" solution)

If you have to do something incorrectly, at least you can extract it and keep it separate from everything else where it is not needed.

PNG like graphic format, offers a lot technical advantages beyond those commonly used in GIFs. In fact, the advantages are so great that PNG could have long ago assumed a dominant position as a non-photo graphics format. Internet Explorer's lack of support for some of PNG's more significant features, such as alpha channel transparency, has as a result deterred many web developers. But there are two very good reasons why you shouldn't be afraid of PNG.

First: even Internet Explorer 6 and its earlier versions almost completely support PNG in a way that GIF can (with the exception of animation, of course). PNG almost always produces smaller files, allowing them to load faster and use fewer resources.

Second: Internet Explorer 7 offers full support for PNG alpha transparency. The effects that can be achieved with the full range of translucent options are virtually limitless. I expect that for designers who find interesting ways to use PNG transparency like the ones described in this article, the door will be opened to a new level of styles never seen before. I've given you some useful ideas of what you can create with PNG transparency, but don't stop there. Look for yourself!

Excerpted from Web Standards Creativity by 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 permission of Apress, Inc.

The PNG image format is one of the most popular and offers users to store compressed images without losing their quality. Most of all, PNG is used for editing graphics or on the Internet. Next, we will look at several simple ways by which you can open a file of this format on your computer.

There are several different methods for opening PNG files for viewing and editing. You just need to follow the instructions provided below and opening the image will not be difficult.

On the Internet there are many graphic editors and special software for viewing and editing images. They provide users with a large number of functions and tools, which makes the process of working with pictures as comfortable as possible. Let's look at the process of opening a PNG image using the GIMP program as an example:

If GIMP for some reason does not suit you, we suggest that you familiarize yourself with full list programs for viewing images in our article at the link below. You will definitely find something suitable there.

In cases where it is necessary to perform various manipulations with open image, take advantage of special graphic editors with advanced functionality and a large number of different tools. You can find out more about them in our article at the link below.

All versions of the Windows operating system have a built-in image viewer. It can also be used to open PNG files. Let's take a closer look at this process:

If you need all PNG images to open through a standard viewer Windows photos, follow these steps:

Now by default all PNG files will be opened with standard means viewing photos. To change the program to open, simply follow the same steps, selecting a different software.

In this article we looked in detail simple ways opening images in PNG format. As you can see, in this process there is nothing complicated, and everything is done in just a few steps.

A PNG file is a raster image saved in the Portable Network Graphic format. Each PNG image contains a palette - a set of colors used. To reduce the file size, lossless compression using the Deflate algorithm is used. Used primarily on the Internet as images for web pages. The format was developed to replace GIF, which, in addition to its shortcomings, had restrictions for use in free software until 2004. The new PNG format solved these problems. In particular, it implements support for an 8-bit alpha channel and support for color depths up to 48 bits. While in the GIF format only full transparency is possible and the color palette is limited to only 256 colors (8 bits). However, unlike its predecessor, this format does not support animation. For this purpose, another MNG format was created. It is also impossible to use the CMYK palette in PNG files, because this format is not intended for professional work with graphics. PNG files can be opened in any browser and almost any image viewing and editing program. IN Windows file with a PNG extension can be opened by double clicking the mouse.

The file extension .png represents a PNG image. Viewing and processing of a raster image in PNG format is possible using following programs: Microsoft Windows Photos, Microsoft Windows Photo Viewer, Microsoft Paint, Adobe Photoshop CC. Also, the listed programs can convert images, pictures and drawings of this format.

A PNG file can be opened with special programs. To open this format, download one of the proposed programs.

The PNG extension is a file format used to store images without loss of quality. This is the most popular photo format on the Internet, specifically designed for use on the Web.

A file with a PNG file extension is a file Portable Network Graphics. The format uses lossless compression and is generally considered an alternative to GIF. But unlike GIF, PNG files do not support animation.

The PNG format has both grayscale and full-color photographs, and transparent layers are supported. PNG compression is usually better than that used in GIF. JPG is sometimes superior to PNG, but the compression can cause artifacts in images with text or around high-contrast areas.

To open PNG files, you can use any Internet browser or graphics editor. Both Windows and Mac OS platforms have built-in mechanisms for viewing such images.

The Png - Windows default photo viewer is often used to open PNG files because it system program Windows. But there are many other ways to view them.

All browsers (such as Chrome, Firefox, Internet Explorer, etc.) will automatically view PNG files you open on the Internet, meaning you don't have to download every PNG file you want to view onto your computer. You can also use your browser to open PNG files you already have on your computer using the Ctrl + O key combination. Most of these programs also support drag-and-drop, so you can simply drag the PNG file into the browser to open it.

There are also several offline options for opening such images - these are special graphic editor. A few popular ones are XnView, IrfanView, FastStone Image Viewer, Google Drive, Eye of GNOME and gThumb. To edit PNG files, you can use almost any of the listed programs, the Paint and Paint.NET applications, the popular GIMP utility, as well as the well-known Adobe Photoshop.

Image files can be converted different ways, for example, convert to and from png using various programs and online services. For example, this can be done by the Png editor - Photo Converter.

An image file that is stored in the Portable Network Graphic (PNG) format. Contains a bitmap of colors and uses lossless compression, similar to a .GIF file, but without copying restrictions. Typically used to store web image graphics.

The PNG format (read as png) was created in response to the limitations of the GIF format, primarily to increase color support and provide a patent-free image format. In addition, while GIF files only support opaque or fully transparent pixels, PNG images can include an 8-bit transparency channel that allows colors to change from opaque to transparent.

PNG images cannot be animated like GIF images. But the associated .MNG format can be animated. PNG images do not support CMYK because they are not intended for professional graphics use. PNG images are supported by most web browsers.

Mac OS X 10.4 and later stores screenshots as PNG files. Ubuntu Linux also stores printed screenshots in PNG format.

MIME type: image/png

Download the program for PNG format

In this article I want to talk about one very unpleasant feature of Photoshop, which appears when saving transparent images in PNG24. Let's take the original image and copy some fragment into PNG24. I did it this way: using the Polygonal Lasso tool, I selected a fragment, copied and pasted it into a new document, and then saved it using Save for Web:

PNG24, 456 KB

As we found out in Part 1, in PNG24 an image is essentially made up of two layers: an RGB layer containing information about the color of each pixel, and an alpha channel containing information about their transparency.

It is logical to assume that in completely transparent areas there should be some one color in order to effectively pack the image. However, this is what Photoshop saved in the RGB layer (I saw this through the Seashore editor):

And the naked eye can see that large fragments of absolutely unnecessary information remain:

If you don’t want to use other editors (for example, I didn’t notice such a drawback in Adobe Fireworks), I suggest a simple way to eliminate this defect in Photoshop. Our task is to replace all information in completely transparent areas with some one color (preferably black, so as not to doubt that these areas will have the least weight in bytes).

1. Open the example in Photoshop and select the image on the layer: Ctrl+click on the small layer image in the Layers palette.

2. Let's switch to quick mask mode (Q key).

3. Using Image → Adjustments → Threshold, leave only those mask pixels whose color was black. To do this, drag the slider to the far left position.

4. Exit quick mask mode (Q key) and invert the selection (Select → Inverse or Ctrl+Shift+I). Only completely transparent pixels remain selected.

5. Fill the selected area with black (there are many ways, for example, via Edit → Fill).

6. Invert the selection again and add a mask to the layer (icon in the layers palette).

7. Now we do Save for Web and see how the image miraculously “thinner” by 122 KB.

I repeat once again that all actions are very conveniently recorded in Actions, after which they are performed with one keystroke.

To be continued.

Communicating with my colleagues at various seminars and in the studio, I came to the conclusion that for many the only advantage of the PNG format is the presence of honest translucency. If you search the Internet for information about this format, it is easy to notice that web developers are divided into two camps. The first write about how wonderful this format is, using purely technical data that is incomprehensible to ordinary coders and designers (for example, about the superiority of deflate compression algorithms over LZW), while others leave comments of varying degrees of stupidity about the uselessness of PNG, without even bothering to delve into the essence of the things described in the specification.

Let's try to figure out what advantages this format provides in order to learn how to use them when preparing illustrations for the web.

Let's start with terminology. I assume that most readers use Photoshop and have come across the names PNG-8 and PNG-24. These are not two different formats, but just variations of the same PNG. The format allows you to store three types of images: greyscale (one channel is used to describe the image - white), indexed-colour (a color palette is used, like in GIF) and truecolor (three channels are used - RGB).

The most important advantage of the PNG format is, of course, new compression algorithms. Everyone remembers that GIF effectively compresses only horizontal areas of the same color? You can now forget about this limitation:

The second important advantage is line filtering (scanline filtering, or delta filters), thanks to which the PNG packer can obtain much more convenient data for compression.

Let's look at an example of how they work. Let's take a 5x5 pixel image with a horizontal gradient and diagram how it can be saved to a file (each number is a unique color).

As you can see from the example, a GIF encoder would compress strings that don't pack well horizontally (because the same colors spread vertically). Here's how a PNG encoder can convert this data:

The number 2 appeared before each line. This is the filter that was applied to the line. In this case, it's the Up filter, which tells the decoder: "For the current pixel, take the value of the pixel above and add the current value to it." In our case it is 0, because the colors of the current and top pixels are not different. And this data can be packed more efficiently if we have a large enough image.

Why did I write Maybe? Because in our idealized case, the following scheme would be more effective:

Here filter 1 is applied, called Sub, which tells the decoder: “Take the value of the pixel to the left of the current one and add the current value to it.” In this case 1.

After filtering, all strings (along with filter values) are combined into one sequence, which is then compressed using deflate algorithms (their discussion is beyond the scope of this article).

Let's check the filters:

An attentive reader may notice that filters are applied not to the entire file, but to lines.

It means that each the string may have mine filter. It turns out that there can be 5 image heights for filtering one image. In general, the task of a good encoder is precisely to select such filter values ​​at which the file size will be minimal. Unfortunately, Photoshop does not always do its job well, so various utilities like OptiPNG and PNGCrush come to the rescue, which select different filtering methods and data compression strategies in a large number of passes, thereby significantly reducing the volume of some complex images. However, it is worth remembering that these programs do not guarantee a reduction in size for each file, they just try to find the best way data encoding.

Another painful jab at Photoshop is that it does not know how to save images in greyscale mode, that is, it does not know how to reduce the color depth. Here we will again be saved by the above-mentioned utilities, which, if possible, reduce the color depth without compromising the quality of the picture.

The advantages of greyscale over truecolor are obvious: for example, white in the first case is written (in the decimal system) as the number 255, and in the second - 16777215.

Now, armed with knowledge about storing data in the PNG format, we can use it in preparing images for the web. More on this in the following articles.

You"re here because you have a file that has a file extension ending in .png. Files with the file extension .png can only be launched by certain applications. It"s possible that .png files are data files rather than documents or media , which means they"re not meant to be viewed at all.

PNG files are compressed raster image files usually implemented for visual elements found in a website among other Web graphics. The image content of these .png files consists of index colors integrated by bitmap images, and the lossless digital image compression and encoding specifications that are implemented into these .png files are similar to the compression standards integrated into GIF files. Also known as portable network graphics, the PNG format was developed to lift the limitations of GIF images, in terms of color support and patent licensing. The transparency channel of these PNG files have been improved to implement 8-bit support. CMYK support is not available in these PNG files.

Launch a .png file, or any other file on your PC, by double-clicking it. If your file associations are set up correctly, the application that"s meant to open your .png file will open it. It"s possible you may need to download or purchase the correct application. It"s also possible that you have the correct application on your PC, but .png files aren"t yet associated with it. In this case, when you try to open a .png file, you can tell Windows which application is the correct one for that file. From then on, opening a .png file will open the correct application.

Adobe Photoshop CS6 for Mac

ACD Systems Canvas 14

ACD Systems ACDSee 15

A PNG (Portable Network Graphic) file refers to raster images. The PNG format contains a specific palette of colors used in the drawing. This graphic format is quite often used on the World Wide Web when providing web pages with various images. Thanks to the use of the Deflate compression algorithm, raster images, having a PNG file extension, are available for compression without obvious loss of quality.

We developed this file format to replace the GIF format, because the latter for a long time required a paid software. Among the owners of web resources, PNG images are famous for their excellent characteristics compared to similar formats. PNG supports color depth up to 48 bits. The main difference between GIF is that such a graphic file is limited to only 8 bits (256 colors in total). You should know that, unlike GIF, PNG does not support animation effects.

You can open a file with a PNG extension using virtually any viewing program. In the operating room Windows system, opening PNG is possible by simply double-clicking the mouse to view the images. This image format runs in any web browser. If the user needs to change the saved image in the PNG version, it is enough to use image editing utilities such as Adobe Photoshop or Microsoft Windows Photos, as well as Corel PaintShop or ACD Systems.

This file extension is very popular and carries all the necessary graphic information for full-color images of good quality.