PNG Images Optimization: Tips, Hacks And Software
Depending on the web images type and destination, the commonly used file formats are PNG and JPEG. Regarding the web design area, PNG image file format is widely used in the structure of sites templates, due to its major advantages, as compared with GIF and JPEG images. The main advantage of PNG image file is represented by the possibility of achieving an optimal ratio between image quality and file size, because it permits you to display an image with the highest possible quality, but corresponding to a lower file size.
For web usage, PNG images are superior to GIF images through many attributes, such as the support for true color images (a higher color depth), a better lossless data compression algorithm (with a better quality, PNG images are up to 30% lower in file size than the corresponding GIF files), progressive display through two-dimensional interlacing, variable transparency, gamma correction and more.
The modern image processing software applications allow you to optimize various parameters of PNG images manually or automatically. The optimization of PNG images used on web sites will result in higher pages loading speed, as well as savings of bandwidth consumption.
The following web resources describe practical tips, tricks and hacks for PNG images optimization, suitable to be used both by beginners, as well as advanced webmasters. Most of the PNG images optimization recipes are implemented based on Adobe Photoshop, but some of them could be also tried with other image processing and optimization software.
Clever PNG Optimization Techniques
Clever PNG Optimization Techniques article was published in Smashing Magazine by Sergey Chikuyonok, a Russian front-end web-developer and writer with a big passion on optimization: from images and JavaScript effects to working process and time-savings on coding. This article will show you interesting methods for PNG images optimization in Adobe Photoshop:
”As a web designer you might be already familiar with the PNG image format which offers a full-featured transparency. It’s a lossless, robust, very good replacement of the elder GIF image format. As a Photoshop (or any other image editor) user you might think that there is not that many options for PNG optimization, especially for truecolor PNG’s (PNG-24 in Photoshop), which doesn’t have any. Some of you may even think that this format is “unoptimizable”. Well, in this post we’ll try to debunk this myth.” (Read the entire article)
Speed Up Your Website with Better Image Optimization in Photoshop
This article explains the details of PNG, JPEG and GIF compression characteristics and how to optimize these image files formats for web usage with Photoshop’s Save For Web and Devices feature:
“Keeping image size to a minimum is an important part of keeping your sites visual weight low. By understanding a bit about image compression, and how to optimize images for web, it’s possible to significantly cut down on image size while improving image quality. Using Photoshop’s Save for Web Feature, it’s possible to drastically decrease file sizes while keeping decent image quality, allowing for faster downloading online.”
A guide to PNG optimization
“A guide to PNG optimization” provides a complete insight about the features of PNG file format and PNG compression, the factors that affect the PNG file size and a list of PNG (lossless) free optimization programs.
How to reduce colors for saving a JPEG as PNG
“How to reduce colors for saving a JPEG as PNG” article explains how to optimally convert a JPEG image into a PNG file:
“JPEG is good for images where the color changes fluidly throughout the image (e.g., a photograph), whereas PNG is good for images where there are relatively few colors and that should be uniform throughout (e.g., a drawing of a flag, a chart, or a map; note that sometimes SVG is better). Just automatically converting to PNG will almost never produce a good image. It is likely that the resulting file will be even larger than the original JPEG, and will maintain its poor quality.”
XAT.COM Image Optimizer
“Image Optimizer is designed to to prepare the best possible JPEG, GIF and PNG image files for the web. File size reductions of up to 50% or often much more are possible, which can considerably decrease web page download times, reduce server load, reduce bandwidth charges and save on disk space.” You will be able to optimize PNG image such that the final image file size is with 30% lower than the original image, but at the same visual quality. The optimization process is performed automatically.
Related Articles
