PNG optimisation for online games and mobile applications. Is it important?
PNG (Portable Network Graphics ) is most popular format for static graphics. Large part of interactive online projects send to user tens of megabytes in this format. And it`s hard to understand global amount of PNG traffic. Also it`s hard to understand how much of it would be not needed if right optimization of PNG images would be done. Your static content servers are overloaded? Users report about slow loading? This post would help…
Where do PNG files come from?
Assets are drawn by artists and designers. This guys love what they do but they don`t warn about delicate moments of development and some of them are filesize and ways of it optimization. Ofcourse in ideal world they would understand that it`s important to accelerate application`s loading as it`s possible. But in real world you have to teach them =)
May be you think that it`s not important enough to spend some time for PNG optimization, but belive me it`s so.
Is there any reason to optimize?
Usually optimization can give us from 20% to 1000% of filesize decreasing.
Just imagine that you develop farm game… Ordinal user of your application downloads 5 mb of PNG assets and you have 1 million DAO.
Even at 20% of optimization saving effect would be about 1 terrabyte per month. I think this reason is enough to start optimize PNG.
Effective ways of optimization
There are a lot of PNG optimisation methodics in the network, but i`ll describe two of them that are most effective:
- Optimization with OptiPNG utility that can be downloaded here – http://optipng.sourceforge.net.. This small and free software is a looseless way to compress your PNG. Just drag and drop files to utility.
- Posterization in Photoshop(Levels: 40) can decrease PNG filesize by 20-30% . Push “Layers palette” button in Photoshop and choose “Posterize”.
Details for Flash – projects
As soon as you insert PNG to flash project you have not to care of optimization. Flash IDE and Flex SDK have rather good optimization tools and there is no any advantage in additional optimization.
But ofcourse you can compress files any way you like and embed them into flash/flex project as byte array asset.
UPDATE, three monthes later
That is text from Apple iAd design guide:
If you need to use PNG images, you should use an image-optimizing utility (for example, PNGCrush) to compress them as much as possible.
You can further reduce a PNG image’s file size by applying a slight posterization effect to it. Doing so reduces the file’s color palette by converting similar colors that are contiguous. You should not posterize images with a gradient or images that need to match an exact color.
It seems amazing how this advice is close to my one!