Пользователь
0,0
рейтинг
27 августа 2011 в 19:00

Разработка → Оптимизация PNG и JPEG без потери качества. Часть 2

Здравствуй Хабр!
Вот и настало время второй, и, надеюсь, долгожданной части. Настоятель рекомендую ознакомится с первой частью, ибо без этого будет тяжело понять, о чем я буду писать. В этой части я отойду от теории к практике, а именно покажу небольшое проект для комплексной оптимизации изображений.


image

Image Catalyst — сборник программ для комплексной оптимизации/сжатии изображений формата PNG и JPEG без потери качества в рамках того же формата. Имеет смысл применять для ускорения загрузки элементов графики (в частности, спрайтов) веб-страничек.

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

Загрузить Image Catalyst 2.0 можно отсюда (только для windows).

Инструменты оптимизации PNG


Для комплексной оптимизации изображений формата PNG используются следующие приложения:
  • AdvDef (входит в состав AdvanceComp 1.15 от 01.11.2005);
  • CryoPNG от 23.10.2010;
  • DeflOpt 2.07 от 05.09.2007;
  • Defluff 0.3.2 от 07.04.2011;
  • TruePNG 0.3.2.5 от 07.06.2011;
  • PNGOut от 02.07.2011;
  • PNGWolf от 01.04.2011;
  • Zlib 1.2.5 от 19.04.2010.
Подробно об этих приложениях я рассказывал в первой части.

Инструменты оптимизации JPEG


Для комплексной оптимизации изображений формата JPEG используются следующие приложения:
  • Jhead 2.90 от 05.02.2010;
  • JPEGTran (входит в состав Libjpeg 8c от 16.01.2011).
Подробно об этих приложениях я также рассказывал в первой части.

Дополнительное ПО


На сегодняшний день используется также приложение — iniTool 1.20 от 07.02.2010.

Оптимизация PNG




Параметры оптимизации PNG

Поддерживаются оба метода отображения изображений в браузере при загрузке:
  • Non-interlaced — браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
  • Interlaced — до полной загрузки файла изображение в браузере отображается в низком разрешении. Чересстрочное отображение позволяет уменьшить субъективное время загрузки и показать пользователям, что изображение загружается, однако чересстрочное отображение также увеличивает размер файла.
Алгоритмы оптимизации PNG

Исходя из параметров оптимизации PNG были созданы следующие алгоритмы оптимизации:
  • Non-interlaced — использует Non-interlaced параметры оптимизации;
  • Interlaced — использует Interlaced параметры оптимизации;
  • Default — оптимизирует изображение, но при этом не изменяет параметр оптимизации.
Режимы оптимизации PNG:

В прошлой части, мы говорили, чем больше времени затрачивается на оптимизацию PNG, тем степень оптимизации выше, именно поэтому были разработаны несколько режимов оптимизации:
  • Fast — степень сжатия и скорость оптимизации достаточно высокая;
  • Normal — по сравнению с режимом Fast скорость оптимизации ниже в среднем в 3 раза, степень сжатия выше в среднем на 1,5%;
  • Xtreme — по сравнению с режимом Normal скорость оптимизации ниже в среднем в 4 раза, степень сжатия выше в среднем на 1%.
В некоторых случаях степень сжатия может быть выше на 10% и более.

Оптимизация JPEG




Параметры оптимизации JPEG

Поддерживаются два метода отображения изображений в браузере при загрузке:
  • Optimize — создается улучшенный файл JPEG с незначительно меньшим размером файла. Браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
  • Progressive — изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки, т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Internet Explorer, включая восьмую версию, не поддерживает прогрессивную загрузку JPEG, он его показывает только после полной загрузки файла, что сильно отличается от поведения «традиционного» JPEG, когда изображение отображается сверху вниз, по мере загрузки.
Алгоритмы оптимизации JPEG

Исходя из параметров оптимизации JPEG были созданы следующие алгоритмы оптимизации:
  • Optimize — использует Optimize параметр оптимизации;
  • Progressive — использует Progressive параметр оптимизации;
  • Maximum — сравниваются по размеру изображения, полученные Optimize и Progressive методами оптимизации, и выбирается файл с наименьшим размером, имеет смысл использовать, если размер изображений меньше 10 кбайт, в остальных случаях метод оптимизации Progressive практически всегда превосходит метод Optimize;
  • Default — оптимизирует изображение, но при этом не изменяет параметр оптимизации.

Инструменты оптимизации

  • По умолчанию количество одновременных потоков обработки изображений PNG равно количеству ядер в процессоре, если Вы хотите изменить количество одновременных потоков, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции. Не рекомендуется устанавливать количество одновременных потоков больше количества ядер в процессоре;
  • По умолчанию оптимизируются изображения PNG и JPEG в подпапках указанной папки, если Вы хотите отключить данную функцию, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • По умолчанию создается файл Images.cvs, если Вы не хотите создавать данный файл, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • По умолчанию при оптимизации JPEG-файлов удаляются все Metadata, если Вы не хотите удалять определенные Metadata, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • По умолчанию при оптимизации PNG-файлов удаляются все Chunks, если Вы не хотите удалять определенные Chunks, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • По умолчанию при оптимизации PNG-файлов применяется оптимизация параметров ColorType и BitDepth, если Вы не хотите изменять эти параметры, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • По умолчанию при оптимизации PNG-файлов с альфа-каналом применяется функция «Dirty Transparency», если Вы не хотите применять эту систему, то откройте файл Tools\config.ini любым тестовым редактором, и следуйте инструкции.
  • Не рекомендуется запускать больше одной копии Image Catalyst за один сеанс оптимизации изображений.
  • В названии и/или в адресе изображений не должны быть символы, такие как & ^ % !

Благодарю за помощь


Хотел отдельно поблагодарить x128 и res2001 (если статья наберет +100, то я отправлю инвайт), без этих людей мой проект вряд ли мог быть реализован. Также хотел поблагодарить всех автор приложений, которые используются в Image Catalyst.

Пару слов о конкурентах


Здесь я расскажу пару слов о конкурентах, а точнее об одном из них, т.к. считаю его достойным конкурентом. ScriptPNG и ScriptJPG довольно интересные проекты, в отличии от Image Catalyst оптимизация изображений форматов PNG и JPEG разделена на два отдельных проекта и нет поддержки параллельной оптимизации PNG. Так же рекомендую посетить и сам сайт проекта, т.к. недавно там появились статьи об оптимизации PNG.

И еще не много...


Существует один довольно интересный проект — JPGCrush — созданный специально для оптимизации JPEG без потери качества, являясь в свою очередь надстройкой над JPEGTran. Создает JPEG исключительно в формате Progressive. Единственный недостаток — работает только в *nix-системах. Если кто может помочь мне с этой проблемой, прошу обращайтесь в личку.

Было бы неплохо сделать GUI для моего проекта, но у меня таких знаний нет, если у кого есть время и желание в реализации GUI, то пишите в личку.
@Lorents
карма
76,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (44)

  • 0
    Скажите, а возможно ли ваш замечательный продукт трансформировать в онлайн-сервис?
    Чтобы было так: я открываю ваш сайт, выбираю файлы, предназначенные для оптимизирования, нажимаю кнопку «отправить» и через некоторое время получаю готовые файлы (ссылкой «скачать»).
    Типа вот такого: www.punypng.com/
    • +3
      основной же лимит видно — процессорное время.
      «некоторое время» будет очень большим.
      • 0
        Думаю, это не будет проблемой. Если софт умеет прогнозировать время обработки, можно выводить сообщение «ваши файлы будут готовы через… минут. Если не хотите ждать, оставьте ваш e-mail, мы отправим как только будут готовы»
        • +4
          А кто оплатит такое количество процессорного времени?
          • +3
            Неужели это такая большая проблема?
            Способов монетизации существует море. Начиная с банальной рекламы и заканчивая платным сервисом. Тот же PunyPNG за бесплатно предлагает работать с маленькими файлами (до 150 кб), нужно больше — покупай про-аккаунт.
            • 0
              Можно попробовать сделать, но мне на данный момент интересует больше создание GUI.
    • +2
      Есть очень хороший, онлайн сервис
      smushit.com от Yahoo
      • 0
        Который кстати отгадывает с довольной частотой. Что интересно, Чикуенок не очень жаловал Smushit, да и вообще пакетную оптимизацию PNG, достойной альтернативой он называл как раз таки PunyPNG. Но, как бы не было удивительно, почти всегда оптимизация PNG (Fireworks exported) средствами Smushit показывала лучший результат, чем через PunyPNG, или точно такой же.
        • 0
          Самый лучший результат получается если прогнать png через smushit, а затем punypng. В обратном порядке работает не так эффективно, проверьте на сколько-нибудь значимой коллекции из 100-500 файлов.
      • +1
        У него есть один существенный недостаток, нет оптимизации прозрачности PNG
  • +5
    Для мака есть удобный ImageOptim, но объединяет PNGOUT + PNGCrush + OptiPNG + AdvPNG + JPEGOptim + Jpegtran + Gifsicle.

    imageoptim.pornel.net

    Очень удобно держать его в доке и прямо на него «бросать» папку с изображениями.
    • +4
      Под Linux есть аналогичная штука: Trimage
    • 0
      Под винду аналогичная PNGgauntlet pnggauntlet.com/
      • –1
        лучше используйте, PNGOutWin, он хоть и платный но на много лучше, хотя бы потому что есть параллельная оптимизация.
    • 0
      Сравнил
      Original: 250kB
      GIMP: 127kB
      ImageOptim: 118kB
      PunnyPNG: 115kB
      Здорово, спасибо за ссылку, как раз нужно было.
      • +1
        Попробуйте несколько раз запустить обработку, часто и по второму-третьему проходу происходит уменьшение размера.

        И еще, PNGOUT нужно дополнительно скачать и указать путь к нему в настройках.

        После прогона ImageOptim еще не один сервис не смог дополнительно ужать картинку.
        Вот только что прогнал:
        Оригинал: 85 437 байт.
        ImageOptim: 68 563 байт.
        PunyPng: 74 871 байт.
        • 0
          И правда. После второго прогона и с включенным pngout
          PunnyPNG: 111945 B
          ImageOptim: 111908 B
          • 0
            Прекрасная идея. А если довести время прогона до бесконечности размер файла будет стремиться к нулю…

            На нынешний момент тенденция публикации изображений в сети такова, что важнее скорость, с которой ты отдашь результат, чем срезанные 0.5 килобайт с превью каждой картинки, и 30+ кб с каждого её полного вида.

            На мой взгляд чуть более чем немалую часть фотоконтента в сети создается журналистской съёмкой (новости, обзоры, порно… :) где число публикуемых фото за раз может превышать пару сотен.

            А по крайней мере в журналистике скорость отдачи контента важнее даже его качества (не говоря уже о оптимизированности). Не отдашь первым ты — это сделают другие. А при нынешних скоростях пара десятков килобайт редко бывает принципиальна.

            Я не хочу сказать «храните и выкладывайте все в BMP» — просто надо четко понимать — временные ресурсы при обработке и выкладке изображений обычно в профессиональной работе сильно ограничены. А преимущество в уменьшении файла на пару килобайт большая часть ваших клиентов не заметит.

            В связи с этим двойной и более прогон «мегаоптимизаторами» применим в реальном мире только с целью самореализации на поприще «крутого IT-специалиста».
            • +2
              Не сайтами одними едины.
              Для мобильных приложений каждый килобайт у картинки считается. Такие оптимизаторы серьёзно уменьшают размер получаемого установочного файла.
              А третий прогон, кстати, результата не дал.
              • –2
                Не вопрос. Считается.
                Но чтобы продолжать аргументированную дискуссию — для начала изучите хотя-бы это:

                uibook2.usethics.ru/

                Нет большого смысла в внесении кучи «классных изменений», если 80% пользователей их не ощутит на себе. Я не говорю что нужно в принципе отказаться от оптимизации. Но нельзя отводить на неё, к примеру, большее время чем на «удаление красных глаз»…

                Плюс к этому — на мой взгляд для большинства задач по «оптимизации» достаточно встроенных в графические редакторы инструментов + прямых рук.
    • 0
      если не ошибаюсь, ImageOptim просто оптимизирует изображения через все выше перечисленные программы, а потом сравнивает результат. Любой кто знает как происходит оптимизация PNG скажет, что это бред.
      • 0
        Вы тоже так делаете в Non-interlaced-Xtreme: сравниваете результаты PNGWolf и TruePNG :)

        Кстати, на тестовой картинке ваш скрипт показал лучшие результаты (на 188 байт). Скорее всего за счет «грязной прозрачности».

        Ну а в целом как ваш скрипт так и ImageOptim отлично решает проблему «ленивой» оптимизации, возможно, подобрав параметры и порядок оптимизаторов для каждой конкретной картинки, добиться лучших результатов, но по-моему не стоит оно того.
        • +1
          Не претендуя на абсолютную репрезентативность (выборка из одной картинки :))

          Original: 85 454
          PunyPng: 75 169
          SmushIt: 71 501
          PunyPng + SmushIt: 71 316
          SmushIt + PunyPng: 69 449
          Image Catalyst: 68 627
          Image Catalyst (+ColorType, +BitDepth): 68 627
          ImageOptim: 68 577
          Image Catalyst (+Dirty Transparency): 68 389
          Image Catalyst (+ColorType, +BitDepth, +Dirty Transparency): 68 389
  • 0
    speedupyourwebsite.ru/books/reactive-websites/
    Просмотрите третью главу.
    • 0
      вопрос, зачем? Я лучше их знаю оптимизацию
      • 0
        Я один из авторов. Почему вы думаете, что вы лучше это знаете?
        • 0
          простите за мою скромность, хотя бы потому что Вы в главе 3.3.3 сравниваете приложения, а это категорически нельзя делать.

          Кстати с этой книгой я и начал изучение оптимизации изображений, поэтому хотел поблагодарить Вас за книжку.
          • +2
            Вы, видимо, описа́лись и имели ввиду следующее: «простите за мою нескромность, хотя бы потому что Вы в главе 3.3.3 сравниваете приложения, а это категорически нельзя делать, по моему мнению». :)

            За благодарость — спасибо :) Значит не зря мы старались.
  • +7
    Настоятель рекомендую ознакомится первую часть…
    В этой части я отойду от теории к практике, а именно покажу небольшое проект...

    Велик и могучи русский языка!
  • 0
    Очень странно. Попытался оптимизировать первый попавшийся PNG в режиме Xtreme, получил файл с весом на 41% больше.
    • –1
      Поправка: такое только в Interlaced. При Non-interlaced таки получил несколько полегшавшую картинку. С чем может быть связана настолько большая разница между Interlaced и Non-interlaced?
      • 0
        Меняется порядок строк в файле, из-за чего zlib может дать совершенно другую степень сжатия.
        • 0
          потому что, это разные по методу загрузки изображения, я писал это здесь и впервой части тоже.
  • 0
    dimagurov.livejournal.com/49579.html Программа очень старая, но от этого хуже не стала. Это скорее не оптимизация, а выбор наилучшего метода сжатия для достижения минимальных потерь с максимальным сжатием. Результаты подчас неожиданные, но на глаз не отличишь.
  • 0
    Мне кажется, при теперешних каналах интернета проблема долгой загрузки неактуальна. Пользуюсь встроенными утилитами Adobe (Save for web).
    • +1
      Хорошо с вами не согласны, большинство компаний, таких как гугол
      • +4
        Ну давайте не сравнивать теплое с мягким. Для Гугла экономия в выдаче каждого байта со страницы может на практике означать сэкономленные терабайты. Но свои гуглы есть далеко не у всех.

        Важно понимать: что стоит и что не стоит оптимизировать на сайте. Занятия оптимизаторским онанизмом редко когда приводит к хорошему результату. А в ваших публикациях я нигде не увидел критериев применимости либо неприменимости хотя-бы к каким-то конкретным случаям.

        Плюс не забывайте — данные идут пакетами по 512 байт (из них 80 — системная информация). И потому на практике ваши показания в первой части по экономии не верны (я говорю о % — нельзя же по сети переправить половину пакета), а также о том, что экономия в теории на 300 байт далеко не всегда станет экономией на практике (при передаче по сети).
        • 0
          Плюс не забывайте — данные идут пакетами по 512 байт (из них 80 — системная информация).

          Вроде как средний размер пакета 1500 байт. А в целом правильно подметили про опимизаторский онанизм :)
        • 0
          Пакеты по сети идут размером до 1500байт, как правильно пишет chikuyonok, и да, по сети можно переправить половину пакета.
    • 0
      Если только вы не делаете версию сайта для мобильных.
    • 0
      У меня 32кбит/сек с потерями. Вариантов нет.
  • –1
    В случае png это экономия на спичках. Да и чего тут нет такого, что не умеет libpng/libjpeg?
    • +1
      если честно, я вообще что Вы имеете ввиду?
      libpng используете для сжатия PNG библиотеку zlib, я ее как раз использую
      libjpeg я ее тоже использую, JPEGTran основана на libjpeg
  • 0
    Спасибо за утилиту! Просто супер! Помогла ужать графику на 75%

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