Комментарии 143
Ого, фишка с Fireworks впечатляет! Буду использовать, спасибо.
Выкладывать скриншоты сравнния вайлов сжатых разными способами наду уж точно не в JPEG. В остальном очень понравилось
Будет нормальная поддержка APNG — от GIF можно действительно отказаться.
Вы не учли что у PNG нет анимации (хотя, по слухам, она там где-то есть).
Вообще про оптимизацию PNG есть интересная инфа на сайте ТогоЧьеИмяНельзяНазывать.
А именно — в одном из разделов Техногрета
Вообще про оптимизацию PNG есть интересная инфа на сайте ТогоЧьеИмяНельзяНазывать.
А именно — в одном из разделов Техногрета
Согласен. Я, пока до конца дописал, об анимации уже забыл :)
Хотя ГИФ-анимация тоже постепенно отходит в прошлое. Чаще — интерактив какой-то во флеше.
Хотя ГИФ-анимация тоже постепенно отходит в прошлое. Чаще — интерактив какой-то во флеше.
Ага, вижу. Но я же на него ссылался :)
Что значит нет? Очень даже есть.
Только как я писал выше, IE6 его не поддерживает. Когда процент пользования IE6 упадёт до 1-2% можно будет пользовать APNG)
Только как я писал выше, IE6 его не поддерживает. Когда процент пользования IE6 упадёт до 1-2% можно будет пользовать APNG)
MNG = анимированный PNG.
Вообще-то PNG — это контейнер. В нём народ даже вектор хранит (в том же Fireworks можно сохранить слоёную картинку с текстами, которые потом можно будет править, слои с фильтрами и т.д.). Просто какие-то данные стандартизованы (видео в MNG — стандартизовано, а APNG — левак), а какие-то фишки не поддерживаются софтом (старые версии Opera умели играть MNG-ролики, но потом поддержку убрали).
24 – с альфа-каналом, а 32 – без.
разве не наоборот?
опечатался :)
в PNG-24 точно есть альфа
у них в разных продуктах разная терминология (см пост ниже habrahabr.ru/blogs/web_design/45242/#comment_1141528)
PNG-24 — это PNG-8 с альфа-каналом.
и в итоге их целых три.
но PNG-24 пережевывают не все браузеры (если не ошибаюсь только IE6 :)
Про png очень классно написал Сергей Чикуенок из студии Лебедева.
Часть первая, вторая, третья, четвертая.
Советую.
и в итоге их целых три.
но PNG-24 пережевывают не все браузеры (если не ошибаюсь только IE6 :)
Про png очень классно написал Сергей Чикуенок из студии Лебедева.
Часть первая, вторая, третья, четвертая.
Советую.
это в фотошопе, а файрворкс ща установлю — интересно)
как я понял, у них еще и единого определения нет.
В фотошопе 24 может быть с или без канала. То есть, это значит 24 бита на цвет + маска.
В файрворкс, соответственно, 24 бита чистый цвет, 32=24+8 — с альфа-каналом.
Ну, и проведенный эксперимент не опровергает мою гипотезу — в файрворкс у PNG-24 прозрачности не было.
В фотошопе 24 может быть с или без канала. То есть, это значит 24 бита на цвет + маска.
В файрворкс, соответственно, 24 бита чистый цвет, 32=24+8 — с альфа-каналом.
Ну, и проведенный эксперимент не опровергает мою гипотезу — в файрворкс у PNG-24 прозрачности не было.
Спасибо! Как раз недавно начал интересоваться этим форматом и ваш материал пришелся очень кстати :)
пожалуйста )
возник такой вопрос: а если нужно макс. качество и размер не важен (например для фото) — что подойдет лучше — JPEG или PNG?
Если совсем не важен размер, то и все равно что. В том же JPEG можно и без сжатия сохранить. В PNG применяется сжатие без потерь.
Но в итоге JPEG будет меньше весить. По крайней мере, у меня так получается
Но в итоге JPEG будет меньше весить. По крайней мере, у меня так получается
Как сохранить изображение в jpeg без сжатия, если он является алогритмом сжатия изображения с потерей качества?
Думаю, если сохранять с качеством 100% никаких потерь не должно быть.
На сайте у СамиЗнаетеКого было написано, что 100% качество в JPEG — всего лишь математический предел алгоритма, совсем не означающий отсутствие потерь в качестве.
PNG, потому как Lossless JPEG не особо распространён.
Смотря откуда фотка появилась и для чего в дальнейшем её сохранять.
Большинство фотоаппаратов по умолчанию фотографируют в jpeg и при чем не с лучшим качеством.
Большинство фотоаппаратов по умолчанию фотографируют в jpeg и при чем не с лучшим качеством.
и снова благодарю :)
еще бы ослик без костылей его отображал…
В PNG не то, чтобы «более продвинутый алгортм», просто там алгоритм без патентных ограничений. Так-то они все в 2004 году закончились, так что сегодня это не актуально, а вот в 1995 было очень даже.
А вообще алгоритм сжатия в PNG — совершенно тот же самый, что и в ZIP-файлах — Deflate, разработка Фила Каца.
А вообще алгоритм сжатия в PNG — совершенно тот же самый, что и в ZIP-файлах — Deflate, разработка Фила Каца.
Просто натыкался на много упоминаний, будто более продвинутый. А патенты — это как первопричина.
Алгоритм более продвинутый. Кроме вопроса «как сжимать» есть еще вопрос «в каком порядке брать данные для сжатия, чтобы получить лучший результат». И алгоритм в PNG как раз учитывает то, что данные — 2х-мерная картинка, а не просто набор байт. Если копнуть глубже, там есть специальные алгоритмы для сжатия не только однотонных областей, но и градиентов. Можно даже выбирать для разных областей картинки разные алгоритмы сжатия. Чем, собственно, и занимаются утилиты типа PNGOut, OptiPNG и другие.
хотелось бы еще выход в свет/распространение анимированного PNG формата
А как у Самого Лучшего Браузера™ с PNG-8+Alpha?
> Но мои замеры приводились без потери качества – JPEG 100%.
В 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, в таком порядке. Выбираем тот, при котором превью не портится, и размер файла минимальный.
«Так как 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 повнимательнее.
1е — надо 2 программы
2е — сразу не виден результат. Если при сохранении из Fireworks в png-8 файл получился меньше, чем в png-24, не факт, что он будет меньше после PNGOut/OptiPNG. А в OptiPNG(+Paint.net) можно сразу по-быстрому посмотреть все варианты, причем сразу будет виден как итоговый размер файла, так и итоговая картинка.
А вообще я, наверное, черезчур на статью наехал, нормальная статья, кого-нибудь сподвигнет посмотреть на png повнимательнее.
png — лучше подходит для веб-графики, точно.
www.labnol.org/software/tutorials/jpeg-vs-png-image-quality-or-bandwidth/5385/
www.labnol.org/software/tutorials/jpeg-vs-png-image-quality-or-bandwidth/5385/
Скриншоты PNG выложены в JPEG :) смешно)
И еще, почему бы не сравнить не только размеры файлов, но и специфику потерь при сжатии? и качество изображения при сопоставимом размере файла?
ЗЫ: При экспорте для Web у png-8 присутствует альфаканал. Глюк?
И еще, почему бы не сравнить не только размеры файлов, но и специфику потерь при сжатии? и качество изображения при сопоставимом размере файла?
ЗЫ: При экспорте для Web у png-8 присутствует альфаканал. Глюк?
НЛО прилетело и опубликовало эту надпись здесь
да ладно Вам придираться, тема затронута хорошая, уверен, что многие для себя подчерпнули пользу
а вообще
и
тоже наводит на некоторые мысли (из мира толкиена)
а вообще
Ты вообще упал что-ли?
и
сразу выдаёт ламера или чайника
тоже наводит на некоторые мысли (из мира толкиена)
пардон, не посмотрел профиль
НЛО прилетело и опубликовало эту надпись здесь
для себя я узнал, что Png-8 умеет делать полупрозрачности, к примеру
минус за подачу материала, крайне не уважительно было написано, да и не совсем по теме. В каком формате сохранять рисунки для статьи не касается самой статьи, а вы явно указали:
можно было сделать замечание, а не ставить диагноз, имхо
минус за подачу материала, крайне не уважительно было написано, да и не совсем по теме. В каком формате сохранять рисунки для статьи не касается самой статьи, а вы явно указали:
Ой не пиши больше на эту тему…
можно было сделать замечание, а не ставить диагноз, имхо
НЛО прилетело и опубликовало эту надпись здесь
как видите, принимаются )
НЛО прилетело и опубликовало эту надпись здесь
Ни в коем случае. Абсолютно согласен, что я не специалист по внутренностям форматов, и времени не было прогнать через тот же фотошоп пару десятков изображений. Поэтому конструктивной критике я рад.
И вообще из комментариев вынес для себя много ценного.
А почему, если не секрет, такое начальное мнение сложилось?
И вообще из комментариев вынес для себя много ценного.
А почему, если не секрет, такое начальное мнение сложилось?
Как я уже упоминал выше, целью не являлось показывать артефакты, а лишь килобайты-килобайты-килобайты. В другом случае, Вы, конечно, правы.
Слово «безсмысленным» пишется через два «с».
Извините, просто резануло глаз.
Извините, просто резануло глаз.
> Но мои замеры приводились без потери качества – JPEG 100%.
А кто вам сказал, что JPEG 100% — это сжатие без потери качества? Это не правда.
А кто вам сказал, что JPEG 100% — это сжатие без потери качества? Это не правда.
Встретил в тексте вот это: JPEG 100%.
Автор наверняка знает, но хочу заметить, что 100% качество ничем не отличается от 90%, только размером. В идеале для вебграфики подходит даже 50% качество, разница без увеличения и всматривания не отличима, а размер много меньше выходит.
Автору статья спасибо, много нового узнал, особенно про сжатие.
Автор наверняка знает, но хочу заметить, что 100% качество ничем не отличается от 90%, только размером. В идеале для вебграфики подходит даже 50% качество, разница без увеличения и всматривания не отличима, а размер много меньше выходит.
Автору статья спасибо, много нового узнал, особенно про сжатие.
еще бы е%аный шестой осел нормально работал с прозрачностью… а то приходится вечно костыли ставить в виде пнг фиксов.
кстати, вот очень хороший пнг фикс, который обрабатывает background-position/ background-repeat (других скриптов и .htc могущих это не знаю:
www.twinhelix.com/test/iepngfix.zip
кстати, вот очень хороший пнг фикс, который обрабатывает background-position/ background-repeat (других скриптов и .htc могущих это не знаю:
www.twinhelix.com/test/iepngfix.zip
тормозит, если в about:blank сделать
body { background: url(bg.png); },
где bg.png 100*100 с альфой? :)
body { background: url(bg.png); },
где bg.png 100*100 с альфой? :)
тормозит, потомучто для пнг с альфоканалом эта штука, по-сути, генерит кучу контейнеров, которым и назначается фон, а потом еще и фильтр иешный… баловство это все и не больше.
спасибо за статью.
про анимацию в вердикте не упомянули.
про анимацию в вердикте не упомянули.
НЛО прилетело и опубликовало эту надпись здесь
«со студии Лебедева»…
И еще: много картинок нет в статье, зачем людей пугать? =)
И еще: много картинок нет в статье, зачем людей пугать? =)
Спасибо автору, давно хотелось как-то сравнить эти форматы, а тут статья. Если бы еще IE 6 поддерживал png нормально…
Неплохая статья.
Правда я слегка удивлен, что многие не знают про Fireworks
Я его использовал когда он была еще от Macromedia. Отличный продукт. Как по мне, то для подготовки макетов страниц сайта он даже больше катит чем Фотошоп.
Правда я слегка удивлен, что многие не знают про Fireworks
Я его использовал когда он была еще от Macromedia. Отличный продукт. Как по мне, то для подготовки макетов страниц сайта он даже больше катит чем Фотошоп.
>Спасибо автору, давно хотелось как-то сравнить эти форматы, а тут статья. Если бы
> еще IE 6 поддерживал png нормально…
если сильно захотет то можно и его научить, через фильтры с костылями, но можно
> еще IE 6 поддерживал png нормально…
если сильно захотет то можно и его научить, через фильтры с костылями, но можно
Это такая простенькая утилитка PNG Monster. Предоставляет простенький графический интерфейс к следующим компрессорам:
* PNGRewrite
* PNGCrush
* OptiPNG
* PNGOut
* AdvPNG
Принцип работы — тупо прогоняет файлы через ве и выбирает лучший результат для каждого конкретного файла.
Если вам нужно всего лишь просто и быстро пожать файлы и у вас не промышленные масштабы, то рекомендую.
* PNGRewrite
* PNGCrush
* OptiPNG
* PNGOut
* AdvPNG
Принцип работы — тупо прогоняет файлы через ве и выбирает лучший результат для каждого конкретного файла.
Если вам нужно всего лишь просто и быстро пожать файлы и у вас не промышленные масштабы, то рекомендую.
* Есть такая…
спасибо
обязательно поиграюсь
обязательно поиграюсь
НЛО прилетело и опубликовало эту надпись здесь
Эм… Большинству этих компрессоров — много-много лет, как и формату. Можно и обновить, но не удивляйтесь то последняя версия может быть 2-3 года давности, а из изменений там только добавление какой-нибудь специфической опции :)
что-то не нашел консольный optipng. и есть ли смысл его искать? :)
а, разобрался. сорре )
эфффективнее3 «ф» для подчеркивания еффективности?
а) gif оставил только для анимации. Может когда начнут поддерживать анимацию в png, тогда гиф будет на свалке.
б) png пересжимаю с помощью брута в pngCrush (а если почитать хэлп и поискать по незнакомым словам, встречающимся там, можно мнооого чё узнать)
в) png отлично подходит для серых изображений без потери. очень эффективно сжимает.
г) сравнивать с jpeg без смысла, эти форматы для разных типов изображений и разных задач
д) вероятно автор не заходил в техногрет, там подробне и конкретнее.
е) при всей моей нелюбви к Fireworks скажу, что с самого начала программулина очень грамотно работала с png, там слои изначально были как раз в 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. интересно было бы узнать про большие картинки — насколько большие рисунки выглядят в нем хорошо и почему =)
в случае с черным плакатом, я бы так не сказала, скорее там лучше выглядит GIF i.i.ua/photo/images/pic/3/3/1823133_e6694831.jpg
насколько я помню с годик назад легкие PNG не очень хорошо ресайзились, с другой стороны, нечего наверное ресайзить нечто скаченное из интернета.
в целом спасибо — давно хотела обратить внимание на PNG. интересно было бы узнать про большие картинки — насколько большие рисунки выглядят в нем хорошо и почему =)
1. png не всегда меньше аналогичного gif — на мелких файлах гиф выигрывает.
2. jpeg без потерь — это, по-моему, сферический конь в вакууме. Я так и не понял существует ли он на самом деле и кто его понимает :). Зато есть jpeg2000 в котором есть режим без потерь. Жмёт хорошо, браузерами напрямую не понимается (хотя я видел где-то встраиваемый явский апплет в качестве декодера). Ещё jpeg2000 умеет цвет 16-бит на канал, чего не умеет обычный jpeg. Так что, если кому-то надо, вот вариант лучше, чем tiff c lzw сжатием.
2. jpeg без потерь — это, по-моему, сферический конь в вакууме. Я так и не понял существует ли он на самом деле и кто его понимает :). Зато есть jpeg2000 в котором есть режим без потерь. Жмёт хорошо, браузерами напрямую не понимается (хотя я видел где-то встраиваемый явский апплет в качестве декодера). Ещё jpeg2000 умеет цвет 16-бит на канал, чего не умеет обычный jpeg. Так что, если кому-то надо, вот вариант лучше, чем tiff c lzw сжатием.
Чисто для информации: png читается как «пинг», а не пэ-эн-гэ :)
НЛО прилетело и опубликовало эту надпись здесь
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
О формате PNG. Краткий тест-драйв