Пользователь
0,0
рейтинг
10 мая 2011 в 17:53

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

Введение


Предлагаю Вашему вниманию обзор посвященный оптимизации изображений формата PNG и JPEG без потери качества. Под «без потери качества» подразумевается, что визуально оригинальные и оптимизированные изображения ни чем не будут отличаться. Я читал на Хабре довольно много статьей посвященных данному вопросу, но скажу, большая часть — полная чушь, в них констатируются факты, а не причины. Данный обзор посвящен людям, которые имеют базовые знания об оптимизации изображений.

PNG


И так, как же происходит оптимизация? Давайте разберемся по порядку, в основном это происходит из-за нескольких причин, и сейчас мы их рассмотрим.

Non-interlaced или Interlaced

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

ColorType и BitDepth

ColorType нужен для оптимизации количества цветов в изображении. По этому критерию бываю следующие форматы PNG:
  1. Grayscale;
  2. Grayscale + alpha;
  3. Palette (256 цветов);
  4. RGB;
  5. RGB + alpha.
Технология ColorType как раз выбирает тот формат, при котором изображение будет весить меньше всего, но при этом визуально не изменится. Вот пример работы данной технологии (чтобы было честно, изображения были оптимизированы по одному и тому же алгоритму):

PNG RGB + alpha — 17 853 байт

image

PNG Palette — 13 446 байт

image

Разница в размере — 4407 байт (24%), при этом визуально картинки не изменились. Если Вы видите разные изображение, то это оптический обман.

BitDepth — битовая глубина, бывает двух видов:
  1. 1-bit;
  2. 2-bit;
  3. 4-bit;
  4. 8-bit;
  5. 16-bit.
Технология BitDepth аналогично ColorType.
Вот пример работы данной технологии (чтобы было честно, изображения были оптимизированы по одному и тому же алгоритму):

PNG 4-bit — 6 253 байт

image

PNG 8-bit — 5 921 байт

image

Разница в размере — 332 байт (5,3%), при этом визуально картинки не изменились. Если Вы видите разные изображение, то это оптический обман.

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

Chunks

Если кто в танке не в курсе, PNG состоит из Chunks. Писать, что это такое Chunks не буду, можете сами прочитать. Лучше я покажу, для этого есть программа — TweakPNG, возьмите любое изображение формата PNG и откройте через данную программу и увидите всю структуру PNG.

image

Есть еще программы наподобие TweakPNG, но она лучшая и удобная. Об остальных программах расскажу в заключении.

Как видно из выше приведенного рисунка, существуют два вида Chunk (столбец Attributes):
  • Critical chunks присутствуют в любом PNG-изображении (IHDR, PLTE для PNG Palette, один и более IDAT и IEND).
  • Ancillary chunks являются дополнительными chunks, удаление тех или иных chunks позволяет уменьшить размер изображения, но не намного.
Оптимизация палитры

Может быть реализована только в PNG Palette, технология основана на оптимизации chunks PLTE, может уменьшить размер изображения, хотя и не намного. На мой взгляд лучше все это технология реализована в Color Quantizer, один из его алгоритмов был реализован и в TruePNG.

Оптимизация альфа-канала

Про эту технологию узнал от Сергея Чикуенока (Про PNG. Часть 3). Сейчас эта технология развита, и используется очень часть и дает существенный прирост к оптимизации. Главный недостаток — технология вводит изменения в само изображение (в Chunks IDAT), а не в структуру, однако визуально изображение не изменится. Могу привести в пример две программы:
  • TruePNG от автора Color Quantizer;
  • CryoPNG — более продвинутая технология оптимизации и требует большего времени, может увеличить степень сжатия.
Понимаю, тяжело понять, о чем я пишу, лучше покажу пример (чтобы было честно, изображения были оптимизированы по одному и тому же алгоритму, первое изображение с альфа-каналом, другое без альфа-канала).

Оригинальное изображение. Размер — 214 903 байт.

image
image

CryoPNG (параметр -f0). Размер — 107 806 байт.

image
image

CryoPNG (параметр -f1). Размер — 105 625 байт.

image
image

CryoPNG (параметр -f2). Размер — 107 743 байт.

image
image

CryoPNG (параметр -f3). Размер — 114 604 байт.

image
image

CryoPNG (параметр -f4). Размер — 109 053 байт.

image
image

Недостаток CryoPNG — требуется оптимизация всех пяти изображений для выявления наилучшего результата, а это в свою очередь требует большого количества времени.
TruePNG работает в этом плане аналогично CryoPNG -f0, в свою очередь CryoPNG -f0 является оптимальным с точки зрения оптимизации PNG (как говорится это просто опыт). По моим наблюдениям, CryoPNG -f1 и CryoPNG -f4 намного чаще оптимизируют PNG лучше CryoPNG -f0, по сравению с CryoPNG -f2 и CryoPNG -f3.

Алгоритм сжатия Deflate + Фильтрация строк

Как мы же говорили, PNG состоит из Chunks, в данном случае, нас интересует Chunks — IDAT. Для его сжатия в основном играют два фактора, фильтрация строк и алгоритм сжатия Deflate. Давайте об этом поговорим поподробнее.

Фильтрация строк

Фильтры, которые применяются в PNG, нужны для того, чтобы подготовить данные к сжатию и таким образом увеличить его степень. Фильтр обрабатывает каждую строку таким образом, чтобы приходилось кодировать не сами значения байтов, а разницу между текущим и предыдущим. От фильтра зависит, какой считается предыдущим.
  1. None — фильтр отсутствует;
  2. Sub смотрит байт в той же строке;
  3. Up — с тем же номером, что и текущий в предыдущей;
  4. Average берет оба и считает от них среднее арифметическое;
  5. Paeth смотрит байт перед байтом в предыдущей строке, сравнивает разницу и кодирует наименьшую.
Вообще говоря, нет каких-то определенных рекомендаций, какой фильтр выбирать. Для каждой строки можно выбрать свой фильтр, поэтому часто просто применяют все фильтры подряд и смотрят, с каким сжатие получается лучше всего. Существует еще один фильтр — Adaptive, — можно сказать это «микс» из фильтров. Фильтры поддерживают почти все программы оптимизаторы PNG, но лично мне известны только две программы, которые имеют более продвинутую систему создания фильтров:
PNGOut не создает такие фильтры, однако в новой версии появилась поддержка встроенных фильтров. Это было сделано по моей просьбе.

Алгоритм сжатия Deflate

На сегодняшний день есть несколько библиотек, основанных на алгоритме сжатия Deflate:
Библиотека
Deflate
Скорость
работы
Степень
сжатия
Программы Примечание
Zlib Высокая Низкая TruePNG
OptiPNG
PNGWolf
Благодаря высокой скорости работы может быстро перебрать большое количество значение параметров и выбрать оптимальные.
7-zip Средняя Средняя AdfDef
PNGWolf
Не всегда выбранные значения параметров в Zlib являются для них оптимальными (близки к оптимальным). Перебор значений параметров будет занимать большое количество времени и почти всегда затраченное время не оправдывает полученный результат.
Kzip Низкая Высокая PNGOut
PNGWolf использет одновременно и Zlib, и 7-zip.

Важно: все эти программы дополняют друг друга, и они сильны, когда едины. Это самое большая проблема, когда их используют отдельно, а потом сравнивают полученные результаты. В первую очередь надо использовать Zlib, а потом уже 7-zip и/или Kzip.

В следующей части мы поговорим об этих программах поподробнее, а также построим три алгоритма оптимизации PNG (с учетом оптимизации альфа-канала) по степени сжатия и затраченного времени. Ниже приведен условный график зависимости степени сжатия от затраченного времени на оптимизацию Chunks IDAT.

image

Как видно из графика, чем больше степень сжатия, тем больше времени требуется.

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


Здесь мы поговорим о двух программах:
Рекомендую их использовать в самом конце оптимизации PNG и в том порядке, котором написал выше. Могут уменьшить размер PNG на несколько десятков байт, при этом скорость работы очень высокая.

JPEG


Итак мы переходим к JPEG, здесь все гораздо проще, и так продолжим. Но перед этим скажу, что JPEG нельзя пересохранить не потеряв качество, даже со степенью качеством 100 (это не максимальное качество, а математический предел оптимизации). Рассмотрим следующий пример (чтобы было честно, изображения были оптимизированы по одному и тому же алгоритму).

Оригинальное изображение — 52 917 байт.

image

Новое изображение (сохранен через Adobe Photoshop CS5, Save for Web 100) — 53 767 байт

image

Строим diff-разницу изображений.

image

Вот так вот сильно изменилась картинки, да, визуально ничего не заметно. Как видно размер картинки увеличился. Это из-за специфики библиотеки, которая создает JPEG, о библиотеках поговорим чуть позже.

Есть только одна программа, которая позволяет пересохранить изображения в JPEG не потеряв качество — BetterJPEG (есть плагин к Adobe Photoshop). Если не ошибаюсь, для жителей стран СНГ для некоммерческого использования программа бесплатная. Лично я использую BetterJPEG, когда нет исходника и требуется незначительное редактирование изображения. Рассмотрим пример работы BetterJPEG.

Оригинальное изображение.
image
Новое изображение (усложняем ситуацию, добавляем надпись «HTML»).
image
Строим diff-разницу изображений.

image

Markers

JPEG в отличие от PNG состоит из маркеров. Рекомендую прочитать статью «Структура файла, маркеры», также рекомендую вообще посмотреть сам сайт. Самая мощная программа по изучению структуры JPEG — JPEGsnoop. Есть еще программы, но о них расскажу в заключении. Для изучения структуры JPEG рекомендую следующее изображение — PhotoME.
Удаления некоторых маркеров (APP0-APP15, COM), может существенно уменьшить размер изображения. Мне больше всего для этого нравится программа — Jhead, наиболее простая и удобная.

Progressive и Optimized

Существуют три метода отображения изображений в браузере при загрузке.
  • Стандартный. Сейчас почти не используется, аналогичен оптимизированному методу (степень сжатия хуже).
  • Оптимизированный (Optimized) — создается улучшенный файл JPEG с меньшим размером файла. Браузеры загружают их последовательно, сверху вниз, по мере поступления информации из сети.
  • Прогрессивный (Progressive) — изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки, т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться. Internet Explorer, включая восьмую версию, не поддерживает прогрессивную загрузку JPEG, он его показывает только после полной загрузки файла, что сильно отличается от поведения «традиционного» JPEG, когда изображение отображается сверху вниз, по мере загрузки.
Подробнее об этом можно прочитать в статье «Оптимизация изображений, часть 4: последовательные JPEG — быть или не быть?»

Библиотека создания JPEG

А вот здесь начинается самое интересное. Никто не задумывался, как создается JPEG? Оказывается, существуют библиотеки, и их не так и много, рассмотрим некоторые из них:
  • Adobe использует свои собственные библиотеки, их вообще несколько, например, Adobe Photoshop, Save for web — используется для сохранения в WEB.
  • LibJPEG. Использую почти все программы, которые умеют сохранять в JPEG, включая Adobe Fireworks. В библиотеке LibJPEG есть очень интересная программа — JPEGTran (оптимизирует изображение, без потери качества). Имеет смысл применять, если Вы создаете изображения JPEG через Photoshop или Illustrator и оптимизируете через JPEGTran, то получаете максимальный эффект оптимизации, т.к. выходит, что используются две библиотеки. К сожалению, у меня так и не получилось заставить Photoshop сохранять в JPEG, без потери качества.
Помните, когда мы пересохраняли изображение в JPEG, вышло, что новое изображение больше оригинала. Это связано из-за специфики библиотек. Вот небольшой обзор работы библиотек — Corel Painter vs Adobe Photoshop.

Сказать какая из двух библиотек оптимизирует лучше, вопрос очень сложный и не однозначный, но из-за очень высокой скорости работы JPEGTran, Вы просто не замечаете его работу, только не забывайте проверять размер изображения, увеличился или нет, Все это можно сделать и через bat. Помните, JPEGTran может переводить JPEG из Progressive в Optimized и наоборот, не изменяя саму картинку.

Заключение


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

Подробнее о способах отображения изображений в браузере при загрузке можно прочитать:
Чтобы убедиться, что вышеописанные способы действительно оптимизируют без потери качества, предлагаю посмотреть способ построения diff-разницы изображений.
Для более полного представлении об оптимизации, рекомендую прочитать следующие статьи:
  1. Работа с изображениями
  2. Подготовка изображений к загрузке
  3. Оптимизация GIF и PNG-8 для веб
Дополнительно программное обеспечение, которое рекомендую использовать, при изучении структуры изображений и не только:
  1. PhotoME — очень удобная программа для изучения структуры PNG и JPEG, не такая мощная, как описанные выше, использую как основную.
  2. ExifTool — очень мощная программа для изучения структуры PNG и JPEG. Работает через командную строку, есть онлайн версия — Jeffrey's Exif Viewer
  3. 010 Editor — Hex-редактор, но имеет дополнение (JPEG, PNG + Chunks), которое помогает изучению структуры PNG и JPEG, иногда просто не заменим.
В заключении, бы хотел поговорить об онлайн-сервисе оптимизации изображений — PunyPng. Не могу сказать, что он совершенен с точки зрения оптимизации, но на сегодняшний день он лучший из тех, которых я встречал.

Продолжение следует...

@Lorents
карма
76,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • +17
    Разница в размере — 4407 байт (24%), при этом визуально картинки не изменились

    Мне одному кажется, что первые две картинки с головой обезьяны как раз-таки заметно отличаются?
    • +3
      Да, с цветами что-то. Но если бы не акцентировали внимание, ни за что бы не заметил.
      • +3
        Угу. Мне почему-то сразу в глаза бросилось.
        • +2
          Вам это просто кажется, как и Мне.
          Откройте оба изображения в разных вкладках браузера и посмотрите теперь на них.
          • 0
            У верхней однозначно цвета ярче!
            • 0
              А сейчас?
              • +1
                Похоже действительно имеется обман зрения.
                • +1
                  У меня тоже самое было в начале. Я потом нял в чем фишка. Пусть пока так будет, позже исправлю.
                  • +12
                    Ну, у меня не обман зрения, у меня монитор, наверное, такой. Угол обзора разный, вот и кажется, что одно ярче другого.
                    • +4
                      вот именно: верхняя казалась чуть темнее. Вспомнил, как один раз верстая, недоумевал, почему хэдер и футер разного цвета, хотя в css одно и тоже. Оказалось, все дело в угле обзора — глаза находятся чуть ниже середины монитора.
                      • –8
                        У меня S-IPS монитор с расширенным цветовым охватом. Разница в цветах двух, казалось бы, одинаковых (на TN-Film мониторах, наверное) изображений прекрасно видна невооружённым глазом. Здесь даже оговорка про «разницу не заметите, если не искать» НЕ РАБОТАЕТ!
                        • +1
                          Поздравляю, ваш «S-IPS монитор с расширенным цветовым охватом» НЕ РАБОТАЕТ!
                          • –4
                            Из ролика «TN vs IPS», надеюсь, всё понятно?
                            • +2
                              А я ничего не говорю про IPS в целом. Я про ваш, конкретный (:
                              Если на нем видно разницу между идентичными на 100% изображениями то либо он неправильно работает либо ваше зрение
                              • +1
                                Сейчас я за PVA-монитором. Изображения идентичны. Возможно это усталость зрения сказалась.
                                • +1
                                  ребзе, написано же даже со ссылкой как по difference смотреть одинаковые они или нет, давно бы уже разобрались)
                    • 0
                      Похоже TN-матрица вносит разницу, чтобы сравнить «правильно» — лучше сохранить изображения и в программе-смотрелке попереключать туда-сюда.
          • +18
            Ну открыл. Это одна и та же картинка. С одним и тем же адресом
            xmages.net/storage/10/1/0/2/c/upload/335966c0.png
            Неплохой метод оптимизаций, показать два раза одну и ту же картинку и сказать, что размер второй меньше. «А ручки-то вот они!»
            • +17
              Я это сделал специально сейчас, чтобы показать что это обман зрения. Надеюсь все убедились. Исправляю как должно быть.
              • +5
                Все сделал.
                • +13
                  разместите обе картинке на одном уровне, чтобы никто не придирался из-за своих углов обзора экрана
              • +1
                У меня в Photoshop при «Сохранении для Web» получаются в точности такие же размеры (17К и 13К), если выбирать 256 или 128 цветную палитры соответственно. То есть картинка с обезьяной такова, что 256-цветная палитра избыточна.

                Сможете как-нибудь оптимизировать вот эту картинку? (там уже появились эффекты цветовой ступенчатости)



                21.3 Кб
                • 0
                  вот неа, при 128цв на голубом градиенте заметные глазу ступеньки уже
                  • +1
                    Это если изменять количество цветов, а я изменяю сам формат PNG.


                    Ну это понятно, я просто про высказывание автора, что изменяется сам формат PNG)
                • +14
                  Вот сделал 14,3 кб, алгоритм мой, Скоро выложу на все общее обозрение.
                  image
                  • 0
                    Неплохо)
                    • 0
                      Это конечно не максимум, но все равно
                  • 0
                    весьма любопытно взглянуть на алгоритм
                • +1
                  21 863 байт -> 18 160 байт оптимизирует PngOptimizer без видимой потери качества.
              • 0
                А, так суть вашей статьи была в демонстрации обманов зрения, простите, это всё дурная привычка читать заголовки, не вник в вашу тонкую ироничную мистификацию.

                Кстати, половина ваших мышек выглядит приблизительно так: ksim.ru/tmp/d3a03700.gif
                Увлечение сомнительными оптимизаторами, выигрывающими десяток байт за счёт совместимости, до добра не доводит.
                • +1
                  Я специально выложил без альфа-канала.
                  Image Analyzer, показывает изображение без альфа канала.
                  • 0
                    А, понятно, сразу не сообразил.
                    • 0
                      Какой-то просмотрщик игнорировал альфу подобным образом, тогда я познакомился с этими алгоритмами несколько лет назад :) + статьи Тёмы о сжатии, тоже много интересного.
            • +4
              хуже всего сейчас людям, которые увидели разницу!
              • +1
                Люди, у кого есть идеи, как доказать, что оптический обман?
                • 0
                  А тот же difference? У меня абсолютно чёрный круг получился, т.е. разницы нет никакой
                • +1
                  забей, кто не верит и кому надо заморочиться, проверят и опубликуют диф
                • +2
                  Это просто свойство TFT TN дисплеев менять цвета при различных углах зрения) На Хабре есть замечательная статья про различные типа TFT дисплеев)
                • 0
                  Забил на это дело, как строить разницы я писал.
                • 0
                  просто разместить их на одном уровне, тогда яркость на ЖК-экране будет одинаковой.
                • 0
                  >как доказать, что оптический обман?

                  Визуально субъективно — только воспользоваться монитором с расширенным цветовым охватом, например, HP LP2475w — разница в цветах оригинала и преобразованной картинки сразу будет заметна. На мониторах с 8-и битным ЦАП на канал разница тоже будет видна, но не так явно. У TN-матриц обычно 6-и битный ЦАП на каждый канал плюс алгоритм дитеринга (dithering, эмуляция недостающих цветов через ШИМ субпикселов) — здесь разницу в соседних цветах практически невозможно заметить из-за неидеального дитеринга.

                  Визуально объективно — оптический обман можно доказать, сделав компьютерное вычитание (diff) изображений с помощью программ-редакторов, умеющих это делать. Результат, что называется, будет налицо в случае малейшего подвоха. Так обычно определяется стеганографический метод шифрования информации, если исходное изображение попало к дешифровальщику в нетронутом виде.
          • 0
            Чтобы не приписывать «то, что вы видите разницу — не более чем обман зрения» можно было бы просто поставить 2 картинки в одном файле…
            В смысле сохранить их с учетом изменений в разных файлах, а потом вытащить результат в один файл без потери качества. Думаю что тогда бы не было вопросов…
    • 0
      На первой картинке цвета более темными или насыщеными показались.
    • 0
      Мне тоже показалось.
      Оказалось, что у монитора неравномерная подсветка.
  • +1
    Заголовок некорректный — потеря качества есть.
    Возможно, следует говорить о потере качества незаметной для глаза.
    Подобного рода фишки как правило основываются на кластеризации.
    Я реализовывал что-то подобное в этой статье.
    • +3
      Это если изменять количество цветов, а я изменяю сам формат PNG.
      • +2
        Очень сильное заявление.
        Перечитал еще раз вашу статью — ткните носом где вы изменяете формат PNG?
        Я вижу лишь оптимизацию, TweakPNG работает с палитрой, то есть с цветами!
        Никаких новых изменений в формат PNG внести нельзя (не предусмотренных самим форматом изначально).
        • 0
          оптимизация ColorType и BitDepth, это не всегда возможно, все зависит от самого изображения.
          • +3
            Продолжая доходить до сути — ответьте пожалуйста на вопрос — где вы изменяете формат PNG?
            Вот эта программа Color Quantizer (ссылка)делает все мне известные оптимизаторы, работает только тяжеловато.
            Ее название описывает и суть алгоритма в ней разработанного.
            Уменьшение размерности палитры возможно практически всегда, поковыряйтесь с этой программой — там очень интеллектуальный квантователь вкручен и увидите — что часто и 256 цветов глазов не отличишь.

            • +1
              Я знаю это программу, и его автора я тоже знаю. Допустим у меня есть картинка PNG в формате RGB, но при этом в нем 196 цветов. Я изменю ее в формат Palette, но к кол-ву цветов я не дотронусь, это как с рисунками обезьянок.
              • +1
                Pallete это все-таки не формат, и тем более не его изменение — это грамотное использование возможностей формата PNG. Насколько я помню, Palette — суть в индексации палитры цветов (0-255).
                Однако при индексации цветов не поддерживается альфа-канал — а это все прелести PNG сводит к минимуму.
                Если уж вы знакомы с автором, включите пожалуйста эту программу в ваши будущие обзоры, очень интересно ее нутро в алгоритмическом плане.
                • +1
                  при индексации цветов альфа канал возможен, пример использования cssing.org.ua/2008/11/07/png-8-alpha/
                  • +2
                    О, точно может быть! Спасибо за ссылку, однако свободных либ с полной поддержкой альфа при индексации все равно не видел. Знаком только с вариантом:
                    "PNG-8 обычный:
                    доступны 256 цветов, прозрачность только на уровне 0 или 100%. Прозрачность в 50%, например, невозможна.
                    "
                • +3
                  Я выслал автору инвайт, он уже сам решит стоит это делать или нет
  • +3
    Предлагаю переименовать в «Оптимизация PNG и JPEG без потери детализации», ибо JPEG по определению формат сжатия с потерей качества.
    • 0
      Не совсем так, я же писал, что я использую для этого JPEGTran. Сейчас добавлю в статью пример работы.
  • 0
    Под Mac OS X есть замечательная программа с несколькими алгоритмами сжатия ImageOptim
    • 0
      У меня к сожаления (а может к счастью) не Mac OS X, поэтому проверить работу не могу. Если не трудно, возьмите два любых изображения PNG и оптимизируйте через данную программу и выложите сюда, хочу кое-что проверить.
      • 0
        • 0
          опять я прогадал с опреционкой
          А можно пример работы?
      • 0
        image

        результат:
        image
        • 0
          у меня такое чувство, что он эти программы использует отдельно.
          Даже www.punypng.com лучше, переходите на него.
          • 0
            111908 против 11945 у PunyPNG.

            просто в ImageOptim по умолчанию не входит pngout, нужно отдельно подключить бинарник + выставить везде максимальные настройки + нажать «Again» пару-тройку раз.
            • 0
              + у PunyPNG есть ограничения на размер файла\файлов
              • 0
                Спасибо за программу, пригодится. Скормил картинку png 10к*10к, уже полчаса трудится :)
              • 0
                да, это самый главный недостаток
  • –4
    Теперь при сохранении JPG буду ставить галочку Progressive.
    • +1
      Мне как пользователю наоборот не нравится смотреть такие картинки. Мало того, что они больше по размеру, так еще и в отличие от не-progressive картинок невозможно посмотреть картинку до ее полной загрузки. Конечно, это касается больших изображений, которые долго грузятся. Для мелких JPEG пофиг
      • 0
        1) >>невозможно посмотреть картинку до ее полной загрузки

        Эээ… что-то вы путаете.

        1) «Прогрессивный (Progressive) —… что позволяет отобразить изображение с низким разрешением до полной его загрузки, т.е. сначала Вы увидите изображение низкого качества, затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться.»

        2) >>Мало того, что они больше по размеру
        У меня фотошоп наоборот показывает размер меньший.
        • +3
          Я не считаю, что просмотр мутного недетализированного изображения означает «просмотреть картинку» до ее полной загрузки) Уж лучше я буду видеть часть изображения, но в нормальном виде.

          > У меня фотошоп наоборот показывает размер меньший.

          При высоком качестве 90-100 возможно, попробуйте при 60-70
          • –1
            >>Уж лучше я буду видеть часть изображения, но в нормальном виде.
            О вкусах не спорят.

            Ниже 80 не ставлю — падает качество.
          • 0
            >>попробуйте при 60-70
            Попробовал с качеством 60, на прогрессивном размер файла опять меньше. Так что я не понимаю вас.
          • 0
            А как же карты-местности — мне кажется это очень удобно и экономит трафик.
  • –13
    А не опоздала ли статейка лет на 5-6? Современная скорость передачи данных позволяет сконцентрироваться на качестве графического контента, даже в ущерб весу картинок. В любом случае познавательно, спасибо.
    • +8
      Лично я считаю, что это всегда актуально. Не забывайте, про мобильный интернет.
  • +1
    Очень хорошо подготовлена статья, масса полезнейших ссылок, минимум воды.
    Побольше бы таких!
  • –13
    JPG и PNG это как MP3 и FLAC. Ясно что в каждом из случаев второе в итоге победит, дело времени.
  • 0
    Отличная статья, большое спасибо автору!
  • 0
    www.smushit.com/ysmush.it/ ни обезьяну, ни мышь не сжал.
    • 0
      Это и не удивительно, так как все изображения я уже оптимизировал сам. Это конечно не максимум, но близок к нему.
      • 0
        Я имею в виду, что оригинальные, не сжатые.
        • +1
          Простите не так понял.
          Лучше пользуйся www.punypng.com/
    • 0
      Останки Чарльза Дарвина, прочитавшие этот комментарий, стремительно набирают обороты вокруг своей оси.
  • 0
    В заключении, бы хотел поговорить об онлайн-сервисе оптимизации изображений — PunyPng. Не могу сказать, что он совершенен с точки зрения оптимизации, но на сегодняшний день он лучший из тех, которых Я встречал.
    Чем он лучше/хуже www.smushit.com/?
    • 0
      например у него нет поддержи оптимизации альфа-канала, это уже существенный недостаток.
  • 0
    Сравнивал как-то на небольшой выборке png-файлов optipng, pngcrush, pngout, advpng. Последние две программы в среднем продемонстрировали лучшее сжатие.
    • 0
      Вот она главная беда, Вы сравниваете их отдельно.
      • 0
        Я пробовал скармливать один файл поочерёдно разным приложениям. На итоговом уровне сжатия это не сказалось.
        • 0
          можете дать цепочку которую использовали?
          • 0
            Конечно, последовательность такая же, как и в перечислении выше: optipng, pngcrush, pngout, advpng.
            • 0
              pngout -ks
              • 0
                Проверил на цепочке optipng, pngcrush, pngout:
                Оригинальный размер файла 255757 байт. optipng (251012) → pngcrush (251546) → pngout -ks (238793)
                Если же запустить pngout -ks для оригинального файла, получил 237902 Б. То есть, чуточку эффективнее последовательного применения.
                Видимо, совместное использование требует хитрых комбинаций.
                • 0
                  Комбинации не хитрые, с -ks pngout не всегда оптимизирует лучше, чем без -ks, но в большинстве случаях это так.
                  pngcrush можно убрать, он не нужен.

                  Есть еще несколько хитростей, я о них скажу в следующей части, сейчас жду обновления TruePng
  • 0
    Помнится, лет, этак, несколько назад, punypng обещали offline tool консольный, но, похоже, с тех пор это обещание с места не сдвинулось.
  • 0
    в PNG с палитрой все байты — индексы в палитре, поэтому их бессмысленно фильтровать
    Это почему? o_O

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

      честно говоря я не специалист по оптимизации с потерями, но я посмотрю что можно сделать.
  • 0
    Для оптимизации изображений пользуюсь программой RIOT. Там можно добавлять свои оптимизаторы.
    • 0
      Пользуюсь psydk.org/PngOptimizer Пару дней назад оказывается обновилась.
      • 0
        Ну да, мышь ужала до 115 833 байт
  • +1
    Я как понимаю, он использует программы оптимизаторы по отдельности?
    • 0
      Надо начать писать статью, о построении алгоритмов оптимизации.
  • 0
    Немного ручной работы + собственный shell-скрипт, который просто использует несоклько утилит и прогоняет по несколько раз:
    image
    (85 540 байт)
    • 0
      Правда, видны кое-какие незначительные артефакты :)
      • +1
        Хотел сказать «нифига себе незначительные», — оказалось, пятна на мониторе…
        • 0
          В зависимости от применения, артефакты могут показаться и значительными. Хотя результат впечатляет, думаю, ещё можно поработать, чтобы привести к идеалу (без видимых изменений).
    • 0
      отличный результат сжатия (не оптимизации), на скорую руку смог сжать всего на 100 байт лучше.
      Вечером постараюсь сжать лучше.
  • +2


    Web Image Guru (Png 8 + Pallette Alpha) + PNGGauntlet = 38,559 bytes
    • 0
      Опять же, ореол внизу. Но размер удивляет. За счёт чего в пять раз жмётся?
      • 0
        В начале идет оптимизация палитры (по сути 8-bit PNG — 256 цветов) с сохранением полного альфа-канала. Плюс вторичная оптимизация еще на 5% — сжимаются данные IDAT-пакета через PNGOUT (PNGGauntlet).
        • 0
          и еще усики плохо смотрятся, сохранить в Png 8 + Pallette Alpha можно и через Photoshop, и Color Quantizer.
          • 0
            Через Photoshop будет совсем не то. Можете проверить.
            • 0
              Fireworks, кстати, хорошо с PNG-8+Alpha работает.
  • –4
    До сих пор ожидаю комментов про заваленный горизонт =)
  • 0
    Пользуясь случаем спрошу у гуру:
    Нужна консольная Open Source программа, способная перегонять изображение под самостоятельно заданную палитру, а не самой высчитывать считать её. В случае если в оригинальном изображении цветов меньше чем палитре производить уменьшение разрядности цвета.
  • +2
    Вендузеры опять придумываю никому не нужные костыли. А все ведь намного проще. Есть стандартная утилита optipng (во всех дистрибутивах Linux), которая очень оптимизирует png, практически без потерь. Я не знаю, какой практической пользы принесет вся эта теория, написанная хрен знает кем в топике. А так, например:

    Скрин до:
    ompldr.org/vOG5jcA

    Скрин после:
    ompldr.org/vOG5jdA

    Сам выхлоп можно поглядеть здесь (82.18% decrease):
    ompldr.org/vOG5jdg
    • 0
      потому, что 82.18% это не предел
      • 0
        А что предел, 200%? Дальше идут видимые артефакты, которые напрочь убивают смысл png, как формата. Если нужна прозрачность — можно использовать тот же gif — тогда разницы будет ровно никакой.
        • 0
          в теме же написано — без потери качества, optipng отличный инструмент, но он умеет не все, есть еще способы ужать файл, чаще всего незначительно, но можно добиться лучшего результата
    • 0
      Практическая польза такая, что это является базой для моей второй части.
      optipng оптимизирует без потери качества, просто надо уметь им пользоваться.
      • 0
        когда ждать вторую часть?
        • 0
          когда напишу, а если серьезно, во второй части я хочу представить свой проект, а для этого нужен спец по bat.
          • 0
            т.е. во второй части будет практика уже.
          • 0
            Что-то в этом роде хотите сделать?
            • 0
              да, но у меня на много продвинутая система.
              • 0
                Я к тому, что можно попробовать скооперироваться. Тема интересная.
                • 0
                  Вы хорошо работает через batch-файлами?
                  • 0
                    Ну, я конечно не ас, как те, кто постит в «ненормальном программировании», но кое-что умею.
  • +1
    Хочу пережать свой фото альбом jpeg. Подскажи какой из твоих или иной программой воспользоваться для этого, с возможностью пакетной обработки.
    • +1
      Вопрос очень интересный, что Вы хотите сделать: удалить маркеры и/или изменить способ отображения в браузере?
      • +1
        Я заметил что у фотоаппаратов при сохранении снимков почему-то получаются большие jpeg файлы (слишком много весят). Я хочу взять все свои фотографии и прогнать их через какую-нибудь программу чтобы на выходе получились легковесные снимки размера 1600х1200, визуально выглядящие как сейчас. И в последствии залить их на пикасу. Вот что я хочу)
        • 0
          понятно, скорее всего в них много мусора (ненужных маркеров, точнее они иногда нужны, но в данном случаи нет), используйте JPEGTran, он все удалит, и если надо укажите метод отображения в браузере, скорее всего у него указан стандартный метод.
          • 0
            Спасибо за тран. Ни где не могу найти GUI для него. Нашел разве что бат скрипт:

            for %%c in (*.jpg) do call :shu "%%~nxc" "%%~nc.jpg"
            goto :eof
            :shu
            c:\jpegtran.exe -copy all -optimize -progressive "%~1" "%~2"

            Но я устал уже копировать этот файл во все папки и их под папки с фотографиями)
            Не подскажешь как изменить его чтобы можно было кинуть его в папку, и он нашел все .jpg в данной папке и её под-папках?
            • 0
              Не подскажешь как изменить его чтобы можно было кинуть его в папку, и он нашел все .jpg в данной папке и её под-папках?

              Вариант десктопный, может кому пригодится sheensay.ru/optimization-png-jpg (в конце статьи)
        • +1
          Я это делаю прогой VSO Image Resizer) Я так понял вам не особо нужно, чтобы файлы были оптимизированы) Достаточно изменить разрешение и качество JPEG понизить до приемлемого уровня? Ну, вот мои 18-мегапиксельные снимки весом в 12 Мб VSO пережимает в 1280x800 весом 90-100 Кб без особой потери качества) И всё это происходит пакетно, а также втыкается мой watermark)
        • +1
          DCE AutoEnhance
  • 0
    Перезалейте пожалуйста картинки.

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