RSS Feeds 
Feed Comment “The type of a PNG image is defined in the IHDR image header. The image has a certain bit depth, up to 16 bits per sample, and a certain color type, from Grayscale to RGB+Alpha. If two PNG files of different types represent exactly the same image, each file can be regarded as a lossless transformation of the other. A lossless transformation can reduce the uncompressed stream, and such a transformation is named image reduction. In most cases, image reductions are capable of reducing the compressed stream (which is, in fact, our interest), as an indirect effect of reducing the size of the compressor’s input.
The possible image reductions are:
- Bit depth reduction
The bit depth can be reduced to a minimum value that is acceptable for all samples. For example, if all sample values in a 16-bit image have the form (256+1)*n, (e.g. #0000, #2323, #FFFF), then the bit depth can be reduced to 8, and the new sample values will become n, (e.g. #00, #23, #FF).
- Color type reduction
- If an RGB image has 256 distinct colors or less, it can be reencoded as a Palette image.
- If an RGB or Palette image has only gray pixels, it can be reencoded as Grayscale.
A color type reduction can also enable a bit depth reduction.
- Color palette reduction
If the color palette contains redundant entries (i.e. duplicate entries that indicate the same RGB value) or sterile entries (i.e. entries that do not have a correspondent in the raw pixel data), these entries can be removed.
A color palette reduction can also enable a bit depth reduction.
- Alpha channel reduction
If all pixels in a Grayscale+Alpha or an RGB+Alpha image are fully opaque (i.e. all alpha components are equal to 2^bitdepth-1), or if the transparency information can be stored entirely in a (much cheaper) tRNS chunk, the alpha channel can be stripped.
There are, however, a few cases when some image type reductions do not necessarily lead to the reduction of the compressed stream. The PNG-Tech site contains experimental analyses of these possibilities; for example, see the article 8 bits per pixel in paletted images.
Interlacing, useful for a faster, progressive rendering, is another component of the PNG image type that affects compression. In an interlaced stream, the samples corresponding to neighboring pixels are stored far away, hence the data in it is less correlated and less compressible. Unlike JPEG, where interlacing may improve the compression slightly, the PNG interlacing degrades the compression significantly.”
Optimizing image data
Photoshop’s Save for Web feature does a reasonable optimization, but it’s far from perfect. We can improve on it.
If you’ve been in web development for any length of time, you’ll probably have heard of command line tools to optimize PNG image data. The two most popular are PNGout and PNGcrush. PNGout can produce slightly smaller files than PNGcrush but at the expense of speed: it’s far, far slower. As I opt for speed rather than the absolute best compression, I use PNGcrush. (Note that neither tool will change the original format of the file, so you can’t use them to create an 8-bit image from a 24-bit source. Make sure your PNGs are in the correct format before you start to play with these tools.)
Download PNGcrush and copy the executable into your Windows XP directory (sorry to non-Windows or Vista users, XP is all I use). I also recommend that you install the Command prompt here powertoy–or you can create the hack manually. This allows you to open a command prompt at any folder, by right clicking its name in Windows Explorer.
Once you’ve done this, open a command line at the folder where your PNG image resides and type:
pngcrush infile.png outfile.png
This will create a new optimised file, but only if the output is smaller than the input. Note that the new file might not be the smallest it could be as by default PNGcrush only tries a few compression methods. If you want to get the absolute best compression, you can ask PNGcrush to try all its methods, but this can take a very long time and doesn’t always yield much of a benefit. To do so, add the -brute option:
pngcrush -brute infile.png outfile.png
If you want to optimize all your images, you can do it in batch by creating a new file for every input file:
pngcrush -e -crushed *.png
This will create new, optimized files with the original filename plus the extra suffix “-crushed”. Alternatively, you can put the crushed images into a sub folder instead which will leave them with their original filename and won’t overwrite the original files:
pngcrush -d crushed-files *.png
Using any of these methods should have given you some smaller files.
Using PNGCrusher
I like to make sure that my PNGs are as well-compressed as possible. There’s a great CLI tool to do that, called pngcrush OptiPNG.
To automate processing of PNG files with OptiPNG, I slapped the following code together, threw it through Platypus, and out came PNGCrusher.
PNGCrusher has a bad rating at VersionTracker because some people are clueless and don’t realize that some PNGs are already as compressed as they can get. Please help PNGCrusher by giving it a sane rating!
Usage notes
Just drag-and-drop PNG files onto PNGCrusher. OptiPNG will overwrite each file only if it was able to improve the compression rate.
If you drag a lot of files onto PNGCrusher, it may take a while to finish. Don’t move, delete, or rename the files in the meantime.
PNGCrusher is distributed under the GNU General Public License.
Creative Use of PNG Transparency in Web Design
The PNG image has been widely overlooked by the web design community—and mostly for good reason. Until recently, it hasn’t been possible to take full advantage of the format and have it work reliably in all browsers. But, with proper PNG support in Internet Explorer 7, and some handy JavaScript and CSS tricks to account for older browsers, we can use PNG images to greatly enhance our design vocabulary.
PNG
- Greater compression: For most images, PNG achieves a smaller file size than GIF.
- Greater color depths: PNG offers truecolor up to 48 bits, whereas GIF allows only 256-color palettes.
- Alpha-channel transparency: Whereas GIF offers only binary transparency, PNG allows for virtually unlimited transparency effects by enabling an alpha channel for transparency.
It’s worth mentioning that PNG does not allow for animation, as GIF does. There is a related standard called Multiple-image Network Graphics (MNG) that does allow both, but it is not widely supported by web browsers or imaging software.
PNG Transparency for Internet Explorer (IE6 and Beyond)
If you browse to a Web page that contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may appear to be gray rather than transparent.
Web developers who work with PNG files can use the AlphaImageLoader filter, as demonstrated in the following example:
<html>
<head></head>
<body bgColor="blue">
<!-- This DIV is the target container for the image. -->
<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.png', sizingMethod='scale');" >
</DIV>
</body>
</html>Like GIFs and JPEGs, PNG images are ideal for web use. Like GIFs, the PNG is great for displaying small images with few colors, like logos and icons. Also, PNGs sport a few advantages over GIF images. Most notably, they support alpha transparency.
What is alpha-transparency? GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255. Below is an image with layers of varying transparency:
PNGs thus have the potential for creating some interesting effects on a web page, like translucent background images and drop-shadows. But despite their advantages over GIFS, PNGs aren’t nearly as popular as GIFs web design, primarily because of the impression that PNGs don’t enjoy wide browser support.
This view on PNGs is a bit of a misconception.
While Internet Explorer for Windows 6 (IE6) and previous versions of IE don’t support PNGs’ alpha-transparency feature, all popular browsers can display PNGs.
While IE6- doesn’t explicitly support alpha-transparency out-of-the-box, if you will, there is a workaround that ensures PNG’s cross-browser compatibility.
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. 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.
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.
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.
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.
Leave Your Comments Below