Оптимизация PNG для онлайн игр и мобильных приложений. Важна ли она?
PNG (от англ. Portable Network Graphics ) давно стал самым популярным форматом для хранения статической графики. В крупных онлайн проектах пользователи имеют доступ к десяткам мегабайт PNG ресурсов. А обьем общемирового траффика в этом формате сложно оценить. Так же сложно оценить сколько террабайт не пришлось гонять по сети, если бы разработчики и дизайнеры правильно оптимизировали PNG.
У вас перенагружены сервера статики? Ваши пользователи жалуются на медленную загрузку приложения? Этот пост поможет…
Откуда берутся 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.
Сходство советов поражает, радует.