Portable Network Graphics
PNG | |
![]() ![]() A PNG image with an 8-bit transparency channel (top). The same image is overlaid onto a checkered background (bottom), typically used in graphics software to indicate transparency. | |
Filename extension | .png |
---|---|
Internet media type | image/png |
Type code | PNGf PNG |
Uniform Type Identifier | public.png |
Developed by | PNG Development Group (donated to W3C) |
Type of format | lossless bitmap image format |
Extended to | APNG, JNG and MNG |
Standard(s) | ISO 15948, IETF RFC 2083 |
Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license. It is pronounced /ˈpɪŋ/ [1] or spelled out as P-N-G. The PNG acronym is optionally recursive, unofficially standing for “PNG's Not GIF”.[2]
PNG supports palette-based (palettes of 24-bit RGB colors), greyscale, RGB, or RGBA images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK).
PNG files nearly always use file extension "PNG
" or "png
" and are assigned MIME media type "image/png
" (approved October 14, 1996)[citation needed].
Contents
History and development
The motivation for creating the PNG format was in early 1995, after it had come to light that the Lempel-Ziv-Welch (LZW) data compression algorithm—used in the GIF format—had been patented by Unisys. For more on this controversy, see: GIF (Unisys and LZW patent enforcement). There were also other problems with the GIF format which made a replacement desirable, notably its limitation to 256 colors at a time when computers capable of displaying far more than 256 colors were becoming common. Although GIF allows for animation, it was decided that PNG should be a single-image format. A companion format called MNG (Multi-image Network Graphics) has been defined for animation.
A January 1995 precursory discussion thread, on the usenet newsgroup "comp.graphics" with the subject Thoughts on a GIF-replacement file format, had many propositions, which would later be part of the PNG file format. In this thread Oliver Fromme, author of the popular MS-DOS JPEG viewer QPEG, proposed the PING name, meaning PING is not GIF, and also the PNG extension for the first time.[3]
- October 1, 1996: Version 1.0 of the PNG specification was released, and later appeared as RFC 2083. It became a W3C Recommendation on October 1, 1996.
- December 31, 1998: Version 1.1, with some small changes and the addition of three new chunks, was released.
- August 11, 1999: Version 1.2, adding one extra chunk, was released.
- November 10, 2003: PNG is now an International Standard (ISO/IEC 15948:2003). This version of PNG differs only slightly from version 1.2 and adds no new chunks.
- March 3, 2004: ISO/IEC 15948:2004.
Technical details
File header
A PNG file starts with an 8-byte signature. The hexadecimal byte values are 89 50 4E 47 0D 0A 1A 0A, the decimal values are 137 80 78 71 13 10 26 10. Each of the header bytes is there for a specific reason:[4]
Bytes | Purpose |
---|---|
89 | Has the high bit set to detect transmission systems that do not support 8 bit data and to reduce the chance that a text file is mistakenly interpreted as a PNG, or vice versa. |
50 4E 47 | In ASCII, the letters "PNG", allowing a person to identify the format easily if it is viewed in a text editor. |
0D 0A | A DOS style line ending (CRLF) to detect DOS-UNIX line ending conversion of the data. |
1A | A byte that stops display of the file under DOS when the command type has been used—the end-of-file character |
0A | A UNIX style line ending (LF) to detect UNIX-DOS line ending conversion. |
"Chunks" within the file
After the header comes a series of chunks, each of which conveys certain information about the image. Chunks declare themselves as critical or ancillary, and a program encountering an ancillary chunk that it does not understand can safely ignore it. This chunk-based storage layer structure, similar in concept to a container format, is designed to allow the PNG format to be extended while maintaining compatibility with older versions—it provides forward compatibility, and this same file structure (with different signature and chunks) is used in the associated MNG, JNG, and APNG formats.
A chunk consists of four parts: Length (4 bytes), Chunk type/name (4 bytes), Chunk data (length bytes) and CRC (Cyclic Redundancy Code / Checksum, 4 bytes).
Length (4 bytes) |
Chunk type (4 bytes) |
Chunk data (length bytes) |
CRC (4 bytes) |
Chunks are given a four letter case sensitive ASCII type/name. The case of the different letters in the name (bit 5 of the numeric value of the character) provides the decoder with some information on the nature of chunks it does not recognize.
The case of the first letter indicates if the chunk is critical or not. If the first letter is uppercase, the chunk is critical; if not, the chunk is ancillary. Critical chunks contain information that is necessary to read the file. If a decoder encounters a critical chunk it does not recognize, it must abort reading the file or supply the user with an appropriate warning.
The case of the second letter indicates if the chunk is "public" (either in the specification or the registry of special purpose public chunks) or "private" (not standardised). Uppercase is public and lowercase is private. This ensures that public and private chunk names can never conflict with each other (although two private chunk names could conflict).
The third letter must be uppercase to conform to the PNG specification. It is reserved for future expansion. Decoders should treat a chunk with a lower case third letter the same as any other unrecognised chunk.
The case of the fourth letter indicates if a chunk is safe to copy by editors that do not recognize it. If lowercase, the chunk may be safely copied regardless of the extent of modifications to the file. If uppercase, it may only be copied if the modifications have not touched any critical chunks.
Critical chunks
A decoder must be able to interpret these to read and render a PNG file.
-
IHDR
must be the first chunk; it contains the header. -
PLTE
contains the palette; list of colors. -
IDAT
contains the image, which may be split among multiple IDAT chunks. Doing so increases filesize slightly, but makes it possible to generate a PNG in a streaming manner. -
IEND
marks the image end.
The PLTE
chunk is essential for color type 3 (indexed color). It is optional for color types 2 and 6 (truecolor and truecolor with alpha) and it must not appear for color types 0 and 4 (greyscale and greyscale with alpha).
Ancillary chunks
Other image attributes that can be stored in PNG files include gamma values, background color, and textual metadata information. PNG also supports color management through the inclusion of ICC color space profiles.[5]
-
bKGD
gives the default background color. It is intended for use when there is no better choice available, such as in standalone image viewers (but not web browsers, see below for more details).
-
cHRM
gives the chromaticity coordinates of the display primaries and white point.
-
gAMA
specifies gamma.
-
hIST
can store the histogram, or total amount of each color in the image.
-
iCCP
is an ICC color profile.
-
iTXt
contains UTF-8 text, compressed or not, with an optional language tag.
-
pHYs
holds the intended pixel size and/or aspect ratio of the image.
-
sBIT
(significant bits) indicates the color-accuracy of the source data.
-
sPLT
suggests a palette to use if the full range of colors is unavailable.
-
sRGB
indicates that the standard color space is used.
-
tEXt
can store text that can be represented in ISO/IEC 8859-1, with one name=value pair for each chunk.
-
tIME
stores the time that the image was last changed.
-
tRNS
contains transparency information. For indexed images, it stores alpha channel values for one or more palette entries. For truecolor and greyscale images, it stores a single pixel value that is to be regarded as fully transparent.
-
zTXt
contains compressed text with the same limits as tEXt.
The lowercase first letter in these chunks indicates that they are not needed for the PNG specification. The lowercase last letter in some chunks indicates that they are safe to copy, even if the application concerned does not understand them.
Color depth
Bit depth per channel | |||||||
---|---|---|---|---|---|---|---|
1 | 2 | 4 | 8 | 16 | |||
Number of channels |
indexed | 1 | 1 | 2 | 4 | 8 | |
greyscale | 1 | 1 | 2 | 4 | 8 | 16 | |
greyscale & alpha | 2 | 16 | 32 | ||||
truecolor | 3 | 24 | 48 | ||||
truecolor & alpha | 4 | 32 | 64 | ||||
Bits per pixel |
PNG images can either use palette-indexed color or be made up of one or more channels (numerical values directly representing quantities about the pixels). When there is more than one channel in an image all channels have the same number of bits allocated per pixel (known as the bit depth of the channel). Although the PNG specification always talks about the bit depth of channels, most software and users generally talk about the total number of bits per pixel (sometimes also referred to as bit depth or color depth). Since multiple channels can affect a single pixel, the number of bits per pixel is often higher than the number of bits per channel, as shown in the illustration at right.
The number of channels will depend on whether the image is greyscale or color and whether it has an alpha channel. PNG allows the following combinations of channels, called the color type.
The color type is specified in the color type field, which is a bit field, as explained in the table below at right; not all combinations are valid—there is no "indexed greyscale", for instance, which would be color type 1, and palette images encode alpha in the palette, not a separate channel, so there is no color type 7.
name | color type |
binary | masks[7] | |||
---|---|---|---|---|---|---|
A | C | P | ||||
greyscale | 0 | 0 | 0 | 0 | 0 | |
indexed greyscale | 1 | 0 | 0 | 0 | 1 | PALETTE |
truecolor | 2 | 0 | 0 | 1 | 0 | COLOR |
indexed | 3 | 0 | 0 | 1 | 1 | COLOR
| PALETTE |
greyscale & alpha | 4 | 0 | 1 | 0 | 0 | ALPHA |
indexed greyscale & alpha | 5 | 0 | 1 | 0 | 1 | ALPHA
| PALETTE |
truecolor & alpha | 6 | 0 | 1 | 1 | 0 | ALPHA
| COLOR |
indexed & alpha | 7 | 0 | 1 | 1 | 1 | ALPHA
| COLOR | PALETTE |
- greyscale
- red, green and blue: rgb/truecolor
- indexed: channel containing indexes into a palette of colors
- greyscale and alpha: level of transparency for each pixel
- red, green, blue and alpha
With indexed color images, the palette is always stored in RGB at a depth of 8 bits per channel (24 bits per palette entry). The palette must not have more entries than the image bit depth allows for, but it may have fewer (for example, if an image only uses 90 colors then it does not need palette entries for all 256 colors).
Indexed color PNGs are allowed to have 1, 2, 4 or 8 bits per pixel by the standard; greyscale images with no alpha channel allow for 1, 2, 4, 8 or 16 bits per pixel. Everything else uses a bit depth per channel of either 8 or 16. The combinations this allows are given in the table above. The standard requires that decoders can read all supported color formats but many image editors can only produce a small subset of them.
Transparency of image
PNG offers a variety of transparency options. With truecolor and greyscale images either a single pixel value can be declared as transparent or an alpha channel can be added (enabling any percentage of partial transparency to be used). For paletted images, alpha values can be added to palette entries. The number of such values stored may be less than the total number of palette entries, in which case the remaining entries are considered fully opaque.
The scanning of pixel values for binary transparency is supposed to be performed before any color reduction to avoid pixels becoming unintentionally transparent. This is most likely to pose an issue for systems that can decode 16 bits per channel images (as they must be compliant with the specification) but only output at 8 bits per channel (the norm for all but the highest end systems).
Compression
PNG uses a 2-stage compression process:
- pre-compression: filtering (prediction)
- compression: DEFLATE
PNG uses a non-patented lossless data compression method known as DEFLATE, which is the same algorithm used in the zlib compression library.
Filtering
Before DEFLATE is applied, the data is precompressed, via a prediction method: a single filter method is used for the entire image, while for each image line, a filter type is chosen that transforms the data so that it is hopefully more easily compressed.[8]
There is only one filter method in the current PNG specification (denoted method 0), and thus in practice the only choice is which filter type to apply to each line. The specified filter types predicts the color of each pixel based on the colors of previous neighboring pixels and subtracts the predicted color of the pixel from the actual color. An image line filtered in this way is often more compressible than the raw image line would be, especially if it is similar to the line above, since the differences from prediction will generally be clustered around 0, rather than spread over all possible image values. This is particularly important in relating separate rows, since DEFLATE has no understanding that an image is a 2D entity, and instead just sees the image data as a stream of bytes.
There are five filter types, which predict the value of each byte (of the image data before filtering) based on the corresponding byte of the pixel to the left (A), above (B), above and to the left (C) or some combination thereof, and encodes the difference between the predicted value and the actual value. (For images with 8 or fewer bits per pixel, "left" means the immediately preceding byte.)[9] The filters are:
Filter byte | Filter name | Predicted value |
---|---|---|
0 | None | Zero (so that the raw byte value passes through unaltered) |
1 | Sub | Byte A (to the left) |
2 | Up | Byte B (above) |
3 | Average | Mean of bytes A and B, rounded down |
4 | Paeth | A, B, or C, whichever is closest to p = A + B − C |
The Paeth filter is based on an algorithm by Alan W. Paeth.[10] Compare to DPCM, used in lossless JPEG, and to the discrete wavelet transform using 1×2, 2×1, or (for the Paeth predictor) 2×2 windows and Haar wavelets.
Compression is further improved by choosing filter methods adaptively on a line-by-line basis. This improvement, and a heuristic method of implementing it commonly used by PNG-writing software, were created by Lee Daniel Crocker, who tested the methods on many images during the creation of the format;[11] the choice of filter is a component of file size optimization, as discussed below.
If interlacing is used, each stage of the interlacing is filtered separately, meaning that the image can be progressively rendered as each stage is received; however, interlacing generally makes compression less effective.
Interlacing
PNG offers an optional 2-dimensional, 7-pass interlacing scheme – the Adam7 algorithm. This is more sophisticated than GIF's 1-dimensional, 4-pass scheme, and allows a clearer low-resolution image to be visible earlier in the transfer, particularly if interpolation algorithms such as bicubic interpolation are used.[12]
However, as a 7-pass scheme, it tends to reduce the data's compressibility more than simpler schemes.
Animation
PNG itself does not support animation at all. MNG is an extension to PNG that does; it was designed by members of the PNG Group. MNG shares PNG's basic structure and chunks, but it is significantly more complex and has a different file signature, which automatically renders it incompatible with standard PNG decoders.
The complexity of MNG led to the proposal of APNG by developers of the Mozilla Foundation. It is based on PNG, supports animation and is simpler than MNG. APNG offers fallback to single-image display for PNG decoders that do not support APNG. However, neither of these formats is currently widely supported. APNG is supported in Firefox 3.0 and Opera 9.5.[13] The PNG Group decided in April 2007 not to embrace APNG[14]. Several alternatives are under discussion, ANG, aNIM/mPNG, PNG in GIF and its subset RGBA in GIF.[15]
Comparison with other file formats
Comparison with Graphics Interchange Format (GIF)
- On most images, PNG can achieve greater compression than GIF (see the section on filesize, below).
- PNG gives a much wider range of transparency options than GIF, including alpha channel transparency.
- Whereas GIF is limited to 8-bit indexed color, PNG gives a much wider range of color depths, including 24-bit (8 bits per channel) and 48-bit (16 bits per channel) truecolor, allowing for greater color precision, smoother fades, etc.[16] When an alpha channel is added, up to 64 bits per pixel (before compression) are possible.
- GIF intrinsically supports animated images. PNG supports animation only via unofficial extensions (see the section on animation, above).
- PNG images are widely supported (for instance, with modern web browsers and office software), but not as widely supported as GIF images.
Comparison with JPEG
JPEG (Joint Photography Experts Group) can produce a smaller file than PNG for photographic (and photo-like) images, since JPEG uses a lossy encoding method specifically designed for photographic image data. Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize (often 5–10 times) with negligible gain in quality.
PNG is a better choice than JPEG for storing images that contain text, line art, or other images with sharp transitions. Where an image contains both sharp transitions and photographic parts a choice must be made between the large but sharp PNG and a small JPEG with artifacts around sharp transitions. JPEG also does not support transparency.
JPEG is a worse choice for storing images that require further editing as it suffers from generation loss, whereas lossless formats do not. This makes PNG useful for saving temporary photographs that require successive editing. When the photograph is ready to be distributed, it can then be saved as a JPEG, and this limits the information loss to just one generation. That said, PNG does not provide a standard means of embedding Exif image data from sources such as digital cameras, which makes it problematic for use amongst photographers, especially professionals. TIFF does support it as a lossless format.
JPEG has historically been the format of choice for exporting images containing gradients, as it could handle the color depth much better than the GIF format. However, any compression by the JPEG would cause the gradient to become blurry, but a 24-bit PNG export of a gradient image often comes out identical to the source image, and at a small file size. As such, the PNG format is the optimal choice for exporting small, repeating gradients for web usage.
Comparison with JPEG-LS
JPEG-LS is a lossless image format by the Joint Photographic Experts Group, though far less widely known and supported than the lossy JPEG format discussed above. As a lossless format, it is directly comparable with PNG, and has a standard set of test images. On these images, JPEG-LS generally performs better than PNG, by 10–15%, but on some images PNG performs substantially better, on the order of 50–75%.[17] Thus, if both of these formats are options and file size is an important criterion, they should both be considered, depending on the image.
Comparison with TIFF
Tagged Image File Format (TIFF) is a complicated format that incorporates an extremely wide range of options. While this makes TIFF useful as a generic format for interchange between professional image editing applications, it makes adding support for it to applications a much bigger task and so it has little support in applications not concerned with image manipulation (such as web browsers). It also means that many applications can read only a subset of TIFF types, creating more potential user confusion.
The most common general-purpose, lossless compression algorithm used with TIFF is Lempel-Ziv-Welch (LZW). This compression technique, also used in GIF, was covered by patents until 2003. There is a TIFF variant that uses the same compression algorithm as PNG uses, but it is not supported by many proprietary programs. TIFF also offers special-purpose lossless compression algorithms like CCITT Group IV, which can compress bilevel images (e.g., faxes or black-and-white text) better than PNG's compression algorithm.
Software support
Bitmap graphics editor support for PNG
Adobe Fireworks (formerly by Macromedia) uses PNG as its native file format, allowing other image editors and preview utilities to view the flattened image. However, Fireworks by default also stores meta data for layers, animation, vector data, text and effects. Such files should not be distributed directly. Fireworks can instead export the image as an optimized PNG without the extra meta data for use on web pages, etc.[18]
Other popular graphics programs which support the PNG format include Adobe Photoshop, Corel Photo-Paint, Corel Paint Shop Pro, GIMP, GraphicConverter, Helicon Filter, Inkscape, Universal Converter, Pixel image editor, Paint.NET and Xara. Some programs bundled with popular operating systems, which support PNG include Microsoft's Paint and Apple's iPhoto and Preview.
Some image processing programs have PNG compression problems, mainly related to lack of full implementation of the PNG compressor library.[citation needed] These include:
- Microsoft's Paint for Windows XP
- Microsoft Picture It! Photo Premium 9
- older versions of Adobe Photoshop.
Adobe's Fireworks is sometimes placed in this category, but its difficulties are less severe than the other entries. The confusion stems from a misunderstanding of the mechanics of its Save format: though PNGs, the intermediate images produced by that option include large, private chunks containing complete layer and vector information, which allows further, lossless editing. Properly saved with the Export option, Fireworks' PNGs are competitive with those produced by other image editors, but are no longer editable as anything but flattened bitmaps. Fireworks is unable to save size-optimized vector-editable PNGs.
Web browser support for PNG
PNG support first appeared in Internet Explorer 4.0b1 and in Netscape 4.04.[19]
Despite calls by the Free Software Foundation[20] and the World Wide Web Consortium (W3C),[21] tools such as gif2png, and campaigns such as burn all gifs, PNG adoption on websites has been fairly slow.
GIF is found to be in use more than PNG for a few reasons:
- No support on old browsers (such as Internet Explorer below version 4).
- No animation, still images only (unlike GIF, though Mozilla's unofficial APNG format is a potential solution).
PNG compatible browsers include: Apple Safari, Google Chrome, Mozilla Firefox, Opera, Camino, Internet Explorer 7 (still numerous issues),[22] and many others. For the complete comparison, see Comparison of web browsers (Image format support).
However, Internet Explorer (Windows), has numerous issues which prevent it from correctly rendering PNG images.[22]
- 4.0 crashes on large PNG chunks.[23]
- 4.0 does not include the functionality to view .png files,[24] but there is a registry fix.[22]
- 5.0 and 5.01 has broken OBJECT support.[25]
- 5.01 prints palette images with black (or dark gray) backgrounds under Windows 98, sometimes with radically altered colors.[26]
- 6.0 fails to display PNG images of 4097 or 4098 bytes in size.[27][28]
- 6.0 cannot open a PNG file that contains one or more zero-length IDAT chunks.[29]
- 6.0 sometimes completely loses ability to display PNGs, but there are various fixes.[27]
- 6.0 and below has broken alpha-channel transparency support (will display the default background color instead).[30][31][32] However there are various fixes:
- Degradable PNG Transparency for IE6
- webfx - PNG Behavior (IE behavior/.htc)
- The PNG problem in Windows Internet Explorer (IE behavior/.htc) (unmaintained)
- TwinHelix - Near-native PNG support with alpha opacity to IE 5.5 and 6 (IE behavior/.htc)
- A Better IE 5.5 and 6 PNG Fix (supports CSS background-position, background-repeat) (IE behavior/.htc)
- 24ways.org - Transparent PNGs in Internet Explorer 6 by Drew McLellan (Javascript)
- PNG-24 Alpha Transparency With Microsoft Internet Explorer or better (MSIE 5.5+) (PHP)
- PNGPong, an open source solution to display transparent PNGs in IE, Firefox, and Safari without the use of filters, PHP, or complicated Javascript and CSS (JavaScript+Flash)
- Cross Browser PNG Transparency (CSS)
- CSS PNG fix (with background call none fix) (CSS)
- SitePoint - Use 8-bit PNGs
- dillerdesign belatedPNG (JavaScript+VML)
- Dean Edwards’s IE7.js and IE8.js fixes this issue (for specially-named .PNG files, for performance reasons), and other IE 5.5, 6, and 7 CSS incompatibilities as well.
- 7.0 and below cannot combine 8-bit alpha transparency AND element opacity (CSS - filter: Alpha(opacity=xx)) without filling partially transparent sections with black.[33]
- All versions have inconsistent/broken gamma support.[22]
- All versions have no color-correction support.[22]
Operating systems support for PNG icons
PNG icons have been supported in most distributions of Linux since at least 1999, in desktop environments such as GNOME.[34] In 2006, PNG icons were introduced into Microsoft Windows, with the release of Windows Vista.[35] PNG icons are supported in Mac OS X as well. Another operating system to include 3rd party PNG icons support is AmigaOS 3/4 (and its clones MorphOS and AROS Research Operating System).
File size and optimization software
PNG file size can vary significantly depending on how it is encoded and compressed; this is discussed and a number of tips are given in PNG: The Definitive Guide.[17]
Compared to GIF
Compared to GIF files, a PNG file with the same information (256 colors, no ancillary chunks/metadata), compressed by a good compressor will usually be smaller than GIF, though lack of agreed data sets make controlled comparison impossible.[17] Depending on the file and the compressor, PNG may range from somewhat smaller (10%) to significantly smaller (50%) to somewhat larger (5%), but is rarely significantly larger.[17]
This is attributed to the performance of PNG's DEFLATE compared to GIF's LZW, and because the added precompression layer of PNG's predictive filters take account of the 2-dimensional image structure to further compress files—as filtered data encodes differences between pixels, they will tend to cluster closer to 0, rather than being spread across all possible values, and thus be more easily compressed by DEFLATE.[17]
However, PNG is much more flexible than GIF, and thus PNG files can potentially be much larger than GIF files, because they can include much more information, and may be poorly compressed.
File size factors
PNG files vary in size due to a number of factors:
- color depth
- Color depth can range from 1–64 bits per pixel.
- ancillary chunks
- PNG supports much metadata—this may be useful for edition, but unnecessary for viewing, as on websites.
- interlacing
- As each pass of the Adam7 algorithm is separately filtered, this can increase file size.[17]
- filter
- As a precompression stage, each line is filtered by a predictive filter, which can change from line to line. As the ultimate DEFLATE step operators on the whole image's filtered data, one cannot optimize this row-by-row; the choice of filter for each row is thus potentially very variable, though heuristics exist.
- compression
- With addition computation, DEFLATE compressors can produce smaller files.
There is thus a filesize trade-off between high color depth, maximal metadata (including color space information, together with information that does not affect display), interlacing, and speed of compression, which all yield large files, with lower color depth, fewer or no ancillary chunks, no interlacing, and tuned but computationally intensive filtering and compression. For different purposes one will choose different trade-offs—a maximal file may be best for archiving and edition, while a stripped down file may be best for use on a website, and similarly fast but poor compression is preferred when repeatedly editing and saving a file, while slow but high compression is preferred when a file is stable: when archiving or posting. Interlacing is a trade-off—it dramatically speeds up early rendering of large files (improves latency), but may increase file size (decrease throughput) for little gain, particularly for small files.[17]
Image editing software
Image editing software varies in its treatment of PNGs.
Because GIF is limited to 256 colors, image editors must automatically reduce the color depth when saving an image in GIF format. Often, when people save the same truecolor image as PNG and GIF, they see that the GIF is smaller, and do not realize that this is due to the color depth reduction, and that it is possible to create a 256-color PNG that has identical quality to the GIF with a smaller file size. Further, some tools may automatically create PNG files as 24-bit, even if the source image is 8-bit, bloating the file.[17] This leads to the misconception that PNG files are larger than equivalent GIF files.
Some versions of Adobe Photoshop, CorelDRAW and MS Paint provide poor PNG compression effort, further fueling the idea that PNG is larger than GIF. Many graphics programs (such as Apple's Preview software) save PNGs with large amounts of metadata and color-correction data that are generally unnecessary for Web viewing. Unoptimized PNG files from Adobe Fireworks are also notorious for this.
Adobe Photoshop's performance on PNG files has improved in the CS Suite when using the Save For Web feature (which also allows explicit PNG/8 use).
Optimizing tools
Various tools are available for optimizing PNG files; they do this by:
- (optionally) removing ancillary chunks,
- reducing color depth—either:
- use a palette (instead of RGB) if the image has 256 or fewer colors,
- use a smaller palette, if image has 2, 4, or 16 colors, or
- (optionally) lossy discard some of the data in the original image,
- optimizing line-by-line filter choice, and
- optimizing DEFLATE compression.
As some tools are PNG-specific, while others only optimize DEFLATE, in general one must use a combination of 2 tools in sequence for optimal compression—one which optimizes filters (and removes ancillary chunks), one which optimizes DEFLATE. Most commonly, OptiPNG is used for the first (non-DEFLATE) step, and either of AdvanceCOMP or PNGOUT is used for the DEFLATE step.
Ancillary chunk removal
For removing ancillary chunks, pngcrush and PNGOUT have the ability to remove all color correction data from PNG files (gamma, white balance, ICC color profile, standard RGB color profile). This often results in much smaller file sizes. The following command line options achieve this with pngcrush:
pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB InputFile.png OutputFile.png
Filter optimization
For optimizing filters, OptiPNG and pngcrush are both open source software optimizers that run from a Unix command line or a Windows Command Prompt, and effectively reduce the size of PNG files. OptiPNG was based on pngcrush and effectively supersedes it, by iterating over a wider range of compression parameters and performing trials in memory for faster execution.[36]
DEFLATE optimization
AdvanceCOMP advdef and Ken Silverman's PNGOUT employ DEFLATE compression algorithms that are more exhaustive and produce smaller files than the reference implementation, zlib, that is used by the other compressors.
Wrapper tools
Wrapper tools that simplify this workflow include: ImageOptim, a GUI front-end for Mac OS X; imgopt, a command-line shell script that also losslessly optimizes JPEG images; and Smush.it, an image-optimizing web service.
The littleutils are another open-source package, containing a wrapper script called opt-png that uses pngcrush and a variant of pngrewrite to reduce bit-depth when possible. Perl scripts might wish to employ Image-Pngslimmer which allows some dynamic optimization. The current version of IrfanView can use PNGOUT as an external plug-in, obviating the need for a separate compressor.
Icon optimization
Since Windows Vista icons may contain PNG subimages, the optimizations can be applied to them as well. At least one icon editor, Pixelformer, is able to perform a special optimization pass while saving ICO files, thereby reducing their sizes.
See also
- Comparison of graphics file formats
- Image editing
- Computer graphics, including:
- Comparison of layout engines (graphics)
- Related graphics file formats
- JPEG Network Graphics (JNG)
- Multiple-image Network Graphics (MNG)
- APNG Animated PNG
- Similar file formats
- Graphics Interchange Format (GIF)
- X PixMap for portable icons
- Image file formats
- libpng
- List of computer standards
References
- ↑ History of PNG
- ↑ GIF, JPEG or PNG?
- ↑ Thoughts on a GIF-replacement file format
- ↑ PNG (Portable Network Graphics) Specification, Version 1.1–12. Appendix: Rationale
- ↑ "Portable Network Graphics (PNG) Specification (Second Edition) Information technology — Computer graphics and image processing — Portable Network Graphics (PNG): Functional specification. ISO/IEC 15948:2003 (E) W3C Recommendation 10 November 2003". http://www.libpng.org/pub/png/spec/iso/index-object.html#11iCCP.
- ↑ Portable Network Graphics (PNG) Specification (Second Edition): 11.2.2 IHDR Image header.
- ↑ libpng, png.h; masks are prefixed by PNG_COLOR_MASK_ which is dropped here for legibility.
- ↑ Portable Network Graphics (PNG) Specification (Second Edition): 9 Filtering
- ↑ "Filter Algorithms". PNG Specification. http://www.libpng.org/pub/png/spec/1.2/PNG-Filters.html.
- ↑ Paeth, A.W., "Image File Compression Made Easy", in Graphics Gems II, James Arvo, editor. Academic Press, San Diego, 1991. ISBN 0-12-064480-0.
- ↑ Crocker, Lee Daniel (July 1995). "PNG: The Portable Network Graphic Format". Dr. Dobb's Journal 20 (7): 36–44. http://www.ddj.com/architect/184409587?pgno=4.
- ↑ Introduction to PNG - nuwen.net
- ↑ Opera Desktop Team: Post-Alpha Opera 9.5 Release
- ↑ "VOTE FAILED: APNG 20070405a". 2007-04-20. http://sourceforge.net/mailarchive/message.php?msg_name=3.0.6.32.20070420132821.012dd8e8%40mail.comcast.net.
- ↑ Comparison of animated PNG format proposals
- ↑ A Basic Introduction to PNG Features
- ↑ 17.0 17.1 17.2 17.3 17.4 17.5 17.6 17.7 Chapter 9. Compression and Filtering, in PNG: The Definitive Guide
- ↑ Internet Explorer crashes when previewing an HTML document – Adobe TechNote
- ↑ "Use of PNG Images to Display Data". Oregon Water Science Center. 16 February 2006. http://oregon.usgs.gov/png_images.html.
- ↑ "Why There Are No GIF files on GNU Web Pages". GNU Operating System. 16 December 2008. http://www.gnu.org/philosophy/gif.html.
- ↑ "PNG Fact Sheet". World Wide Web Consortium. 7 October 1996. http://www.w3.org/Press/PNG-fact.html.
- ↑ 22.0 22.1 22.2 22.3 22.4 "Browsers with PNG Support". 14 March 2009. http://www.libpng.org/pub/png/pngapbr.html#msie-win-unix.
- ↑ "Windows Explorer Crashes When I Click on a Fireworks PNG File to View It". Adobe Systems. 5 June 2007. http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_13501&sliceId=2.
- ↑ "Unable to view .png images with Internet Explorer 4.0". Microsoft Knowledge Base. http://support.microsoft.com/kb/174946.
- ↑ "PNG Graphics That Are Inside of an Object Tag Print as a Negative Image". Microsoft Knowledge Base. http://support.microsoft.com/kb/257081.
- ↑ "PNG Images Are Printed Improperly in Internet Explorer 5.01". Microsoft Knowledge Base. http://support.microsoft.com/kb/255239.
- ↑ 27.0 27.1 "PNG Frequently Asked Questions". http://www.libpng.org/pub/png/pngfaq.html#msie.
- ↑ "You cannot view some PNG images in Internet Explorer 6". Microsoft Knowledge Base. http://support.microsoft.com/kb/822071.
- ↑ "You cannot use Internet Explorer 6 to open a PNG file that contains one or more zero-length IDAT chunks". Microsoft Knowledge Base. http://support.microsoft.com/kb/897242.
- ↑ "PhD: Portable Network Graphics Lose Transparency in Web Browser". Microsoft Knowledge Base. http://support.microsoft.com/kb/265221.
- ↑ "PNG Files Do Not Show Transparency in Internet Explorer". Microsoft Knowledge Base. http://support.microsoft.com/kb/294714.
- ↑ Lovitt, Michael (21 December 2002). "Cross-Browser Variable Opacity with PNG: A Real Solution". A List Apart. http://www.alistapart.com/articles/pngopacity/.
- ↑ "IE7 alpha transparent PNG + opacity". Channel 9. http://channel9.msdn.com/forums/TechOff/257324-IE7-alpha-transparent-PNG--opacity/.
- ↑ Fulbright, Michael (1999). "GNOME 1.0 Library Roadmap". http://developer.gnome.org/doc/whitepapers/libroadmap/.
- ↑ "Windows Vista - Icons". OOne. 2007. http://www.oone.googlepages.com/windows_vista_icons.htm. Retrieved 2007-11-12.
- ↑ Truţa, Cosmin. "A guide to PNG optimization".
External links
libpng.org
- PNG Home Site
- libpng Home Page
- The Story of PNG by Greg Roelofs
- PNG: The Definitive Guide (Online Version) by Greg Roelofs
W3C
Others
- An introduction to the PNG image format—Including test images, file editing tips, and reviews of PNG image tools for Windows.
- RFC 2083
- PNG transparency test
- "The Lonely Planet"—PNG-based animation for web browsers
- More information about PNG color correction
- The GD-library to generate dynamic PNG-files with PHP
- A guide to PNG optimization
- PNG Adam7 interlacing
- lodepng: by Lode Vandevenne. An open source PNG encoder and decoder for C and C++ with no external dependencies.