— Pixels Commander

[:ru]Оптимизация PNG для онлайн игр и мобильных приложений. Важна ли она?[:en]PNG optimisation for online games and mobile applications. Is it important?[:]

[:ru]PNG (от англ. Portable Network Graphics ) давно стал самым популярным форматом для хранения статической графики. В крупных онлайн проектах пользователи имеют доступ к десяткам мегабайт PNG ресурсов. А обьем общемирового траффика в этом формате сложно оценить. Так же сложно оценить сколько террабайт не пришлось гонять по сети, если бы разработчики и дизайнеры правильно оптимизировали PNG.
У вас перенагружены сервера статики? Ваши пользователи жалуются на медленную загрузку приложения? Этот пост поможет…

[:en]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…

[:][:ru]

Откуда берутся PNGшки?

Графику зачастую рисуют художники которые думать не думают, что их PNG загружают сервера компании, увеличивают обьем приложений и заставляют клиента ждать при загрузке. Большинство ограничивается экспортом графики из фотошопа или иллюстратора которые не оптимизируют файлы при сохранении.

В то же время после оптимизации размер файла уменьшается на 30-1000%… Это не опечатка, иногда размер PNG можно уменьшить в 10 раз.

Сколько весит килограмм PNG?

Думаю вы согласитесь — пользователь игры типа «ферма» легко скачивает 5 мегабайт PNG в день. При 500 000 активных юзеров это 2,5 террабайта. Тут и 5% сжатия покажется не таким бесполезным делом…

Как уменьшить размер PNG?

В сети можно найти огромное количество методик, приведу лишь две самые эффективные

1.Используем утилиту OptiPNG — эта маленькая штучка без потери качества жмет фотошоповские пнг до 10 раз и просто маст юз для подгружаемой графики — http://optipng.sourceforge.net.
Просто перетащите файлы на программку и наслаждайтесь магией.

2.Постеризация изображения в фотошопе(Levels: 40) уменьшает размер PNG на 20-30%, выигрываем 500 гигабайт траффика в день и несколько недель жизни накопителю сервера. Для этого в фотошопе нажмите на иконку Layers palette и выберите Posterize. Метод незначительно уменьшает качество изображения, однако это незаметно невооруженным глазом и право на жизнь имеет.

Детали для флеш — проектов

Как только вы вставляете PNG во FLA или Embed`ите картинки в проект — за сжатие картинок начинает отвечать компилятор и он с этим неплохо справляется. Эксперименты показали что при внедрении PNG в SWF файл обеспечивается оптимальный уровень сжатия и в дальнейшей доводке не нуждается. Хотя вы всегда можете подключать ресурсы в виде ByteArray, предварительно использовав для сжатия ваши самые любимые, самые изощренные методы.

UPDATE, спустя 3 месяца

Вот что пишет Apple в руководстве по изготовлению баннеров для мобильной рекламы iAd.

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.

Сходство советов поражает, радует.[:en]

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:

1. 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.
2. 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![:]