• июня 10, 2009

    Пакетная оптимизация PNG

    В последнее время все чаще и чаще слышу советы запускать какую-нибудь утилитку оптимизации графики вроде OptiPNG на всей папке с картинками, чтобы не запариваться и одним махом ужать все файлы. Например, вот так:

    optipng -o5 *.png

    Создают даже целые сервисы вроде smush.it.

    Так вот, лично я никогда не пользовался такими советами. И пока не рекомендую делать этого ребятам, которые действительно хотят качественно оптимизировать графику. По одной простой причине: «меньше» не всегда значит «лучше».

    Что бы не говорили злые языки, но доля IE6 на рынке все еще слишком велика, чтобы сбрасывать его со счетов. Именно у этого браузера больше всего проблем с отображением разных вариаций PNG. В частности, полноцветный полупрозрачный PNG (PNG24 в терминологии фотошопа) он просто так не покажет, нужно использовать фильтр AlphaImageLoader или VML. А у полупрозрачных индексированных PNG покажет только непрозрачные пиксели. Из этого следует вывод, что нужно контролировать оптимизацию каждого файла.

    Рассмотрим несколько примеров. Для начала возьмем полупрозрачную плашку:

    …и вызовем на ней OptiPNG:

    optipng -o5 mate.png

    Он нам скажет, что самым оптимальным способом хранения этого изображения будет 8-битная палитра. Но так как на этой картинке нет ни одного непрозрачного пикселя, то в IE6 не отобразится вообще ничего. Поэтому для данного изображения нужно отключить оптимизацию по цвету:

    optipng -o5 -nc mate.png

    Рассмотрим второй пример:

    При попытке оптимизировать этот файл OptiPNG преобразует изображение в 8-битную палитру, однако это будет не оптимальный способ хранения изображения и вы увидите сообщение, что файл уже оптимизирован. Но я готов пожертвовать «гладкими» краями в IE6, лишь бы не извращаться с фильтрами и VML, потому что этот файл будет использоваться 50 раз на странице. Кто не в курсе: AlphaImageLoader жрет очень много памяти и процессорного времени, VML менее требователен, но все равно больше, чем обычная картинка или фон. Поэтому в данном случае нужно форсировать преобразование палитры:

    optipng -o5 -force corner.png

    Еще одним плюсом ручной оптимизации для меня является соответствие моих ожиданий действительности. Очень часто при сохранении черно-белых PNG я забывают выставить им режим цветовой Grayscale, а лог OptiPNG постоянно мне об этом напоминает, когда процент сжатия меньше 20. Кстати, smush.it не умеет преобразовывать цветовую палитру в черно-белую.

    Метки: , ,

    • 12 комментариев

    1. denisx
      10 июня 2009

      «создам-ка я робота, чтобы создавал за меня роботов» 🙂

    2. pepelsbey
      10 июня 2009

      А что насчёт ImageOptim? 😉

      http://pornel.net/imageoptim/en

    3. Сергей Чикуенок
      10 июня 2009

      Идея с ImageOptim очень хороша, но мне, как гику оптимизации, не хватает возможности задать параметры оптимизации (что описал в посте) и лога — что именно было сделано с изображением.

    4. Артём Сапегин
      10 июня 2009

      Менее гикнутым 🙂 можно пользоваться «аналогом» ImageOptim’а для винды: http://sapegin.ru/picturebeaver

    5. Q-Zma
      10 июня 2009

      Спасибо за упоминание OptiPNG, раньше юзал Pngnq, частенько вылезали косячки всякие мелкие, OptiPNG попробовал — вроде бы пока не вылезло ни одного.

    6. v3
      17 июня 2009

      Для Windows есть довольно неплохая http://brh.numbera.com/software/pnggauntlet/ , с GUI 🙂

      Т.к. обычно я делаю всё же не сильно большие сайты, все проблемы файлов сразу видно на глаз — можно поправить сразу же. Впрочем, в случае жирных PNG всё равно без ручной чистки «невидимых пикселей» не обойтись, а у большинства выигрыш небольшой совсем.

    7. Дмитрий
      19 июня 2009

      Кстати немаловажный момент, при сохраненим png в Image Magick (например нужно сделать thumb), по умолчанию устанавиливается палитра изображения в 16 бит. При попытке обработать такой файл, optipng и другие обработчики не дадут никакого результата.

      После каждой манипуляции в ImageMagick нужно принудительно выставлять глубину в 8 бит, сохранять и потом использовать обработчики. Ну и размер в 8бит будет почти в два раза меньше.

    8. Stoyan
      8 июля 2009

      Спасибо, Сергей!

      Я только хотил упоменать (извини меня для плохой язьк 🙂 ) что смуш.ит пользвает командной «тул» pngcrush для оптимизация ПНГ.

      $ pngcrush -rem alla -brute in.png out.png

      —

      And great job on the JPEG post for Smashing Magazine!

      Best,
      Stoyan

    9. Сергей Чикуенок
      8 июля 2009

      Thanks, Stoyan 🙂 And I do remember that smush.it uses pngcrush. Maybe you should switch to optipng instead (I know it’s slower)? And add option to preserve image type (like «truecolor with transparency») for IE6.

    10. Denis
      30 июля 2009

      Не знаю как все, а я не могу жить без проги под названием Wiseval Photophant. Она во первых бесплатная, простая, может накладывать водные знаки, уменьшать размер изображения, и самое главное,- пакетно сжимать из одного формата в другой.

    11. Tosha
      2 декабря 2009

      Здравствуйте Сергей.
      В первую очередь хотелось вас поблагодарить за то что вы делитесь столь подробной и нужной информацией с читателями вашего блога. Мне очень понравилась статья «Фотошоп для веб-разработчика. Кнопочки» Давно очень хотел проделать подобное но познания в фотошопе не позволяли это сделать, а вам большое спасибо за проделанную работу.
      А теперь по теме 🙂
      Вот недавно прочел этот пост и начал пробовать использовать разные варианты оптимизации картинок, и нашел вот эту программку http://x128.ho.ua/color-quantizer.html , испробовав немного ее я был очень удивлен как неплохо она сжимает. Хотелось бы у вас узнать, как вы оцениваете ее работу?

    12. Сергей Чикуенок
      10 декабря 2009

      Tosha, оценить не могу, так как работаю на Маке. Но лично я давно ищу программу, которая могла бы снижать количество цветов до заданного значения (больше 256), что и делает эта программа.