Формат PNG-8 и PNG-24. В чем различия, какой формат лучше выбрать?

На веб-сайтах изображения в основном используются двух форматов JPG и PNG. Рассмотрим их и определим плюсы, минусы и оправданность применения

JPG — максимально хорошо передает цветовые оттенки. При этом плохо масштабируется и не поддерживает прозрачность. Использовать лучше для фотографий и скриншотов.

PNG — не отличается очень хорошей передачей текста, но поддерживает прозрачность (alpha-transparency) и не приводит к потере качества при изменении размера изображения. Использовать лучше для логотипов, иконок схем, графиков и т.п.

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

GIF — формат существующий с 1987 года и сейчас фактически не использующийся. Необходимость в нем есть только тогда когда нужна анимация

Форматы или цветовые палитры PNG-8 и PNG-24

Есть 2 подформата PNG с разной битностью: PNG-8 и PNG-24. Первый представляет собой замену GIF, второй поддерживает многоцветность и имеет приемлиму цветопередачу (если речь идет не о фотографиях высокой четкости).

  • PNG-8 практически идентичен GIF (с индексированной палитрой цветов и их количестве до 256). В 1 бите может храниться информация о двух цветах, в 8 — о 256. Это максимум для формата.
  • PNG-24 — используется для растровых изображений и приближается к JPG, хотя уступает ему в случае с цветными фотографиями

Преобразовать изображение в другой формат

Делать это полезно прежде всего для уменьшения размера файлов. Если используется 2 цвета — нет смысле иметь палитру, позволяющую 16 777 216 сочетаний (для 24 битного изображения). Оптимизированные изображения при большом их количестве могут очень заметно увеличить скорость работы сайта.

Чтобы выполнить преобразование можно использовать convert из пакета imagemagick

convert file.png -depth 2 file.png

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

Естьи другая утилита, преобразование с использованием которой дает лучшие результаты — pngquant

pngquant —quality=0-80 file.png

Такая команда автоматически преобразует file.png подобрав нужную битность, которая обеспечит 80% качество аналогичного изображения в формате JPG.

Весь Интернет восхваляет относительно новый формат WEBP, но действительно ли он так хорош и лучше проверенного временем JPG? Спойлер: Как оказалось, не всегда. В деталях сравним оба формата и разберемся какой из них лучше.

Не сжатие, а потеря

Оба формата призваны уменьшить размер исходного файла и используют для этого сжатие. Сжать – в лексиконе большинства графических форматов, означает потерять часть исходного, но при этом сохранить суть изображения. После сжатия изображение не является оригиналом, а скорее похоже на него. JPG и WEBP используют различные алгоритмы со своими плюсами и минусами.

Если говорить о сжатии, различают понятия «сжатие без потерь» и «сжатие с потерями», и WEBP, в отличие от JPG еще умеет сжимать без потерь, при этом показывая лучшие результаты, даже чем png(формат изображений, реализующий только сжатие без потерь).

Техническое сравнение наиболее распространенных форматов

JPG WEBP PNG GIF
год выпуска 1991 2010 1996 1987
сжатие с потерями + + +
сжатие без потерь + +
анимация + +
прозрачность + + +
+

В каких случаях JPG оказывается лучше WEBP или ложка дёгтя

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

Настоятельно рекомендую просматривать эту статью на большом экране. Все сравниваемые изображения в разных форматах примерно равны по размеру. JPG всегда слева, WEBP справа.

Первым идёт Микки Рурк с его фактурным лицом. Обратите внимание, сколько деталей теряет WEBP.

JPG, 40.4KB

WEBP, 41.8KB

imageimageПри равном размере изображения, JPG выигрывает у WEBP. Обратите внимание на детальность прорисовки пор кожи и правый зрачокСкачать Mickey Rourke.jpg 40.4 КБ Скачать Mickey Rourke.webp 41.8 КБ

Светящийся логотип нашего блога на фоне темной бумаги. На втором изображении наблюдается потеря цвета ореола свечения и огромного количества мелких деталей. Тем не менее саму перчинку оба формата передают хорошо.

JPG, 55.7KB

WEBP, 55.1KB

Однозначный победа JPG над WEBP. Обратите внимание, как ухудшается качество свечения и темного фона изображения. Перчинка остаётся без видимых изменений.Скачать black pepper.jpg 55.7 КБ Скачать black pepper.webp 55.1 КБ

Логотип блога на фоне обычного листа бумаги. Мелкие детали на белый фоне в WEBP тоже страдают.

JPG, 57.8KB

WEBP, 57.5KB

При равном размере изображения, JPG одерживает победу над WEBP. Обратите внимание на количество деталей мягкого белого фонаСкачать white pepper.jpg 57.9 КБ Скачать white pepper.webp 57.5 КБ

Когда WEBP равен JPG по количеству деталей

Яблоки, 1280×800. Изображение преимущественно состоит из плавных градиентов. Много одноцветных областей. WEBP чувствует себя в таких условиях просто прекрасно.

JPG, 177KB

WEBP, 133KB

Разница практически незаметна. WEBP намного меньше JPG по размеру

Заказ на море, 1280×800. Изображение преимущественно состоит из плавных градиентов. Много одноцветных областей. WEBP чувствует себя в таких условиях просто прекрасно.

JPG, 148KB

WEBP, 115KB

Разница практически незаметна. WEBP побеждает

Осенний лес, 1280×800. Количество мелких деталей зашкаливает. Неожиданным образом, WEBP, хоть и немного, но проиграл JPG, размер файла WEBP оказался больше на 62КБ.

JPG, 438KB

WEBP, 500KB

Впервые, WEBP оказался даже больше по размеру, чем JPG. Иллюстрация с огромным количеством мелких деталей.Скачать firest.jpg 438.4 КБ Скачать forest.webp 500.9 КБ

Минимально-возможный уровень качества

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

Едва поверив глазам, видим, на это изображение WEBP понадобилось всего 1840 байт. Без приукрас, WEBP – король плавных градиентов при минимальном размере изображения.

JPG. 5.49KB

WEBP. 1.84KB

JPG с треском проваливает тест, WEBP оказался меньше соперника почти в 3 раза. Мы сохранили изображение с минимально возможным качеством.

Выявленные плюсы и минусы форматов

JPG WEBP
чёткие границы вокруг границ появляются артефакты небольшое размытие границ
градиенты появляются острые грани отлично
нечеткие детали хорошо теряют фактуру
общая чёткость чётко
чётко, появляются артефакты
прогрессивность грузится от размытого к четкому грузится сверху вниз
размер файла выше ниже на 30%
поддержка браузерами абсолютная >60%

Как мы видим из таблицы, WEBP не всегда лучше JPG. Тем не менее, чаще всего выигрывает по размеру и качеству, если не требуется показать мелкие фактурные детали.

Выводы

Совсем недавно я переводил этот блог на WEBP. Прочитайте с какими трудностями мне пришлось столкнуться. Я получил потерю мелких деталей при использовании WEBP, даже при степени сжатия 85%, и это, конечно, не радует, но размер при этом получается меньше примерно на 30%. Невооруженным взглядом заметить отсутствие мелких деталей сложно, зато хорошо заметно увеличение скорости загрузки страницы. Таким образом, объём главной страницы этого блога при использовании WEBP уменьшился с 1.8МБ, до 1.1МБ, что довольно ощутимо, скорость загрузки возросла почти в 2 раза. Сейчас средняя иллюстрация при использовании webp, в разрешении 1280×800, занимает примерно 120КБ.

Не смотря на некоторые недостатки, использование WEBP несёт ощутимые преимущества. А использовать его или нет, решать вам.

Преамбула

Фабула

PNG

PNG (portable network graphics) рассмотрим первым т. к. он наиболее популярен.

В отличие от TGA и TIF, PNG не может хранить данные в несжатом виде, PNG всегда использует сжатие без потерь по алгоритму Deflate (ZIP). Сжатие ZIP очень мощное, лучшее сжатие без потерь – сжимает более чем в 7.8 раз. E.g., несжатый файл имеет размер 20.2 мб, сжатый без потерь с помощью Deflate (ZIP) – 2.5 мб.

Поддержка альфа-канала в Photoshop в PNG – ужас, она удалит информацию в областях, где альфа прозрачна на 100%, а это не то, что вам нужно для упаковки текстур. Однако, Photoshop не обрабатывает альфа-каналы для TGA, как это происходит с PNG.

Поддержка 16 бит (биты на пиксель) в PNG различна и не универсальна.

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

TGA

TGA (Truevision TGA) может хранить данные в несжатом виде, а может использовать сжатие без потерь по алгоритму RLE. Сжатие RLE слабое – сжимает в ~1.76 раз. E.g., несжатый файл имеет размер 20.2 мб, сжатый без потерь с помощью RLE – 11.5 мб. Использовать TGA со сжатием RLE нет смысла т. к. есть куда лучшее сжатие – ZIP, но TGA его не поддерживает. Вывод: в TGA можно хранить разве, что только данные в несжатом виде.

TIFF

TIFF/TIF (Tagged Image File Format) рассматриваем последним т. к. в нём больше всего функционала.

TIFF может хранить данные в несжатом виде, а может использовать следующие сжатия с потерями и без:

  • LZW – мощное сжатие без потерь, сжимает в ~6.14 раз. E.g., несжатый TIF файл 20.3 мб, TIF сжатый с LZW – 3.3 мб.
  • ZIP – очень мощное сжатие без потерь, сжимает в ~8.86 раз. E.g., несжатый TIF файл 20.3 мб, TIF сжатый с ZIP – 2.2 мб. ZIP сжатие не поддерживается в старых TIF просмоторщиках.
  • JPEG – очень мощное сжатие с потерями, сжимает в зависимости от выбора, на качестве 10/12 сжимает в ~25.87 раз. E.g., несжатый TIF файл 20.3 мб, TIF сжатый с JPEG на качестве 10/12 – 0.7 мб. JPEG сжатие не поддерживается в старых TIF просмоторщиках.

Интересно то, что TIF сжатый с алгоритмом ZIP в Photoshop имеет заметно меньший размер, чем PNG сжатый с этим же алгоритмом ZIP в Photoshop, при одинаковых остальных параметрах (разрешение, пиксел на дюйм, бит на плоскость, кол-во плоскостей, бит на пиксел, исходная точка, цветовая модель). TIF сжатый с ZIP сжимает в ~8.86 раз, а PNG сжатый с тем же ZIP сжимает в ~7.8 раз. Можно подумать, это связано с тем, что помимо данных самого изображения у PNG хранится ещё много лишнего, по сравнению с TIF, но это не так. Просто у алгоритма сжатия без потерь ZIP можно выставлять степень сжатия, и для TIF с ZIP Photoshop почему-то выставляет большую степень сжатия в сравнении с PNG с ZIP. Т.о., если сохранять через Photoshop, который не даёт вручную выставить степень сжатия для алгоритма ZIP, вместо PNG лучше использовать TIF сжатый с алгоритмом ZIP. При сохранении PNG файла Adobe Photoshop не позволяет выставить вручную степень сжатия метода ZIP, но зато это позволяют сделать программы IrfanView и XnView. Compression level ZIP выставляется от 0 (none) до 9 (best). Default level 6.

TIFF полностью перекрывает PNG и TGA т. к. в нём есть всё: отсутствие сжатия, сжатие без потерь методом ZIP, и много чего другого. TIFF перекрывает даже формат JPEG, т. к. в TIFF также есть сжатие с потерями методом JPEG. Такой вот универсальный и мощный формат TIFF.

Резюме

Всё зависит от требуемого типа сжатия, с потерями или без потерь. После этого выбираем соответствующий алгоритм сжатия.

  • Если нужны данные в несжатом виде, то выбираем TGA без сжатия или TIFF без сжатия.
  • Если нужно сжатие без потерь, то однозначно выбираем формат поддерживающий лучший алгоритм сжатия без потерь – ZIP. ZIP – самое долгое и наиболее мощное сжатие без потерь. Можно использовать как PNG, который всегда использует ZIP сжатие, так и TIF сжатый с алгоритмом ZIP, что может быть даже лучше.
  • Если нужно сжатие с потерями, то выбираем лучший алгоритм сжатия с потерями – JPEG. JPEG – наиболее мощное сжатие с потерями. Можно использовать как формат TIF сжатый с алгоритмом JPEG, так и сам формат JPEG.

Растровые графические форматы во многом схожи с медиа контейнерами – важно то, что внутри, какие алгоритмы сжатия. Честно говоря, я лично не знаю зачем кому-то вообще может понадобиться хранить данные в несжатом виде, поэтому у меня выбор стоит между форматами PNG (всегда ZIP сжатие), и TIF сжатый с алгоритмом ZIP, либо алгоритм JPEG, когда допустимо сжатие с потерями.

Мир фотошопа 1 комментарий

Программа фотошоп позволяет выбирать при сохранении файлов между расширениями PNG-8 или PNG-24. В чём же различие этих двух типов?

Само расширение PNG – это способ более продуктивного сохранения графического изображения в сжатом виде, в отличие от похожего формата GIF. Формат PNG-8 сохраняет прозрачный фон изображения, если таковой есть, но имеет ограничение цветовой палитры в 256 цветов. То есть, при сжатии графического изображения, имеющего более 256-и оттенков, эти оттенки будут индексированы (то есть преобразованы) в цвета, входящие в список разрешённых 256-и цветов.

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

Какой же формат лучше использовать?

Это зависит от того, в какой области применяется графический файл. Формат PNG-8 необходимо применять на изображениях с несложной цветовой раскраской, там, где на первом месте стоит требование к маленькому размеру файла. Например:

  1. При вёрстке сайтов. Чем меньше объём веса изображения, тем быстрее оно будет загружаться. Следовательно, для сжатия изображения для web-страницы лучше применять PNG-8 для быстрой прогрузки графики.
  2. При передаче информации графическим путём (например, скриншоты или таблицы). В передаче файлов также важна скорость, и можно пожертвовать красотой изображения. Кроме того, PNG отлично справляется с обработкой больших изображений, как скриншоты.
  3. В остальных случаях, если необходимо сильно сжать размер изображения. В таком случае наиболее сильный эффект достигается при ограниченной палитре изображения.

Формат PNG-24 отлично подойдёт в том случае, если сохранение красоты изображения стоит на первом месте. Это плохо получается в JPG, который имеет привычку забивать изображение бурыми пикселями и в результате портить внешний облик картинки. PNG-24 отлично ладит с абстрактными изображениями наподобие вихря цвета.

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

Заметили ошибку в тексте – выделите ее и нажмите Ctrl + Enter. Спасибо! Cовет как лучше обучаться фотошопу:

  1. Изучайте теорию – учебник по фотошопу.
  2. Набивайте руку практикой, повторяя уроки.
  3. Сложно? Задавайте вопросы в комментариях к уроку или по этой форме. Посмотрите ответы уже разобранных вопросов.
  4. Подписывайтесь на обновления, чтобы не пропустить появление новых статей и уроков.

Подписаться на обновления сайта

Как извлечь изображения из Word-документа

Текстовый редактор Microsoft Word позволяет вставлять в документ изображения. А если что-то можно вставить, значит это можно и извлечь! Рассмотрим 3 способа, как можно извлечь изображения из текстового документа, сохранённого в формате .doc или .docx.

Мир фотошопа / Помощь

77 лучших видеоуроков для фотографов: фотосъемка, Photoshop, Lightroom

В данном наборе собраны полезные для новичков и не только уроки по правилам фотосъемки (21 урок), обработке фотографий в Photoshop (41 урок) и уроки по  работе в Adobe Lightroom (15 уроков). 

Видеокурсы по Lightroom, Видеокурсы по фотошопу

Обзор плагина для фотошопа Topaz ReStyle v1.0.0

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

Мир фотошопа / Обзоры программ

Обзор плагина для фотошопа Topaz Clarity

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

Мир фотошопа / Обзоры программ

Обзор плагина Topaz Adjust 5 для фотошопа и лайтрум

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

Мир фотошопа / Обзоры программ Вопрос задан 3 года 9 месяцев назад Последняя активность 3 года 9 месяцев назад Просмотрен 328 раз

Начитан про преимущество формата .png над.jpg. И тем не менее, последний всё ещё широко применяется. Почему так?

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

И наконец, имеет ли смысл для своих сайтов и приложений конвертировать все .jpg изображения в .png?

Улучшить вопрос 1

2 ответа 2

Текущие По дате публикации Голоса 6

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

Не нужно слепо все конвертировать в PNG. Лучший подход – фото/фотоподобные большие картинки в JPEG, простые или маленькие – в PNG.

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

Улучшить ответ 1

Берём типичную фотографию отсюда. Сохраняем. Конвертируем в PNG:

convert 500px-Lamborghini.jpg 500px-Lamborghini.png 

Смотрим на размеры:

$ du -sh 500px-Lamborghini.* 32K     500px-Lamborghini.jpg 136K    500px-Lamborghini.png 

Итого: переход на PNG привёл к увеличению размеров типичной фотографии в четыре раза. Если это ваша цель, то да – переход на PNG имеет смысл. Иначе, не очень. Фото лучше оставить в исходном формате.

Улучшить ответ 1

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.

default

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий