Pull to refresh

Comments 143

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

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

Но я же не изображение сравниваю, а только итоговый размер файла. Там упомянуто было — «без компрессии». Так что, в конкретном случае — главное циферки; хотя в целом Вы правы.
Скриншоты никогда нельзя делать в JPEG, поскольку этот формат создан для фотографий — изображений с непредсказуемыми переходами между пикселями.
Скриншоты надо делать в форматах, в которых НЕ происходит потери качества изображения.
А JPEG сжимает именно за счёт потери качества
Будет нормальная поддержка APNG — от GIF можно действительно отказаться.
Вы не учли что у PNG нет анимации (хотя, по слухам, она там где-то есть).

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

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

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

Только как я писал выше, IE6 его не поддерживает. Когда процент пользования IE6 упадёт до 1-2% можно будет пользовать APNG)
К сожалению формат APNG не признан официальной группой разработчиков PNG, поэтому пока что, его судьба неясна.
Это не мешает браузерам его понимать)
И даже если бы его признала группа разработчиков PNG, он бы врядли был в IE6 ))
неокторые браузеры понимают АПНГ
и я об этом. Только ИЕ6 его не понимает. И ИЕ7 тоже. 50% пользователей — не ваши.
Вообще-то PNG — это контейнер. В нём народ даже вектор хранит (в том же Fireworks можно сохранить слоёную картинку с текстами, которые потом можно будет править, слои с фильтрами и т.д.). Просто какие-то данные стандартизованы (видео в MNG — стандартизовано, а APNG — левак), а какие-то фишки не поддерживаются софтом (старые версии Opera умели играть MNG-ролики, но потом поддержку убрали).
24 – с альфа-каналом, а 32 – без.

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

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

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

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

Ну, и проведенный эксперимент не опровергает мою гипотезу — в файрворкс у PNG-24 прозрачности не было.
В png есть два числа — «бит на канал» и «число каналов». Бит на канал — до 16, число каналов — до 8, если не изменяет память.
Возможно. Здесь я не специалист.

А можно подробнее?
UFO landed and left these words here
UFO landed and left these words here
Спасибо! Как раз недавно начал интересоваться этим форматом и ваш материал пришелся очень кстати :)
возник такой вопрос: а если нужно макс. качество и размер не важен (например для фото) — что подойдет лучше — JPEG или PNG?
Если совсем не важен размер, то и все равно что. В том же JPEG можно и без сжатия сохранить. В PNG применяется сжатие без потерь.

Но в итоге JPEG будет меньше весить. По крайней мере, у меня так получается
Как сохранить изображение в jpeg без сжатия, если он является алогритмом сжатия изображения с потерей качества?
Думаю, если сохранять с качеством 100% никаких потерь не должно быть.
Ну, я чуть выше кинул ссылку в Википедию… про Lossless JPEG…

С одной стороны, было бы очевидно, чтобы на качестве 100% программа автоматически переключала компрессор в режим Lossless… С другой стороны, если не ошибаюсь, для этого есть специальная галочка.
А оно, оказывается, не очевидно )
Вот в том-то и проблема, что никогда такой галочки не видел :(
На сайте у СамиЗнаетеКого было написано, что 100% качество в JPEG — всего лишь математический предел алгоритма, совсем не означающий отсутствие потерь в качестве.
PNG, потому как Lossless JPEG не особо распространён.
мои догадки о том, что PNG это что-то навроде FLAC\APE для картинок, успешно подтвердились :) ура:)
Смотря откуда фотка появилась и для чего в дальнейшем её сохранять.
Большинство фотоаппаратов по умолчанию фотографируют в jpeg и при чем не с лучшим качеством.
в моем случае это RAW -> TIFF -> обработка -> PSD ->
кстати, TIFF с LZW-сжатием — вариант. Хотя используется скорее не для веба, а для полиграфии. Лучше, наверное, действительно по-вашему
еще бы ослик без костылей его отображал…
В PNG не то, чтобы «более продвинутый алгортм», просто там алгоритм без патентных ограничений. Так-то они все в 2004 году закончились, так что сегодня это не актуально, а вот в 1995 было очень даже.

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

Но это всё-таки препроцессинг. Зачатки вейвлета, да.
Точнее, в самом PNG это называется «фильтрами»
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
хотелось бы еще выход в свет/распространение анимированного PNG формата
А как у Самого Лучшего Браузера™ с PNG-8+Alpha?
даёт прозрачность, без полупрозрачности (получается, что лучше чем PNG-24 поддерживает) — сам не пробовал, инфа взята по ссылке в статье
> Но мои замеры приводились без потери качества – JPEG 100%.
В 100% разве нет потери качества? Мне просто интересно.
Извините, но статья не очень компетентна.

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

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

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

Ну т.е. save as JPEG, open, save as PNG
UFO landed and left these words here
да ладно Вам придираться, тема затронута хорошая, уверен, что многие для себя подчерпнули пользу

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

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

тоже наводит на некоторые мысли (из мира толкиена)
пардон, не посмотрел профиль
UFO landed and left these words here
для себя я узнал, что Png-8 умеет делать полупрозрачности, к примеру

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


можно было сделать замечание, а не ставить диагноз, имхо
UFO landed and left these words here
как видите, принимаются )
UFO landed and left these words here
Ни в коем случае. Абсолютно согласен, что я не специалист по внутренностям форматов, и времени не было прогнать через тот же фотошоп пару десятков изображений. Поэтому конструктивной критике я рад.

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

А почему, если не секрет, такое начальное мнение сложилось?
UFO landed and left these words here
жаль, что так показалось (

Но я много дописал — до сих пор создается такое впечатление от прочтения?
UFO landed and left these words here
ну вот видите, стоило чуток копнуть, оказалось не все так плохо, как думалось в начале.
Как я уже упоминал выше, целью не являлось показывать артефакты, а лишь килобайты-килобайты-килобайты. В другом случае, Вы, конечно, правы.
UFO landed and left these words here
Слово «безсмысленным» пишется через два «с».
Извините, просто резануло глаз.
нашел. исправил. спасибо
> Но мои замеры приводились без потери качества – JPEG 100%.
А кто вам сказал, что JPEG 100% — это сжатие без потери качества? Это не правда.
Встретил в тексте вот это: JPEG 100%.

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

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

не скажите, что не отличима — зависит от изображения
Нет, 50 уже очень заметно ИМХО. Я использую 70±10
при JPEG 100% фотошоп встраивает много своей ненужной информации в файл. Если нужно максимальное качество без лишней ерунды, то ставить нужно не более 95%.
еще бы е%аный шестой осел нормально работал с прозрачностью… а то приходится вечно костыли ставить в виде пнг фиксов.

кстати, вот очень хороший пнг фикс, который обрабатывает background-position/ background-repeat (других скриптов и .htc могущих это не знаю:
www.twinhelix.com/test/iepngfix.zip
тормозит, если в about:blank сделать
body { background: url(bg.png); },
где bg.png 100*100 с альфой? :)
тормозит, потомучто для пнг с альфоканалом эта штука, по-сути, генерит кучу контейнеров, которым и назначается фон, а потом еще и фильтр иешный… баловство это все и не больше.
если бы не тормозило — можно было бы сказать, что победили в IE6 repeat PNG background,
а так это не решение, и даже не костыль, а скорее какая тормознутая эмуляция.
UFO landed and left these words here
но ведь это не победа над «IE6 repeat PNG background»
из этого делаем вывод — IE6 непобедим! =)
спасибо за статью.
про анимацию в вердикте не упомянули.
UFO landed and left these words here
«со студии Лебедева»…

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

2) 8 превьюшек не повод для паники, даже для DialUp
1) да, уже исправил )
2) согласен. просто сначала попытался исходные изображения вставить… получалось тяжеловато.
Спасибо автору, давно хотелось как-то сравнить эти форматы, а тут статья. Если бы еще IE 6 поддерживал png нормально…
Неплохая статья.
Правда я слегка удивлен, что многие не знают про Fireworks
Я его использовал когда он была еще от Macromedia. Отличный продукт. Как по мне, то для подготовки макетов страниц сайта он даже больше катит чем Фотошоп.

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

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my.png', sizingMethod='scale');
Работает ведь
попробуй сделать это для элемента с назначенным позиционированием для bg. будешь удивлен…
Это такая простенькая утилитка PNG Monster. Предоставляет простенький графический интерфейс к следующим компрессорам:
* PNGRewrite
* PNGCrush
* OptiPNG
* PNGOut
* AdvPNG
Принцип работы — тупо прогоняет файлы через ве и выбирает лучший результат для каждого конкретного файла.

Если вам нужно всего лишь просто и быстро пожать файлы и у вас не промышленные масштабы, то рекомендую.
спасибо
обязательно поиграюсь
UFO landed and left these words here
Эм… Большинству этих компрессоров — много-много лет, как и формату. Можно и обновить, но не удивляйтесь то последняя версия может быть 2-3 года давности, а из изменений там только добавление какой-нибудь специфической опции :)
UFO landed and left these words here
что-то не нашел консольный optipng. и есть ли смысл его искать? :)
Я, к сожалению, уже снес. Но он на сайте производителя как раз консольный. Абсолютно бесплатно :)
а, разобрался. сорре )
эфффективнее
3 «ф» для подчеркивания еффективности?
а) gif оставил только для анимации. Может когда начнут поддерживать анимацию в png, тогда гиф будет на свалке.
б) png пересжимаю с помощью брута в pngCrush (а если почитать хэлп и поискать по незнакомым словам, встречающимся там, можно мнооого чё узнать)
в) png отлично подходит для серых изображений без потери. очень эффективно сжимает.
г) сравнивать с jpeg без смысла, эти форматы для разных типов изображений и разных задач
д) вероятно автор не заходил в техногрет, там подробне и конкретнее.
е) при всей моей нелюбви к Fireworks скажу, что с самого начала программулина очень грамотно работала с png, там слои изначально были как раз в png (плюс гамма-коррекция и эффекты)
в примере с кружками 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. интересно было бы узнать про большие картинки — насколько большие рисунки выглядят в нем хорошо и почему =)
ну про большие тут в комментариях говорили.

Я сам когда начал иллюстрации в PNG пережимать, обнаружил выигрыш действительно. Раза в полтора — потом в обзоре дописал.
1. png не всегда меньше аналогичного gif — на мелких файлах гиф выигрывает.
2. jpeg без потерь — это, по-моему, сферический конь в вакууме. Я так и не понял существует ли он на самом деле и кто его понимает :). Зато есть jpeg2000 в котором есть режим без потерь. Жмёт хорошо, браузерами напрямую не понимается (хотя я видел где-то встраиваемый явский апплет в качестве декодера). Ещё jpeg2000 умеет цвет 16-бит на канал, чего не умеет обычный jpeg. Так что, если кому-то надо, вот вариант лучше, чем tiff c lzw сжатием.
1. Я же вроде так и писал? (
2. Не существует :) там, выше, уже обсудили
1. А, пропустил, значит.
2. Обсудили, что жпег 100% не есть лозлесс. Но сам по себе лозлесс жипег существует хотя бы как понятие :). А в инкарнации жипег2000 существует и в натуре — там он честный.
кстати, про 2000й не говорили :)
Чисто для информации: png читается как «пинг», а не пэ-эн-гэ :)
UFO landed and left these words here
А почему же тогда не «пи-эн-жи», лингвист вы наш?
UFO landed and left these words here
Only those users with full accounts are able to leave comments. Log in, please.