Web Design Land

Creativities are shown in design

Some Tips to Optimize PNG images

web design png imageMost of the web designers are aware of formatting the images in PNG format. The PNG stands for Portable Network Graphics. Compared to GIF image format, the PNG image format is tough, void of any losses and so serves as a good alternative for the GIF image format. If you think superficially, you may not be able to find the ways to optimize the PNG images. You need to go into the details of the PNG formatting for the optimization of PNG images which helps you to build well structure web design.

The data is saved by the PNG encoder in a typical way. Most of the tips for PNG optimization are based on the thorough study of the PNG encoder and some of them are as follows.

• The analysis of the image should be the first step for any optimization. This should be followed by selecting the most appropriate technique or a combination of techniques for effective optimization.

• The techniques used for optimizations should be used as a first step to develop other techniques applicable to the images that you want in the website or application. For this the designer needs to be creative.

• For images with low color, the designer should consider the PNG-24 better than PNG-8 because use of PNG-24 usually results in a file that is comparatively smaller than that resulting on the use of PNG-8.  When you want to save PNG images with low color but without transparency, it is always better to check as to which alternative, PNG-24 or PNG-8 results in a smaller file.

• The PNG image usually does not look the same in all the situations. The PNG image may look something in the Web browser and something else in the image editor. This is because of gAMA chunk. The gAMA chunk runs the gamma image. This gAMA chunk is housed in the PNG file. gAMA chunk can be got rid of by using the smush.it or TweakPNG

• The “special” type of PNG image is very special. Despite its unavailability  in the Photoshop, the Photoshop allows the designer to prepare this image in it. With the help of OptiPNG, convert this image and if the number of colors does not exceed 256, there is a default system because of which one can get a 8 bit palette from the image with true color. Applying different techniques for reduction in number of colors and reducing the details can consume a lot of time. To make thing easier the designer can use PNGNQ to transform the image in true color to a 256 palette. When using this tool the only drawback that one comes across is that he/she does not have much control over the consequences.

• The designer should use the “Save for Web” dialog for saving the PNG images and not use the   “Save As” dialog

• When some parts of the images are hardly visible and their visibility is not necessary the RGB data should be replaced. This will lead to reduction in detail.

• The designer should try to save in Grayscale and at the same time try to reduce the number of colors used.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: