) And expect that AlphaimageLoader will make this work in Internet Explorer as it should. Remember that AlphaimageLoader inserts your image between the background and the foreground of the object. Therefore, while it will ship your image in all its transparent glory, it will also continue to ship it as a background image CSS, and without your wonderful translucent pixels.

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:

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 code only for advanced known internet version 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.

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 is not suitable for any reason, we suggest familiarizing yourself with full list 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

In all versions of the operating windows systems 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 with standard tool View photos. To change the program to open, simply perform the same actions by selecting another software.

In this article we considered in detail simple ways Opening PNG format pictures. As you can see, there is nothing complicated in this process, and everything is performed literally for several actions.

You "re here 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.

what is a & nbsp.png & nbspfile?

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 Encoding Specifications That Are Implemented Isto 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.

how to Open a .png File?

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.

applications That Open a .png file

Adobe Photoshop CS6 for Microsoft Windows

Adobe Photoshop. CS6 For Microsoft Windows. IS An Image Editing and Managing Software Downloadable on Windows Computers, Namely Windows 7 (WITHOT SP1) and Windows XP WITH SP3. This Software Comes with New Features and tools For Easy, Quick, Fun and Advanced Editing Of Digital Images. One Feature That Makes This Program Reliable for Image Editing Is The Adobe Mercury Graphics Engine, Which IS An Engine Technology That Provides Faster and High Quality Performance. Content-Aware Tools Are New Features Designed for Retouching Images WITH EASE AS YOU COP IMAGES WITH EASE AFFECT, AUTO-CORRECT BLURRINESS OR WIDE-ANGLE LENS CURVATURES, REMOVE RED EYE, AND ADJUST COLOR BALANCE LIKE BRIGHTNESS AND CONTRAST. This image Editor Is Also Bundled with Auto-Recovery Feature That Can Backup Any Unsaved Images, Background Save Option, Blur Gallery, Crop Tool, Video Creation, And a Whole Lot More. All These New Improved Features and A Modern Friendly-user Interface, Editing Digital Photos Can Never Be So Fun and Easy Wort Photoshop CS6.

Adobe Photoshop CS6 for Mac

Adobe Photoshop CS6 for Mac

Adobe Photoshop CS6 for Mac Is The Version of à ¢  â "Creative Suiteà ¢ Â-" Image Managing Software Designed Exclusively for Mac Computers, Particularly Mac OS X V10.6 to 10.7 in 64-bit. This image editing program is bundled with a new set of features and tools, such as the Mercury Graphics Engine developed by the same company for fast and high quality image enhancing performance, Content-Aware features, intuitive re-imagined tools for movie designing, workflows , Blur Gallery, Crop Tool and A Whole Lot More. The Adobe Mercury Graphics Engine Functions in a Way That It Makes Editing Task Easy and Fast to Complete. This Also Allows The Sharing and Migration of Images WITH AUTO-RECOVERY AND Background Save Options The New Content-Aware Tools Are Made for Easy and Controllable Way of Retouching or Enhancing Images That Result In a More Satisfied Output. IT Basically Lets Any User to AUTO-Correct Images, Crop Them and Correct Wide Angle Lens Curvatures.

ACD Systems Canvas 14

ACD Systems Canvas 14

ACD Systems International Inc. IS The Developer of ACD Systems Canvas 14, Which Is a Technical Graphics Solution Software, That Enables Users to Analyze Data, Enhance Graphics and Share All Information with Ease and Rapidness. This Program is Designed with Full-Featured Tools That Assist Use In Making Technical Graphics and Illustrations with Accuracy. IT CONSISTS OF EDITING TOOLS THAT VARY FROM Editing to Object Illustration Tools. Any Results Created by This Program Make Good Presentations for Projects, Proposals and Other Purposes for Any Line Of Business Related to Graphics and Engineering. Users Can Work with Raster Images And Vector Graphics Using the Same File WELLING OBJECTS, Drawing Shapes, As Well As Inserting Stroke and Fill Inks or Widths. There Is Also A Tool for Adding Texts or Labels and Format Dimensions, Plus Creating Charts. With this program, Users Can Share Finished Projects Through Presentations or publications.

ACD Systems ACDSEE 15

ACD Systems ACDSEE 15

ACD Systems ACDSee 15 Is A Photo Organizer, View FEATURES AN Image Organizer, Viewer and Raw / Image Editor Program for Microsoft Windows and Mac OS X 10.6 (Windows XP With Service Pack 2, Vista, 7 & 8; Mac OS X 10.5, 10.6 10.7 and Mountain Lion). IT WAS DEVELOPED by ACD Systems International, Inc. And Originally Distributed AS A 16-bit Application That Was Later Upgraded With A 32-bit Version. This Minimum Hardware Requirement for this Application IS An Intel Pentium III / AMD Athlon Processor Or Equivalent WITH 512 MB RAM (WITH 310 MB Free Hard Drive Space), A High Color Display Adapter AT 1024 x 768 Resolution and A CD / DVD Burner. ACDSee Manages and Supports Video and Audio Files in Formats That Include Gif, BMP, JPG, PNG, MP3, PSD, WAV, MPEG, and TIFF. Users Can View, Edit, Add Effects, And Organize Photo and Video Collections That Can Be Shared Online. Photos Can Be Organized As These Are Imported from the Camera or Other Storage Device. IT ALSO Features Map View and Geo-Tagging Support That Enable Users to View The Location of Images from GPS-Enabled Cameras. Features Like Fast Browsing, Scanning, Editing, and Backup Options Facilitate Sorting Of Photos by Date and Event, and Storage of Backup Copies to CD, DVD, And Blu-Ray.

PNG file is a raster image saved in Portable Network Graphic format. Each PNG drawing contains a palette - a set of colors used. To reduce the file size, compression is applied without loss of quality according to the Deflate algorithm. Used primarily on the Internet as images for web pages. The format was designed to replace GIF, which, in addition to its deficiencies, before 2004 had restrictions for use in free software. New format PNG solved these problems. In particular, it implements the support of the 8-bit alpha channel and supporting the color depth to 48 bits. While in GIF-format, only complete transparency and the color palette is limited only to 256 colors (8 bits). However, in contrast to the predecessor, this format does not support animation. For this purpose, another MNG format was created. In PNG files, it is also impossible to use the CMYK palette, because this format is not intended for professional work with graphics. PNG files can be opened in any browser and practically in any program to view and edit images. IN Windows file. With the PNG extension, you can open a double mouse click.

File extension. PNG is a PNG pattern. View and processing raster image In PNG format, it is possible using the following programs: Microsoft Windows Photos, Microsoft Windows Photo Viewer, Microsoft Paint, Adobe Photoshop CC. Also listed programs can convert images, pictures and drawings of this format.

PNG format file opens with special programs. To open this format, download one of the proposed programs.

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

File with the file extension PNG is a file Portable Network Graphics.. The format uses compression without loss and is usually considered as an alternative to GIF. But unlike GIF, an animation is not supported in PNG files.

PNG format has both photos in shades of gray and full-color, transparent layers are supported. PNG compression is usually better than that used in GIF. JPG sometimes has more advantages over PNG, but after such compression, defects may occur in images with text or around the high-contrast regions.

How to open a PNG file

To open PNG files, you can use any online browser or graphic editor. And Windows OS platform and Mac OS have built-in mechanisms to view such images.

What is the PNG format for?

PNG program - Viewing Windows Photos by default is often used to open PNG files, since it is a systemic windows program. But there are many other ways to view them.

All browsers (for example, Chrome, Firefox, Internet Explorer etc.) will automatically view the PNG files that you open on the Internet, which means that you do not need to download to the computer each PNG file you want to see. You can also use the browser to open the files already available on the PNG computer using a combination. keys Ctrl. + O. Most of these programs also support DRAG-AND-DROP, so you can simply drag the PNG file to the browser to open it.

There are also several autonomous options for opening such images - these are special graphic editor. Some Popular - XnView , IrfanView. , Faststone Image Viewer. , Google Drive. , Eye of Gnome and Gthumb. You can use almost any of the listed programs, applications to edit PNG files. Paint. and Paint.net., Popular GIMP utility, as well as the well-known Adobe Photoshop.

Conversion PNG.

Image files can be converted different ways, for example, convert to PNG and from it using various programs and online services. For example, it allows you to make a PNG editor - a photo converter.

The image file that is stored in Portable Network Graphic (PNG) format. Contains the bit matrix of colors and uses the compression without loss, close to the file.gif, but without restrictions in copying. Usually used to store web image graphics.

PNG format (read as APG) was created in response to restrictions gif formatmainly to increase colors support and provide image format without a patent license. In addition to this while gif files Maintain only opaque or completely transparent pixels, PNG images may include an 8-bit transparency channel that allows you to change colors from opaque to transparent.

PNG images can not be animated as GIF images. But associated with them .MNG may be animated. PNG images do not provide CMYK support because they are not intended to be used in the field of professional graphics. PNG images are supported by most web browsers.

Mac OS X 10.4 and subsequent versions store screenshots as PNG files. Ubuntu Linux Also stores print screenshots in PNG format.

MIME Type: Image / PNG

Download program for format PNG.

In this article I want to tell about one very unpleasant features "Photoshop", which manifests itself while maintaining transparent images in PNG24. Take the original image and copy some fragment in PNG24. I did this: using the Polygonal Lasso tool allocated a fragment, copied and put in new document, after which I retained through Save for Web:

PNG24, 456 KB

As we found out in the first part, in PNG24, the image, in fact, consists of two layers: RGB containing data about the color of each pixel, and the alpha channel with information about their transparency.

PNG graphic format: processing and viewing

It is logical to assume that in absolutely transparent areas there must be any one color to more efficiently pack the image. However, that's what I saved the "Photoshop" in the RGB layer (I saw it across the seashore editor):

And the naked eye shows that there were large fragments of absolutely unnecessary information:

If you do not want to use other editors (for example, I did not notice such a shortage in Adobe Fireworks), I propose a simple way to eliminate this defect in "Photoshop". Our task is to replace all the information in absolutely transparent areas in some color (preferably black, so as not to doubt that these areas will have the smallest weight in bytes).

1. Open an example in "Photoshop" and highlight the image on the layer: Ctrl + click on the small layer image in the Layers panel.

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

3. Using Image → Adjustments → Threshold, we will only leave the masks whose color is black. To do this, pull the slider to the leftmost position.

4. We leave from the fast mask (key Q) and invert the selection → Inverse or Ctrl + Shift + I). Only absolutely transparent pixels remained highlighted.

5. Pour the selected area in black (methods a lot, for example, via EDIT → Fill).

6. Again inverting the selection and add a layer of the mask (icon in the layer palette).

7. Now we make Save for Web and see how the image wonderfully "lost" by 122 KB.

Once again, I repeat that all actions are very conveniently recorded in Actions, after which it is performed with one press of the key.

To be continued.

Communicating with his 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 fair translucent. If you search for information about this format on the Internet, it is easy to notice that web developers are divided into two camps. The first write about what kind of format is wonderful, operating purely technical data, incomprehensible conventional encoders and designers (for example, about the superiority of the deflate-algorithms of compression over LZW), others leave comments from different degrees of nonsense about the uselessness of PNG, without having bothering even in The essence of things described in the specification.

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

Let's start with terminology. I assume that most readers use photoshop and met the names of PNG-8 and PNG-24 there. These are not two different formats, but just the variations of the same PNG. The format allows you to store three types of images: Greyscale (To describe the image, one channel is used - white), indexed-color (used colors palette, as in GIF) and TrueColor (three channels are used - RGB).

The most important advantage of PNG format is, of course, new compression algorithms. Everyone remembers that GIF effectively compresses horizontal monochrome areas? About this restriction can now be forgotten:

GIF, 2568 bytes

PNG-24, 372 byte

The second important advantage is the filtering of strings (Scanline Filtering, or Delta Filters), due to which the PNG packer can get much more convenient data for compression.

Consider on the example how they work. Take an image of 5 × 5 pixels with a horizontal gradient and schematically display how it can be saved in the file (each number is a unique color).

As can be seen from the example, the GIF encoder would give a lines to compress, which are poorly packed horizontally (because the same colors are distributed vertically). But how can convert this data PNG encoder:

In front of each line, a digit appeared 2. This is a filter that was applied to the string. In this case, this is a filter UP, which says decoder: "For the current pixel, take the pixel value above and add the current value to it." In our case, this is 0, because the colors of the current and upper pixels do not differ. And this data can be more effective if we have a fairly large image.

Why I wrote can? Because in our idealized case, such a scheme would be more efficient:

It applies filter 1 called Sub, which says decoder: "Take the value of the pixel to the left of the current and add it the current value." In this case, 1.

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

Check the filters work:

The attentive reader may notice that the filters apply not to the entire file entirely, but to the rows.

PNG format file - what is it?

It means that each The string may have its own filter. It turns out that the filtering methods of one image can be 5 height of the picture. In general, the task of a good encoder is just to pick up such values \u200b\u200bof filters at which the file volume will be minimal. Unfortunately, Photoshop does not always cope well with his work, so various utilities like Optipng and PNGcrush come to the rescue, which in a large number of passes pick up different methods Filtering and strategies for compressing data, significantly reducing the volume of some complex images. However, it is worth remembering that these programs do not guarantee a decrease in volume for each file, they just try to find the optimal method of data coding.

Another patient injection photoshop for not knowing how to save images in Greyscale mode, that is, it does not know how to lower the depth of the color. Here we will again save the above-mentioned utilities, which, if possible, reduce the depth of color, not worsening the quality of the picture.

PNG-24 (Photoshop → TrueColor), 8167 byte

PNG-24 (Photoshop + Optipng → Greyscale), 6132 byte

The advantages of Greyscale over TrueColor are obvious: For example, white in the first case is recorded (in the decimal number) number 255, and in the second - 16777215.

Now, armed with knowledge storage in PNG format, we can apply them in the preparation of images for the web. This is in the following articles.

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 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.