PNG или JPEG? Или почему у арт-директора дергается глаз.
Для себя я закрыл этот вопрос довольно давно. Но, все чаще ко мне приходят люди и спрашивают что использовать и в чем разница. Периодически я отлавливаю верстальщиков за тем что они сохраняют нарезанные элементы в Jpeg и молодых дизайнеров которые клепают пачками в Jpeg картинки и баннера для сайтов и соц.сетей. И… да, я уже проспойлерил, что PNG Именно наш вариант. Но почему? Внезапно, но этот самый вопрос мне стали периодически задавать в сети. И собственно, этот фактор побудил меня что пора написать про это статью и больше никогда не возвращаться к этой теме.
Кто, Когда и Зачем? Для совсем полного понимания вопроса желательно понимать историю форматов с которыми мы работаем. Кто, когда и главное зачем создал тот или иной формат? Jpeg — создан в далеком 1991 году и получил своё название в честь компании разработчика: Joint Photographic Experts Group. Формат был создан для сжатия и хранения растровых изображений. Быстро получил свое одобрение благодаря небольшому размеру. PNG — появился несколько позже, и разарботан Т. Боутеллом в 1996 году. Был создан для тех же целей что и Jpeg: Хранение растровых изображений. Но с очень важной оговоркой. Используется метод сжатия без потерь. По началу разработки формат имел название PBF (Portable Bitmap Format). И уже к релизу получил свое нынешнее имя: “Portable Network Graphics”.
Интересно то, что формат создавался как замена GIF и про Jpeg никто не думал. В отличие от Jpeg, PNG заимел Альфа-канал. Прозрачность. Но в отличие от GIF так и не получил анимации. Есть конечно формат MNG, но он так и не стал общепринятым. Также было много проблем с Альфа-каналом в браузерах. Если проще, вечно это прозрачность неправильно отображалась. То была полупрозрачной, вместо полной прозрачности. То места прозрачности осыпало таким шумом, что было страшно. В IE Конечно же все проблемы убрали последними, аж в 7мой версии браузера. Ближе к практике. Чтобы не надоедать скучными фактами из жизни форматов, и наконец понять, что, где и когда использовать, все что нам остается сделать это сравнить 2 формата. Я открыл фотошоп и нарисовал простейшее растровое изображение: Квадрат на белом фоне. И сохранил его в 2ух вариантах PNG и в 5ти вариантах Jpeg. Никаких настроек вручную. Только те стандартные шаблоны настроек которые предлагает нам Photoshop. Сначала сравним размеры полученных нами изображений: ведь для использования в интернет, нам довольно важно сколько весит та или иная картинка. PNG 8–857 Б PNG 24–1,46 КБ JpegLow — 2,66 КБ JpegMedium — 2.81 КБ
JpegHigh — 4,57 КБ JpegVeryHigh — 4.74 КБ JpegMaximum — 5,06 КБ Как мы видим, здесь Jpeg явно проигрывает. Но на самом деле я лукавлю, потому как размер PNG зависит от количества цветов на изображении. А здесь их всего 2. Но это сделано специально, к этому вернемся чуть позже. Теперь перейдем собственно к качеству самих изображений.
На JpegLow потери видно даже без увеличения изображения, но эмпирика страшная вещь, поэтому нужно проверить все. Вот это же изображение в увеличенном виде
При увеличении видим множество артефактов, полосы на квадрате, шум по бокам, вообще непонятная желтая полоса под квадратом.
JpegMedium — картина поменялась мало. Невооруженным глазом видно артефакты по периметру квадрата. посмотрим увеличенную версию.
Появляются лишние пиксели по бокам самого квадрата. Но мы видим что нет полос на самом квадрате.
JpegHigh — Издалека в общем то все нормально, но мы не дадим ему шансов.
Исчезли полупрозрачные пиксели по бокам, Ура! Но снова появились полосы на самом квадрате.
JpegVeryHigh — Картина от прошлого варианта поменялась мало(((
В увеличенном варианте мы видим, что полосы не такие явные, но все же рябь еще есть.
Осталось рассмотреть только JpegMaximum
Ну издалека вроде все неплохо, увеличим:
Артефактов практически нет, края чистые, Но все же они есть. Вот мы внизу видим 2 полосы которые четко проходят через весь квадрат.
Перейдем к PNG. Тут все прозаичнее. и быстрее.
Все чисто, никаких артефактов. Увеличим?
Максимальное увеличение. Никаких артефактов. квадрат чистый, ряби нет. Я думаю показывать 24 битный PNG даже нет смысла, Там все еще чище и еще качественнее.
Как я и говорил я слукавил с размерами, скормив Photoshop изображение в котором мало цветов. Я взял вот такое изображение с большим количеством цветов и где мало однотонных моментов.
Сохраняем и увеличиваем
Разницы — никакой. Абсолютно. Если она и есть, то она очень незначительная. А вот в размерах Jpeg максимально выигрывает.
JpegMaximum — 1.48 МБ
PNG24–3.71 МБ
Есть еще одна ситуация помимо фотографий и изображений в которых несколько цветов — это градиенты. поэтому будет правильно проверить и их. Первый градиент который мы возьмем для изображения будет вот такой
2 цвета — такие часто встречаются как фоны на сайтах, да и вообще используется много где. Конечно, для сайтов это все правильно делать в CSS, но у нас речь не об этом.
И так. Сначала сравнение размеров
PNG 8–420 КБ
PNG 24–520 КБ
JpegLow — 7,71 КБ
JpegMedium — 7,84 КБ
JpegHigh — 17,2 КБ
JpegVeryHigh — 20,9 КБ
JpegMaximum — 52 КБ
Ситуация напоминает ту, когда мы рассматривали квадраты. но здесь разрыв уже существеннее, нежели в первом варианте. Но вот с качеством ситуация аналогичная. Jpeg абсолютно все показали шумное изображение, даже JpegMaximum. А вот Между PNG 8 и PNG 24 Разница почти не видна. Ниже результаты в том же порядке, в котором мы сравнивали размеры.
Так зачем же нужны PNG 8 и 24, если они практически всегда показывают одинаковые результаты, а вот в весе значительно отличаются? А дело в том, что в PNG 8 всего 256 цветов, А вот в PNG 24 их 16 миллионов. Это будет видно на изображениях в которых много цветов и больше переходов. Для этого, я создал еще один градиент, в котором цветов не 2, а намного больше
Разницу видно невооруженным взглядом даже без увеличения, в PNG 24 переходы намного плавнее, нет рваности и полос в отличии от его 8-битного родственника
Тут же кстати будет уместно привести этот же градиент в JpegMaximum. Форматы меньшего качества смысла брать нет, будут потери.
За счет того что переходы между цветами небольшие и их много складывается такая же ситуация как с фотографиями. Разница между PNG 24 и JpegMaximum неощутима, а вот в весе ощутима вполне.
PNG 24–574 КБ
JpegMaximum — 189 КБ
Что же подведем итоги. Для фотографий, многоцветных изображений и градиентов, и места где качество изображения не так важно как содержание (Новостные сайты например) — определенно Jpeg. Он весит намного меньше, качество от пнг не существенно отличается. Во всех остальных случаях это PNG. Элементы интерфейсов, фото которые вы планируете потом еще обрабатывать, скриншоты, Изображения где мало цветов. Небольшая хитрость. Фотографии где много цветов, но есть какая то большая однотонная плоскость — тоже лучше использовать PNG. Дело в том что даже на максимальном качестве, если встречается большая однотонная область, то Jpeg обязательно накосячит. Вот, как пить дать. Очень часто это встречается на баннерах, где фоном идет какая нибудь однотонная заливка. Она то собственно и начинает расплываться.
А нам ведь это не надо? Именно по последней причине, я перестал заморачиваться и стал сохранять в PNG всё. Только если речь не идет об архивах с фотографиями)
P.S.
На вес файла сильно влияют и другие факторы. Например при сохранении файла в PNG, Photoshop записывает много лишней служебной информации. Но файлы можно оптимизировать. Эту информацию можно убрать с помощью программ для оптимизации изображений.
