О формате PNG. Краткий тест-драйв

[@porqz]

Ого, фишка с Fireworks впечатляет! Буду использовать, спасибо.

[@theKitich]

Пожалуйста.

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

[@FilimoniC]

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

[@theKitich]

в принципе, да.

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

[@AgentSmith]

Скриншоты никогда нельзя делать в JPEG, поскольку этот формат создан для фотографий — изображений с непредсказуемыми переходами между пикселями.
Скриншоты надо делать в форматах, в которых НЕ происходит потери качества изображения.
А JPEG сжимает именно за счёт потери качества

[@CAH4A]

Будет нормальная поддержка APNG — от GIF можно действительно отказаться.

[@DeadlyShadow]

или MPNG

[@FilimoniC]

Вы не учли что у PNG нет анимации (хотя, по слухам, она там где-то есть).

Вообще про оптимизацию PNG есть интересная инфа на сайте ТогоЧьеИмяНельзяНазывать.
А именно — в одном из разделов Техногрета

[@theKitich]

Согласен. Я, пока до конца дописал, об анимации уже забыл :)
Хотя ГИФ-анимация тоже постепенно отходит в прошлое. Чаще — интерактив какой-то во флеше.

[@Bal]

Да, но смайлики анимированные на флеше вставлять — это из пушки по воробьям :)

GIF в своё время начал «отходить» из-за своей лицензии. Но несколько лет назад её срок закончился и формат стал свободным. И снова немного ожил :)

Пока адекватной замены ему в плане анимации, увы, нет.

[@theKitich]

Согласен. ИМХО, GIF актуален для вот таких приятных «мелочей» :) Но это достаточно узкая ниша.

[@theKitich]

Ага, вижу. Но я же на него ссылался :)

[@CAH4A]

Что значит нет? Очень даже есть.

Только как я писал выше, IE6 его не поддерживает. Когда процент пользования IE6 упадёт до 1-2% можно будет пользовать APNG)

[@Vass]

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

[@CAH4A]

Это не мешает браузерам его понимать)
И даже если бы его признала группа разработчиков PNG, он бы врядли был в IE6 ))

[@DeadlyShadow]

неокторые браузеры понимают АПНГ

[@CAH4A]

и я об этом. Только ИЕ6 его не понимает. И ИЕ7 тоже. 50% пользователей — не ваши.

[@merlin-vrn]

MNG = анимированный PNG.

[@Aux]

Вообще-то PNG — это контейнер. В нём народ даже вектор хранит (в том же Fireworks можно сохранить слоёную картинку с текстами, которые потом можно будет править, слои с фильтрами и т.д.). Просто какие-то данные стандартизованы (видео в MNG — стандартизовано, а APNG — левак), а какие-то фишки не поддерживаются софтом (старые версии Opera умели играть MNG-ролики, но потом поддержку убрали).

[@entze]

24 – с альфа-каналом, а 32 – без.

разве не наоборот?

[@theKitich]

опечатался :)

[@theKitich]

исправил

[@pilezkiy]

в PNG-24 точно есть альфа

[@theKitich]

у них в разных продуктах разная терминология (см пост ниже habrahabr.ru/blogs/web_design/45242/#comment_1141528)

[@magic4x]

PNG-24 — это PNG-8 с альфа-каналом.
и в итоге их целых три.
но PNG-24 пережевывают не все браузеры (если не ошибаюсь только IE6 :)
Про png очень классно написал Сергей Чикуенок из студии Лебедева.
Часть первая, вторая, третья, четвертая.
Советую.

[@kmike]

PNG-24 — это никак не PNG-8 с альфа-каналом)
в IE6, насколько мне известно, альфа работает только 0/1, без градаций

[@magic4x]

спасибо за поправку.

[@theKitich]

Согласен про Чикуенка :)

Но с первым утверждением — никак. У PNG-8 и PNG-24 само изображение по-разному хранится. PNG-8 индексный, как GIF, а PNG-24 — так сказать, полноцвет.

[@pilezkiy]

это в фотошопе, а файрворкс ща установлю — интересно)

[@theKitich]

как я понял, у них еще и единого определения нет.

В фотошопе 24 может быть с или без канала. То есть, это значит 24 бита на цвет + маска.

В файрворкс, соответственно, 24 бита чистый цвет, 32=24+8 — с альфа-каналом.

Ну, и проведенный эксперимент не опровергает мою гипотезу — в файрворкс у PNG-24 прозрачности не было.

[@theKitich]

да, опечатка :):)

[@merlin-vrn]

В png есть два числа — «бит на канал» и «число каналов». Бит на канал — до 16, число каналов — до 8, если не изменяет память.

[@theKitich]

Возможно. Здесь я не специалист.

А можно подробнее?

[@DeadlyShadow]

8 каналов это как?)

[@dnska]

Спасибо! Как раз недавно начал интересоваться этим форматом и ваш материал пришелся очень кстати :)

[@theKitich]

пожалуйста )

[@dnska]

возник такой вопрос: а если нужно макс. качество и размер не важен (например для фото) — что подойдет лучше — JPEG или PNG?

[@theKitich]

Если совсем не важен размер, то и все равно что. В том же JPEG можно и без сжатия сохранить. В PNG применяется сжатие без потерь.

Но в итоге JPEG будет меньше весить. По крайней мере, у меня так получается

[@apkaxa]

Как сохранить изображение в jpeg без сжатия, если он является алогритмом сжатия изображения с потерей качества?

[@merlin-vrn]

en.wikipedia.org/wiki/Lossless_JPEG

[@theKitich]

Думаю, если сохранять с качеством 100% никаких потерь не должно быть.

[@merlin-vrn]

будут

[@theKitich]

Спасибо, а я-то верил… :(

[@merlin-vrn]

Ну, я чуть выше кинул ссылку в Википедию… про Lossless JPEG…

С одной стороны, было бы очевидно, чтобы на качестве 100% программа автоматически переключала компрессор в режим Lossless… С другой стороны, если не ошибаюсь, для этого есть специальная галочка.

[@theKitich]

А оно, оказывается, не очевидно )
Вот в том-то и проблема, что никогда такой галочки не видел :(

[@FloppyFormator]

На сайте у СамиЗнаетеКого было написано, что 100% качество в JPEG — всего лишь математический предел алгоритма, совсем не означающий отсутствие потерь в качестве.

[@Aux]

PNG, потому как Lossless JPEG не особо распространён.

[@dnska]

мои догадки о том, что PNG это что-то навроде FLAC\APE для картинок, успешно подтвердились :) ура:)

[@gdX]

Смотря откуда фотка появилась и для чего в дальнейшем её сохранять.
Большинство фотоаппаратов по умолчанию фотографируют в jpeg и при чем не с лучшим качеством.

[@dnska]

в моем случае это RAW -> TIFF -> обработка -> PSD ->

[@theKitich]

кстати, TIFF с LZW-сжатием — вариант. Хотя используется скорее не для веба, а для полиграфии. Лучше, наверное, действительно по-вашему

[@dnska]

и снова благодарю :)

[@linche]

еще бы ослик без костылей его отображал…

[@merlin-vrn]

В PNG не то, чтобы «более продвинутый алгортм», просто там алгоритм без патентных ограничений. Так-то они все в 2004 году закончились, так что сегодня это не актуально, а вот в 1995 было очень даже.

А вообще алгоритм сжатия в PNG — совершенно тот же самый, что и в ZIP-файлах — Deflate, разработка Фила Каца.

[@theKitich]

Просто натыкался на много упоминаний, будто более продвинутый. А патенты — это как первопричина.

[@kmike]

Алгоритм более продвинутый. Кроме вопроса «как сжимать» есть еще вопрос «в каком порядке брать данные для сжатия, чтобы получить лучший результат». И алгоритм в PNG как раз учитывает то, что данные — 2х-мерная картинка, а не просто набор байт. Если копнуть глубже, там есть специальные алгоритмы для сжатия не только однотонных областей, но и градиентов. Можно даже выбирать для разных областей картинки разные алгоритмы сжатия. Чем, собственно, и занимаются утилиты типа PNGOut, OptiPNG и другие.

[@merlin-vrn]

Там возможно пять типов препроцессинга перед тем, как отправить в Deflate.

Но это всё-таки препроцессинг. Зачатки вейвлета, да.

[@merlin-vrn]

Точнее, в самом PNG это называется «фильтрами»

[@DeadlyShadow]

точнее «дельта фильтрами»

[@Intelligent]

хотелось бы еще выход в свет/распространение анимированного PNG формата

[@artyfarty]

А как у Самого Лучшего Браузера™ с PNG-8+Alpha?

[@theKitich]

даёт прозрачность, без полупрозрачности (получается, что лучше чем PNG-24 поддерживает) — сам не пробовал, инфа взята по ссылке в статье

[@nerezus]

> Но мои замеры приводились без потери качества – JPEG 100%.
В 100% разве нет потери качества? Мне просто интересно.

[@theKitich]

я старался :) и ошибся

habrahabr.ru/blogs/web_design/45242/#comment_1141584 — тут уже обсудили

[@kmike]

Извините, но статья не очень компетентна.

«Так как PNG-24 использует полную палитру цветов, сравнивать его с GIF бесполезно – он сразу проигрывает в итоговом размере файла во много раз.» — неправда/преувеличение. 24бита на пиксел — это без учета сжатия, со сжатием — меньше. К тому же не надо палитру хранить.

«PNG vs JPEG
А в этой битве, если прозрачность нам не нужна, PNG проигрывает.» Неправда. Сравнили мягкое с холодным. JPEG лучше подходит для фотографий (куча цветов, все нерегулярное). PNG — для другой графики (градиенты, однотонные участки и т.д. — а такого в вебе, как мне кажется, больше, чем фото). На «своем» поле PNG будет жать значительно лучше, чем JPEG. Обычно даже на глаз легко определить, чем лучше жать.
+JPEG без потерь будет сжимать гораздо хуже, чем PNG без потерь. +Jpeg 100% — это все-таки с потерями, абсолютно бессмысленный формат, как мне кажется, только если совместимость требуется.

«OptiPNG – не имеет графической оболочки и работает из командной строки. По непроверенным данным процент сжатия меньше.» Ну данные действительно непроверенные, это раз. А 2 — имеется плагин OptiPNG к Paint.net. Очень удобный. Ставишь плагин, выбираешь «Save as OptiPNG» (что-то такое), вылезает меню, где можно настроить тип PNG, посмотреть превью сжатого изображения (не попортилось ли чего, например, из-за PNG-8) и его размер для заданных параметров. Когда поставил — радовался, размер почти всех png, созданных в fireworks (flattened png), удалось уменьшить раза в 2. Для пакетной обработки не очень подходит, но для тонкой настройки, я бы сказал, вне конкуренции.

«PNG-8 в большинстве случаев уделывает и GIF, и PNG-24», «Для прозрачных элементов дизайна стоит использовать PNG-8 (очень редко PNG-24)». Не согласен. PNG-8 — когда на картинке не очень много цветов, да. Если цветов много (больше 2^8), то получим сжатие с потерями. Стоит на картинке появиться градиенту, как PNG-24 уделывает PNG-8 ввиду того, что PNG-8 начинает портить картинку. Т.е. говорить, что PNG-24 использовать стоит «очень редко» не стоит. +В маленьких картинках хранение палитры может быть накладно.

Еще можно было бы рассказать про Fireworks PNG, забавная штука.

Чтобы не только все ругать, предложу свой алгоритм действий:
1. Фотография — жмем JPEG'ом. Стоит учесть, что на высоком качестве PNG начинает уделывать JPEG даже на фотографиях.
2. Веб-графика — жмем в пнг. С помощью OptiPNG выбираем наилучший формат: grayscale (его тоже забывать не следует, часто хорошая штука, в статье не было почему-то про него), PNG-8, PNG-24, PNG-32, в таком порядке. Выбираем тот, при котором превью не портится, и размер файла минимальный.

[@kmike]

Схема «сохраняем в Fireworks, оптимизируем в PNGOut» хуже схемы «оптимизируем в OptiPNG».
1е — надо 2 программы
2е — сразу не виден результат. Если при сохранении из Fireworks в png-8 файл получился меньше, чем в png-24, не факт, что он будет меньше после PNGOut/OptiPNG. А в OptiPNG(+Paint.net) можно сразу по-быстрому посмотреть все варианты, причем сразу будет виден как итоговый размер файла, так и итоговая картинка.

А вообще я, наверное, черезчур на статью наехал, нормальная статья, кого-нибудь сподвигнет посмотреть на png повнимательнее.

[@theKitich]

Почему? Критика конструктивная. Надо подумать — многое стоит подправить. Тем более, многие варианты прокрутить не было сил и возможности.

Всё же тестдрайв был краткий :)

[@dulsineia]

png — лучше подходит для веб-графики, точно.



www.labnol.org/software/tutorials/jpeg-vs-png-image-quality-or-bandwidth/5385/

[@nooze]

:)

[@udivankin]

Скриншоты PNG выложены в JPEG :) смешно)
И еще, почему бы не сравнить не только размеры файлов, но и специфику потерь при сжатии? и качество изображения при сопоставимом размере файла?
ЗЫ: При экспорте для Web у png-8 присутствует альфаканал. Глюк?

[@zaartix]

смешнее было бы, если отджипегенную картинку (с компрессией <=80) сохранить в пнг

[@kmike]

чем смешнее-то? ну будет размер побольше, ну и что, зато хоть бредовых артефактов сжатия не появится, как в случае со скриншотами png в jpeg.

[@zaartix]

так ведь смысл то комментария и был в том, что картинка будет уже с артефактами и ее сохранить в пнг =)

Ну т.е. save as JPEG, open, save as PNG

[@zaartix]

да ладно Вам придираться, тема затронута хорошая, уверен, что многие для себя подчерпнули пользу

а вообще

Ты вообще упал что-ли?

и

сразу выдаёт ламера или чайника

тоже наводит на некоторые мысли (из мира толкиена)

[@zaartix]

пардон, не посмотрел профиль

[@zaartix]

для себя я узнал, что Png-8 умеет делать полупрозрачности, к примеру

минус за подачу материала, крайне не уважительно было написано, да и не совсем по теме. В каком формате сохранять рисунки для статьи не касается самой статьи, а вы явно указали:

Ой не пиши больше на эту тему…

можно было сделать замечание, а не ставить диагноз, имхо

[@theKitich]

как видите, принимаются )

[@theKitich]

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

И вообще из комментариев вынес для себя много ценного.

А почему, если не секрет, такое начальное мнение сложилось?

[@theKitich]

жаль, что так показалось (

Но я много дописал — до сих пор создается такое впечатление от прочтения?

[@theKitich]

спасибо )

[@zaartix]

ну вот видите, стоило чуток копнуть, оказалось не все так плохо, как думалось в начале.

[@theKitich]

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

[@LeniVetc]

Слово «безсмысленным» пишется через два «с».
Извините, просто резануло глаз.

[@theKitich]

в каком месте? О_О

[@theKitich]

нашел. исправил. спасибо

[@homm]

> Но мои замеры приводились без потери качества – JPEG 100%.
А кто вам сказал, что JPEG 100% — это сжатие без потери качества? Это не правда.

[@egoholic]

Встретил в тексте вот это: JPEG 100%.

Автор наверняка знает, но хочу заметить, что 100% качество ничем не отличается от 90%, только размером. В идеале для вебграфики подходит даже 50% качество, разница без увеличения и всматривания не отличима, а размер много меньше выходит.

Автору статья спасибо, много нового узнал, особенно про сжатие.

[@theKitich]

не скажите, что не отличима — зависит от изображения

[@artyfarty]

Нет, 50 уже очень заметно ИМХО. Я использую 70±10

[@vitvor]

при JPEG 100% фотошоп встраивает много своей ненужной информации в файл. Если нужно максимальное качество без лишней ерунды, то ставить нужно не более 95%.

[@johnbl4ck]

еще бы е%аный шестой осел нормально работал с прозрачностью… а то приходится вечно костыли ставить в виде пнг фиксов.

кстати, вот очень хороший пнг фикс, который обрабатывает background-position/ background-repeat (других скриптов и .htc могущих это не знаю:
www.twinhelix.com/test/iepngfix.zip

[@CAH4A]

тормозит, если в about:blank сделать
body { background: url(bg.png); },
где bg.png 100*100 с альфой? :)

[@Mordraug]

тормозит, потомучто для пнг с альфоканалом эта штука, по-сути, генерит кучу контейнеров, которым и назначается фон, а потом еще и фильтр иешный… баловство это все и не больше.

[@CAH4A]

если бы не тормозило — можно было бы сказать, что победили в IE6 repeat PNG background,
а так это не решение, и даже не костыль, а скорее какая тормознутая эмуляция.

[@CAH4A]

но ведь это не победа над «IE6 repeat PNG background»

[@johnbl4ck]

из этого делаем вывод — IE6 непобедим! =)

[@modernstyle]

спасибо за статью.
про анимацию в вердикте не упомянули.

[@RomBinDaHouse]

«со студии Лебедева»…

И еще: много картинок нет в статье, зачем людей пугать? =)

[@theKitich]

не понял :(

[@RomBinDaHouse]

1) «из»

2) 8 превьюшек не повод для паники, даже для DialUp

[@theKitich]

1) да, уже исправил )
2) согласен. просто сначала попытался исходные изображения вставить… получалось тяжеловато.

[@Makaveli]

Спасибо автору, давно хотелось как-то сравнить эти форматы, а тут статья. Если бы еще IE 6 поддерживал png нормально…

[@kulikoff]

Неплохая статья.
Правда я слегка удивлен, что многие не знают про Fireworks
Я его использовал когда он была еще от Macromedia. Отличный продукт. Как по мне, то для подготовки макетов страниц сайта он даже больше катит чем Фотошоп.

[@FrankSinatra]

>Спасибо автору, давно хотелось как-то сравнить эти форматы, а тут статья. Если бы
> еще IE 6 поддерживал png нормально…
если сильно захотет то можно и его научить, через фильтры с костылями, но можно

[@FrankSinatra]

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my.png', sizingMethod='scale');
Работает ведь

[@johnbl4ck]

попробуй сделать это для элемента с назначенным позиционированием для bg. будешь удивлен…

[@Regis]

Это такая простенькая утилитка PNG Monster. Предоставляет простенький графический интерфейс к следующим компрессорам:
* PNGRewrite
* PNGCrush
* OptiPNG
* PNGOut
* AdvPNG
Принцип работы — тупо прогоняет файлы через ве и выбирает лучший результат для каждого конкретного файла.

Если вам нужно всего лишь просто и быстро пожать файлы и у вас не промышленные масштабы, то рекомендую.

[@Regis]

* Есть такая…

[@theKitich]

спасибо
обязательно поиграюсь

[@Regis]

Эм… Большинству этих компрессоров — много-много лет, как и формату. Можно и обновить, но не удивляйтесь то последняя версия может быть 2-3 года давности, а из изменений там только добавление какой-нибудь специфической опции :)

[@crwin]

что-то не нашел консольный optipng. и есть ли смысл его искать? :)

[@theKitich]

Я, к сожалению, уже снес. Но он на сайте производителя как раз консольный. Абсолютно бесплатно :)

[@crwin]

а, разобрался. сорре )

[@dark_ruby]

эфффективнее

3 «ф» для подчеркивания еффективности?

[@theKitich]

благодарю. исправлено

[@Hitryi_Pryanik]

а) gif оставил только для анимации. Может когда начнут поддерживать анимацию в png, тогда гиф будет на свалке.
б) png пересжимаю с помощью брута в pngCrush (а если почитать хэлп и поискать по незнакомым словам, встречающимся там, можно мнооого чё узнать)
в) png отлично подходит для серых изображений без потери. очень эффективно сжимает.
г) сравнивать с jpeg без смысла, эти форматы для разных типов изображений и разных задач
д) вероятно автор не заходил в техногрет, там подробне и конкретнее.
е) при всей моей нелюбви к Fireworks скажу, что с самого начала программулина очень грамотно работала с png, там слои изначально были как раз в png (плюс гамма-коррекция и эффекты)

[@freakqueen]

в примере с кружками i.i.ua/photo/images/pic/4/3/1823134_c6fb347a.jpg PNG-24 ясно выигравет у GIF и PNG-8
в случае с черным плакатом, я бы так не сказала, скорее там лучше выглядит GIF i.i.ua/photo/images/pic/3/3/1823133_e6694831.jpg

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

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

[@theKitich]

ну про большие тут в комментариях говорили.

Я сам когда начал иллюстрации в PNG пережимать, обнаружил выигрыш действительно. Раза в полтора — потом в обзоре дописал.

[@dime]

1. png не всегда меньше аналогичного gif — на мелких файлах гиф выигрывает.
2. jpeg без потерь — это, по-моему, сферический конь в вакууме. Я так и не понял существует ли он на самом деле и кто его понимает :). Зато есть jpeg2000 в котором есть режим без потерь. Жмёт хорошо, браузерами напрямую не понимается (хотя я видел где-то встраиваемый явский апплет в качестве декодера). Ещё jpeg2000 умеет цвет 16-бит на канал, чего не умеет обычный jpeg. Так что, если кому-то надо, вот вариант лучше, чем tiff c lzw сжатием.

[@theKitich]

1. Я же вроде так и писал? (
2. Не существует :) там, выше, уже обсудили

[@dime]

1. А, пропустил, значит.
2. Обсудили, что жпег 100% не есть лозлесс. Но сам по себе лозлесс жипег существует хотя бы как понятие :). А в инкарнации жипег2000 существует и в натуре — там он честный.

[@theKitich]

кстати, про 2000й не говорили :)

[@vitvor]

Чисто для информации: png читается как «пинг», а не пэ-эн-гэ :)

[@propovednik]

А почему же тогда не «пи-эн-жи», лингвист вы наш?

[@vitvor]

нахуй, это туда ->