Разгоняем картинки: PNG вместо GIF

[meako]

Хорошая статья, хотя, весьма сильно наводнена сложными и неинтересными простым людям подробностями.

И, IE6 на сколько помню, без бубна прозрачность в png отображать не заставишь.

[YurevichSergey]

уважаемый, вы глубоко заблуждаетесь, а как же полупрозрачность, а как же вес, а как же диапазон цветов PNG24???

[Orion]

Да даже просто поддержка 24 битов без потери качества.

[leemuar]

Картинка 320x256 размеров в 100Кб? Разве здесь уместно слово "оптимизация"?

[driessen]

Это был тролль, не обращайте на него внимания.

[alfsoft]

^{Самое прикольное, я так же про одного тролля написал - и, удивительно, его заплюсовали, а меня то в минус, то в плюс (в итоге ноль было) кидало. Видимо, людям понравилось, как он мак беспомощным говном назвал :0)}
Использую везде, где только возможно png (ну уж смотрю, конечно, какой размер файла получается), мой любимый формат.

[ProRunner]

На artlebedev несколько хороших статей (первая, вторая) про png было. Там и про преимущества есть.

[Hitryi_Pryanik]

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

[knyas]

Мне кажется, простым людям вообще это не шибко интересно. А кто понимает о чем речь, тому подробности в самый раз приходятся.

[Sancheg]

На хабре бывают простые люди? ;)

[Hitryi_Pryanik]

Я думаю, что бывают, но просто читают, а не комментируют. Ну и ещё некоторый процент невылупившихся тролльчат.

[simpel]

Для решения проблемм с гаммой можно удалить парметр gAMA с помощью программы TweakPNG. Утилита позволяет управлять всеми параметрами PNG файла, от текстовых коментариев в файле до степени сжатия и цвета фона альфа канала по умолчанию.

[Sir_Michael]

Добавлю, что работая с Photoshop CS3 подобной постобработки уже делать не нужно - это уже предусмотрено.

[vld]

а не знаешь ли ты случаем как открыть в Photoshop CS3 картинку PNG с альфой так чтобы фотошоп не превращал её автоматом в слой с прозрачность, убивая насмерть все данные под прозрачностью?

[Sir_Michael]

Не знаю, я верстальщик, мне оное только в PSD приходит.

[vld]

черт. у меня нарастает ощущение, что эта проблема напрягает только меня одного. :(

[simpel]

знаю есть под MAC софтинка - seashore. Умеет показывать все каналы отдельно. Узнал на днях про нее сами знаете где :)

[Rulez]

А попробуйте открыть Adobe-Macromedia Fireworks и напишите если помогло. Будем благодарны

[xvoland]

Давно понятно, что GIF'у уже давно пора на покой ))) он своё отработал.
Радует, что всё больше и больше броузеров начинает корректно поддерживать PNG.

[Marsikus]

Правильная статья! Пусть знают про формат PNG! А то тошно видет скриншоты окон сплошным образом в JPEG-ной грязище на шрифтах, или GIF-ы в обедненной палитре. PNG - самый лучший формат для четких и красивых скринов окон.

[3al]

Оно умеет уменьшать число цветов? Тем более вейвлет не работает с большими одноцветными областями так же эффективно.

[3al]

PNG вместо GIF. Вместо _малоцветных изображений_. Здесь помогает возможность индексированных изображений, в них может быть и бит на пиксель, иногда этого хватает. jpeg2k, как и jpeg, может рулить на полноцветных фото, но мелкие картинки с небольшим числом цветов — не для него. Тем более jpeg2k поддерживается браузерами еще меньше, чем png.
А теперь плюс png: не у всех есть фотообои на рабочем столе, да и не все скриншотят весь рабочий стол. Для скриншотов отдельных окон в любом случае jpeg2k не рулит (исключение — окна с фото, но их немного). Не везде нужны все 24 бита на пиксель.

[Hitryi_Pryanik]

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

[bubuq]

Статья правдивая, но имеет два недостатка.

Первый — очень сильное ретро. Все люди доброй воли используют ПНГ уже лет шесть-восемь.
Второй — неупоминание существенного момента юридических проблем вокруг ГИФа, и почему его желательно не употреблять, как стандарт, обременённый несвободными лицензиями. К настоящему моменту эти лицензии протухли в большинстве стран мира, но неприятный осадок остался. К тому же ПНГ действительно продвинутее.

[knyas]

Спасибо огромное, очень интересная статья!

А кто-нибудь знает - зачем вообще есть градация уровней сжатия? Бывает ли что 6 лучше 9? Разве что разжатие этих степеней сильно отличается, например, по ресурсоемкости (процессор там нагружает при огромных изображениях).

[Alexus]

год назад png-шки создавал php-шным GD2. Лучших результатов не удалось добиться ни фотошопом, ни чем либо еще.

[ynetbot]

А что такое MSIE для Unix?

Microsoft Internet Explorer for Unix. Есть и такой. Работает под Solaris и HP-UX, если мне память не изменяет.

[drone]

Слово "изолированный" при прочтении статьи ассоциируется с isolated. Такой термин в контексте данной статьи понять сложно. Потому лучше оставить standalone — не ко всем терминам можно подобрать адекватный русский аналог.

[non7top]

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

[404]

Ну а что вы хотите, png24 формально - формат без потерь качества изображения. А вот jpg - как раз использует алгоритмы сжатия с потерями данных об изображении.
При этом если сравнивать объем того же файла, сохраненного без потерь в tiff или psd - разница будет заметна сразу.

[stavor]

Вопрос не очень искушённого пользоваетля: а почему в статье нет сравнения с jpg? Мне кажется что имеено jpg сегодня доминирует во всём, что касается иллюстраций.

[Yeah]

JPG - формат сжатия с потерями, а PNG - без потерь. Разная иадеология - соответственно и в сравнении не учавствует.

[Sancheg]

Ещё одним из ключевых моментов является то что джепег не поддерживает прозрачность, в отличии от гифа или пинга

[Mr_Floppy]

Лучше бы про прозрачность в IE рассказали.

[rimmer333]

Было уже. Ищите.

[anikey]

к сожелению, png не потдерживает анимацию, а mng не так популярен даже ФФ его не потдерживает :(

[asterian]

Понимаю, что формат перевода священен, но лучше бы было сделать ссылку на исходную статью, а в версии для Хабра большую часть выкинуть - читалось бы гораздо проще, и преимущества PNG были бы прозрачнее.
Не понравилось, что есть ссылка на программу-оптимизатор PNGOut, а про механизмы оптимизации не написано (опять-таки это недостаток исходной статьи, но все же набрать материала, например, отсюда хотя бы в комментарии было бы очень полезно).
Лично мне кажется, что сейчас основная проблема оптимизации PNG не в сжатии 8-битных изображений, а в изображениях с альфа-каналами - вот в них 11% разницы (у меня был результат в 7% при сжатии 200кб изображения в optiPNG) - действительно существенное подспорье.

[sunnybear]

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

[4g3n7]

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

Проблема с альфа-каналом, конечно, не радует(
Тут приходится выкручиваться по-всякому (экспрешены, яваскрипт)... Один PNG с альфа-каналом на страницу ставится без особых проблем (но они, конечно же, есть), больше — не пробовал. В принципе можно)

[sunnybear]

спамер в комментариях? неужели не очевидно, что любой здравомыслящий просмотрит десяток последних Ваших комментариев и заминусует?

[sunnybear]

к сожалению, в последнее время слишком много троллей

[sunnybear]

еще тяжелее плюсовать/минусовать карму раз в 20 минут :)

[Hitryi_Pryanik]

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

Даже если нет аллергии на троллей и SMOшников, всё равно ряд комментариев к статье над которой долбался вда «спасибо», «это круто», «дайте две!» и т.п. совсем не греют, а лишь создают впечатление, что статья человеку просто никаким местом не пригодилась. Вот в этом и дело, а не в мужском баттле.

[pixilang]

была бы анимация ....

[3al]

Есть уже, только слабо поддерживается браузерами.
http://people.mozilla.com/~dolske/apng/demo.html

[Hitryi_Pryanik]

Забавно. Я об этом даже думал. Но данный приём (где для каждого кадра своя палитра) применим только для некоторых слайд-шоу, например смены картинок, каждая из которых обладает явно выраженной тональностью.

[Hitryi_Pryanik]

Спасибо. Давно пользуюсь PNG, но и отсюда кое-что узнал по мелочи. А пользоваться я начал просто: в программе Xara X при экспорте два окошка для сравнения (bmp, jpeg, gif, png) и пишется какой файл меньше. Подбирал параметры. Получил отличные рузультаты для png в сравнении.

Кстати говоря о gif и слайдшоу: у гифа есть возможность делать отдельную палитру для каждого из кадров (чтоб не терять качество). Но обычно DHTML+JPEG лучше.

Анимации с png действительно не хватает. Это одно из событий, которого жду (в числе SVG в IE, и реализации поддержки JPEG-2000 в браузерах).

[SantaCluster]

ошибочка:
RGB-в-одним-исключением (with-one-exception)

исправьте на "RGB-с-одним-..."

[dimonzi]

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

[donPedro]

SVG?

[wixus]

давно использую пнг для теней.
бывает, что одна картинка у меня состоит из трёх слоёв (jpg, gif, png), но независима от фона и весит в 1,5-3 раза меньше, чем если бы это был 1 файл.

[pxx]

Я один не понимаю, что отображают приведенные графики?

[lahmatiy]

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

[Sarry]

А что делает привлекательным PNG для медицинской отрасли?

[gavrishgerman]

Всем советую прочитать смачную статью на сайте Лебедева про PNG и оптимизацию картинок

[alex_blank]

ссылку?

[Lufa]

"Сравнение тесового" => "тесТового"

[Krasu]

>>Сейчас группа разработчиков Mozilla пытается расширить текущий (для одного изображения) PNG-формат несколькими дополнительными кадрами для анимации

не пытается, а уже расширила ;) патчи для libpng существуют для версий >= 1.2.10

>>Оба этих направления значительно проще, чем MNG, и оба открыты для голосования в группе PNG

APNG отклонили для включения в стандарт. Чтобы его поддерживать в своём приложении, нужно патчить libpng и распространять её вместе с программой. Что FF3 и делает.

Кстати, APNG гораздо более быстрое/удобное/простое решение, чем MNG. Уже поддерживатеся в FF3 и Opera Kestrel.

[Hitryi_Pryanik]

Это уменьшенная палитра для гифа: 256, 128, 64, 32, 16, 8, 2 (иногда 48 даёт некоторый выигрыш). Тот же самый расклад по выборочной палитре у PNG (а метод сжатия лучше).

Или Вы говорите ещё о какой-то магии (простите, фотошопи и имэйджрэди не пользую)?

[Hitryi_Pryanik]

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

[Gektor]

PNGOUTWin к стати хорош. Даже очень, как мне кажется.

До сих пор я пользовался OptiPNG и PngOptimizer Hadrien Nilsson’а. Обе бесплатные. Результатами этих двух программ я всегда был очень доволен и никогда не понимал, почему фотошоп не оптимизирует так-же хорошо.

Так вот, картинки одного моего сайта уже обработанные обеими названными программами стали почему-то ещё меньше при помощи свежеопробованного PNGOUTWin!

Имелась папка с 43-мя PNG. Была 146.513 байт, стала 137.486! И того аж 9 килобайт с уже оптимированных двумя программами файлов!

Между прочим, есть смысл использовать PNGOUTWin в несколько проходов. Уже оптимированные файлы могут стать ещё чуть-чуть меньше.

[Regis]

В дополноение PngOut советую присмотреться к компрессору Pngcrush.

А вообще, очень рекомендую использовать вот этот наборчик с сайта по технике перевода манги. В набор входит несколько компрессоров PNG и батники для пакетного сжатия PNG разными комбинациями компрессоров + интсрукции по использованию. Notice: в инструкциях «сканы»=«PNG-файлы».

[Hitryi_Pryanik]

Ищак удже испправилса! В 7й версии png в RGBA идёт без костылей.

[Roxis]

в добавок к OptiPNG есть ещё AdvanceCOMP

[fuck_u]

А у Лебедева "аватарка" в png, я знал что это неспроста...

[andruha_derby]

Да! Я становлюсь идейным фанатом png.

Буду проповедывать идеи png8 и png24 в мире.

Автору спасибо.

Статья поставила окончательную точку для меня в противостоянии gif и png8 .
И поставила памятник для гифа в моих проектах. gif покойся с миром!!!

Все! Буду всем рекомендовать забыть про gif и пользоваться png8 вместо него

Я прозрел братья!!! Алилуя!!!

[sunnybear]

спасибо, занятная программа