• Руководство по оптимизации PNG

    Специально для Smashing Magazine написал руководство по оптимизации PNG (вернее, наоборот: руководство по оптимизации изображений для PNG). По сути, это собранные вместе статьи из Техногрета и моего блога, которые были немного переосмыслены, дополнены, упрощены и переведены на английский язык.

    Так как статья получилась довольно большой, ее разделили на две части. Вторая часть выйдет через неделю. Комментарии, вопросы и пожелания можно оставлять здесь.

  • 21 комментарий

    1. 15 июля 2009

      Great job man! It really pleasures me whenever original Russian content is being translated to English. Especially, when it gets published by a popular online magazine :)

      Читал оригиналы на русском. Прочитал перевод. Качественно. Комментарии к статье радуют. Берёт гордость за нашего брата! Хотя там, в комментариях, у кого-то проблемы с отображением примера в FF 3.5 на OS X ;)

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

      Оно везде не работало: там неправильную картинку поставили в качестве фона. Сейчас все ОК.

    3. 15 июля 2009

      Наверно ваш пост про PNG самый полезный по этой тематике во всем рунете теперь и в com зоне тоже, Спасибо вам за него!!!

      Sergey Chikuyonok is a Russian front-end web-developer and writer with a big passion on optimization: from images and JavaScript effects to working process and time-savings on coding.
      Ох аж гордость берет за РОССИЮ матушку =)

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

      Я вообще-то гражданин Беларуси, но работаю в Москве :)

    5. 15 июля 2009

      Не знаю, в моем понимании, до си пор, все страны СНГ == Россия =)

    6. Павел
      15 июля 2009

      Поздравляю! Сложно было опубликоваться?

    7. 15 июля 2009

      >> Я вообще-то гражданин Беларуси, но работаю в Москве
      Ахаха, это пять!!!
      Ох, ах гордость берет за БЕЛАРУСЬ девочку =)

      П. С. Александр Григорьевич одобряет этот пост.

    8. Vii
      16 июля 2009

      Жаль только, что одни из немногих действительно полезных статей в en-webdev-net’е (в том числе и на SmashingMagazine) которые мне попадаются в последнее время — это перевод (адаптация) уже не нового (но еще ох как актуального :) ) материала на русском.

      More info… © Johnny 5 :)

    9. Stern87
      16 июля 2009

      А можно именно эту статью но всё же на русском, чтобы и “немного переосмыслены, дополнены, упрощены” — но на русском? ;)

    10. 16 июля 2009

      Отличная статья, ждем второй части

      “Russian iPod ancestor” – а действительно похож (:

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

      Сложно было опубликоваться?

      Мне написал главный редактор этого ресурса: он как-то попал на мой блог и его заинтересовала статья про спрайты, спросил, могу ли я перевести ее на английский. Слово за слово, я показал ему старые статьи про JPEG и PNG, которые уже были частично переведены. Они ему тоже понравились, так и опубликовался.

      Статья на русском будет, когда руки до нее дойдут (или кто-нибудь раньше меня ее переведет :)

    12. 16 июля 2009

      Серега, ты очень крут :) Поздравляю с выходом на международный рынок :)

    13. Иван Шорников
      16 июля 2009

      Серега, поздравляю с повышением крутости :)

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

      Спасибо :)

    15. 17 июля 2009

      Сергей, спасибо за статью! Так ты тоже из Беларуси? :) Бывает же, я родом из Минска… :)

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

      Ого, здорово :) Значит, Smashing Magazine, по сути — белорусский проект? :)

      PS: кто не знает, Виталий и есть главный редактор SM

    17. pJ
      11 августа 2009

      А как же чудесный оптимизатор png г-на x128?
      Он ведь позволяет довольно простыми средствами сделать png весьма и весьма достойного качества.
      Обзор этого безобразия тут: http://pj2k.livejournal.com/1728.html

    18. Сергей Чикуенок
      11 августа 2009

      Про этот инструмент слышу впервые. Обратите внимание на следующие моменты (это первое, что мне бросилось в глаза):

      1. Картинка потемнела (в частности, фон стал темнее)
      2. Слишком пастеризованный в вашем тесте циферблат (сравните области между цифрам 6 и 7)

      В целом, чудес никаких нету, объем вашей картинки снизился вполне естественным образом за счет ухудшения изображения и другого набора цветов в палитре, которые дают другой результат сжатия. Да, интерфейс выглядит навороченнее, чем в фотошопе. А то, что там можно сделать больше 256 цветов — действительно круто, этого мне очень не хватает в фотошопе :) Была бы версия под Мак — с удовольствием пользовался.

    19. pJ
      11 августа 2009

      Разумеется, здесь идет речь лишь о перерасепределении палитры. Другими словами “куда бы нам засунуть ошибку, чтобы её не было видно?”.

      По замечаниям 1 и 2:

      1 – отмечу что как раз в вашем варианте фон неверного, слишком яркого цвета (омг, или там гамма записана в png?), а мой пример ближе к оригиналу.

      2 – исправляется двумя кликами колесика, в чём собственно сила CQ и есть. Постеризация у вас тоже наблюдается, только в других местах. :) Например, на гирьках и на темной полоске между цифрами 7 и 8 на циферблате.

      Версия под Мак, увы, врядле появится.

    20. pJ
      11 августа 2009

      Ох, забыл сказать: спасибо за статью! Статья мне оказалсь и интересна, и полезна. Особенно понравился трюк с разделением картинки на две составляющих – это весьма интересная техника.

    21. 31 декабря 2010

      Сапсибо за статью, искал на днях как можно оптимизировать шапку. Теперь она у меня весит не 260кб а всего 50. Спасибо автору. Очень полезная информация. Также те кто сидит на PNG попробуйте перейти на JPG. Значительно экономнее. А для сайта скорость загрузки это очень много!

    Комментировать

    Powered by Zen Coding