JPEG и PNG — в чём разница форматов?

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

Формат JPEG

JPEG (он же JPG) — это формат изображений, который использует сжатие с потерями и не поддерживает прозрачность. Позволяет настраивать уровень качества сохраняемого изображения — при его снижении удаляются детали и добавляются шумы на изображение, однако размер становится более компактным. JPG в зависимости от настроек может обеспечить сжатие как 2:1, так и 100:1 — но качество прямо пропорционально коэффициенту сжатия. Название формата — аббревиатура от Joint Photographic Experts Group.

JPEG поддерживает цветовые пространства 24-bit RGB и CMYK, а также 8-bit Grayscale. CMYK и Grayscale используются достаточно редко и их поддержка вызывает нарекания.

Также JPEG имеет интегрированную поддержку EXIF, позволяющую хранить метаданные, например: производитель и модель использованной камеры, используемая для съёмки выдержка, диафрагма и светочувствительность, разрешение кадра, настройки баланса белого, фокусное расстояние (в т. ч. эквивалентное), использование вспышки, размер матрицы,  дата и время съёмки, географические координаты и адрес места съёмки.

Используемые расширения для файлов — .jpg and .jpeg (работают идентично).

С прикладной точки зрения JPEG оптимален для изображений с большим количеством цветов, например, для фотографий.

Формат PNG

PNG 24 — это формат изображений, который работает с полноцветными изображениями, использует сжатие без потерь и позволяет сохранять прозрачность. Настроить качество сохранения в PNG 24 невозможно, однако, можно адаптировать сохраняемое изображение для достижения минимального размера файла: для этого можно снизить количество цветов в изображении. Название формата — акроним от Portable Network Graphics.

Существует также формат PNG 8 — он более компактный, чем PNG 24, но применим только для изображений с очень ограниченных количеством цветов: 256 — это максимум. В случае использования PNG 8 для изображений с большим количеством цветов сжатие будет с потерями и с эффектом постеризации.

PNG до 2017 года не поддерживал EXIF, но затем его поддержка была реализована в стандарте. В фотографии PNG используется редко — для компактного хранения файлов больше подходит JPEG, а для профессиональной работы лучше подходят RAW-форматы DNG или TIFF.

PNG 24 и PNG 8 используют расширения для файлов .png, используемая битность записывается в метаданные файла и по расширению не определяется.

С прикладной точки зрения PNG 24 оптимален для изображений с небольшим количеством цветов, например, для иконок, схем, рисунков и скриншотов. Если же цветов в изображении меньше 256, то еще более эффективное сжатие возможно в PNG 8.

Резюме. JPEG и PNG — какой формат оптимальнее использовать?

Фотографии и изображения с большим количеством цветов лучше всего сохранять в JPEG. Но стоит помнить, что алгорим компрессии JPEG сжимает изображения с потерей качества.

Иконки, схемы, картинки с большим количеством текста и изображения с прозрачностью оптимальнее сохранять в PNG 24. Алгорим компрессии PNG 24 сжимает изображения без потери качества.

Размер, вес и формат фотографий

Предлагаю рассмотреть, что это за звери — форматы фотографий JPG и RAW, на что они влияют и когда на них стоит обращать внимание. Что такое размер фото и вес файла, как они измерятся и от чего зависят.

Почти все фото камеры могут сохранять фотографии в формате JPG (даже камеры телефонов и планшетов). Во всех зеркальных и без зеркальных камерах, а так же в продвинутых компактах в дополнение к JPG есть, как минимум, RAW и RAW+, и иногда TIFF.

Чтобы разобраться с форматами, для начала нужно договориться, что подразумевается под понятиями «размер» фотографии и «вес» файла (фотографии). Предлагаю рассмотреть эти понятия на более осязаемых объектах… например, на вкусностях.

1 | Что такое пиксель:

Размер объектов измеряется в метрах, размер фотографии — в пикселях (px).

Если измерить размер этой вазочки с ягодами, то это буде где-то 10 сантиметров в высоту и этак сантиметров 13 в ширину. .. примерно. То есть мы привыкли измерять предметы сантиметрами (метрами, километрами и так далее). Если же говорить о фото этой же вазочки, то изначальный размер фотографии — 7360 пикселей (px) в ширину на 4912 пикселей (px) в высоту. Это максимальный размер фото, на который способна моя камера Nikon. Для размещения этого фото на сайте, размер фото уменьшен до 1200px на 798px (зачем, расскажу чуть позже).

Что такое пиксель? Сделанные цифровыми камерами или оцифрованные на сканере фотографии представляют собой комбинацию крошечных цветных квадратиков — пикселей. Если вы сильно увеличите любую фотографию, то увидите эти пиксели. Чем больше в фото таких пикселей, тем более детальная картинка.

Увеличенный в тысячу раз фрагмент фото — видны квадратики пикселей.

2 | Можно ли пиксели перевести в сантиметры:

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

Чтобы вы не ломали голову над делением размера фото на разрешение и не переводили дюймы в сантиметры, в любой программе для просмотра и редактирования фото (например, в Photoshop) есть функция просмотра размера изображения фото в сантиметрах. Она вам понадобится, чтобы понять, какого максимального размера фотографию в хорошем качестве (с разрешением 300 dpi), вы сможете напечатать на бумаге или другом материальном носителе.

Например, это фото с тропическими цветами Франжиспани, можно напечатать размером 61 см на 32 см.

Размер фотографии в пикселях и сантиметрах в программе Photoshop

Чтобы узнать размер фото в пикселях и сантиметрах в программе Photoshop, нужно нажать комбинацию клавиш Alt+Ctrl+I или зайти в меню Image (Изображение) ►Image size (Размер изображения).

Читайте о 6 способах узнать размер фото в статье — Как узнать размер фото

Вернёмся к реальности цифровых фото — к пикселям и размерам фото в пикселях. Что произойдёт, если уменьшить количество пикселей в фото? Ответ — ухудшиться качество фотографии. Например, я взяла фото этой же вазочки с ягодами, что в начале статьи, и уменьшила размер фото до 150 пикселей в ширину. При таком уменьшении программа уничтожает часть пикселей. Фотография стала миниатюрной:

Теперь попробуем «растянуть» фото на всю страницу:

Растянутая картинка выглядит мутной и нечёткой

Как видите, детализация уже не та, так как часть пикселей (а вместе с ними и деталей) отсутствует.

Конечно, если использовать эту уменьшенную картинку как маленькую иконку или небольшое изображение в презентации Power Point, то будет смотреться вполне нормально, но вот для печати в журнале на пол страницы она явно не подойдёт.

3 | Какой размер фотографии (сколько пикселей) оптимален:

Зависит от задачи. Фейсбук, например, автоматически уменьшает размер всеx загружаемых фотографий до 2048 пикселей в ширину. Как бы вы не хотели поделиться с друзьями высококачественным фото больного размера, Фейсбук вам этого не позволит. Грузите на другие ресурсы (например, на Dropbox). Самое распространённое разрешение экранов мониторов — 1920 px на 1080 px. Теоретически, если вы планируете своими фотографиями наслаждаться в электронном виде и рассылать по соц сетям, то 2048 px по длинной стороне вполне достаточно. Но на практике технологии не стоят на месте — мониторы становятся всё больше, соц сети более лояльны к размеру фото.

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

Читайте так же статью 4 способа уменьшить размер фото

В некоторых случая нужно уменьшать размер фотографий. Как я писала выше, для сайта я уменьшаю размер фото до 1200 пикселей по длинной стороне. Если загрузить фото в полном размере, страницы сайта будут очень долго загружаться, а это многим посетителям может не понравится (не говоря уже о поисковиках Гугл и Яндекс).

Размер фотографий измеряется в пикселях (px). От количества пикселей зависит размер фото на экранах мониторов, и какого размера можно напечатать фотографию.

4 | Размер файла или «вес фотографии»:

Теперь разберёмся с «весом фотографии». Так уж исторически сложилось, что в этом вопросе много путаницы и размер файла довольно часто называют «весом фотографии», что скорее удобно, чем правильно. Размер файлов измеряется мегабайтами (МВ) или килобайтами (КВ). И тут стоит помнить, что в отличии от килограммов, где 1 кг = 1000гр, 1 мегабайт = 1024 килобайт.

Как это выглядит на практике: представим ситуацию, что в вашем фотоаппарате есть карта памяти на которой написано 64GB (гигабайта). Если посмотреть, сколько же там именно этим байтов (на компьютере правой кнопкой мыши выбрать «свойства»), то окажется, что на этой карте памяти 63567953920 байт и это равно 59,2 GB. От того, насколько большие файлы создаёт ваша камера, зависит, как много фото поместится на этой карте памяти. Например, у меня помещается 830 файлов с фото в формате RAW (о форматах читайте ниже).

От чего завит размер файла:

• Во-первых, от размера фото (того, что пикселями измеряется): файл с первой фотографией ягодок (размер фото 7360×4912 px) — это 5.2 MB, а она же, уменьшенная до 150 рх будет «весить» 75,7 КВ (в 69 раза меньше). 
• Во-вторых, от формата (JPG, TIFF, RAW), о чём читайте ниже.
• В-третьих, размер файла (или «вес фото») зависит от количества деталей: чем их больше, тем «тяжелее» фотография (что наиболее релевантно для JPG формата).

Много деталей — больше вес фотографии

Например, вот в этой фотографии с обезьянами со Шри-Ланки множество мелких чётких (говоря языком фотографов, «резких») деталей и размер файла с этой фотографией — 19.7MB, что существенно больше чем ягодки в вазочке на белом фоне (5.2MB).

Если вы спросите, какого размера фото я могу напечатать с фотографии, которая весит 2МБ. Никто вам не сможет ответить, пока не узнает количество пикселей. А лучше, конечно, ещё и взглянуть на фото, так как некоторые умельцы любят доставать фото из глубин интернета, увеличивать количество пикселей программно, а потом хотеть напечатать её на обложке журнала. Получается как на примере выше с растянутой фотографией вазочки шириной 150 px.

Размер файла (часто называют «вес фотографий) измеряется в мегабайтах (МВ) или килобайтах (КВ) и зависит от формата, размера в пикселях и детализайии фотографии.

5 | Форматы фото:

И, наконец-то, мы подошли к вопросу форматов изображения и типа сжатия файлов, от которых тоже зависит размер файла с фото.

Практически все фото камеры могут сохранять фотографии в формате JPG (даже камеры телефонов и планшетов). Это самый распространённый формат изображений и его «понимают» все компьютеры и программы для просмотра изображений. В формате JPG фото можно загружать в соц сети, выкладывать в блоге, добавлять в файлы Word, Power Point и так далее.

JPG можно обрабатывать в Фотошопе, Лайтруме и других программах для редактирования изображений.

Из моей практики: если я хочу сделать фото для соц сети и быстро его загрузить, то я или фотографирую на телефон, или ставлю в своей камере формат файла jpg.

Что стоит помнить о формате jpg — это сжатый формат и у него есть степени сжатия. Чем выше степень сжатия, тем меньше размер файла за счёт уменьшения детализации и качества фото. Поэтому не рекомендуется многократное редактирование и пересохранение (повторное сжатие) одной и той же фотографий в формате jpg.

При сохранении файла в формате jpg выбирается степень сжатия (пример из программы Photoshop).

Во всех зеркальных и без зеркальных камерах, а так же в продвинутых компактах в дополнение к JPG есть как минимум RAW, и часто ещё и TIFF.

Немного теории:

• TIFF (англ. Tagged Image File Format) — формат хранения растровых графических изображений (в том числе фотографий). TIFF стал популярным форматом для хранения изображений с большой глубиной цвета.
  Он используется в полиграфии, широко поддерживается графическими приложениями.
• RAW (англ. raw — cырой, необработанный) — формат цифровой фотографии, содержащий необработанные данные, полученные с фотоматрицы (та штука, что в цифровых камерах заменила плёнку).

Лично я никогда не фотографирую в формат TIFF. Не могу даже придумать, зачем мне это нужно, если есть RAW. TIFF без сжатия я могу использовать для сохранения фото, которые ещё планирую доработать в программе Photoshop.

6 | Преимущества и недостатки формата RAW:

У меня в камере почти всегда стоит RAW формат, так как я собираюсь обрабатывать (редактировать) фото в Лайтруме или Фотошопе. У RAW есть ряд существенных недостатков:

• Нет возможности просмотра файлов без предварительной конвертации. То есть для просмотра фото в формате RAW вам нужна специальная программа, поддерживающая этот формат изображений.
• Больший объём файлов, чем при сохранении в JPEG (с моё камеры Nikon D800 размер файла с фото в формате RAW — это 74-77 МБ). Это означает, что меньше фотографий поместится на флешке.
• RAW невозможно загрузить в соц сети, блог, и иногда даже отправить по почте. Вначале RAW нужно конвертировать в RAW конвертере (например, Adobe Camera Raw), который поддерживает тип файла с вашей модели камеры.

Почему же профессиональные фотографы часто предпочитаю RAW, а не JPG? Потому что RAW:

Сохраните эту статью на память в Pinterest

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

Итак, если вы планируете тщательнейшим образом обрабатывать снимки в Фотошопе или Лайтруме, тонко чувствуя «артефакты» и полутона, «пересветы» и «провалы» в тенях, то снимайте в RAW. Только помните, что для получения хорошего результата, вам понадобится разобраться с настройками и работой RAW конвертеров. Подумайте, нужно ли вам эта головная боль? Может стоит снимать в JPG и уделить больше времени отдыху, а не компьютеру?

7 | Статьи, которые могут быть вам интересны:

• Завал в фото: почему появляется и как с этим бороться.
• Что делать, если запотел объектив камеры.
• 4 способа уменьшить размер фото
• Как узнать размер фото
• Исправление глюков и багов Facebook или что делать, если Фейсбук не видит фото.

8 | Хорошие книги о съёмке фотографий и их обработке:

• Adobe Photoshop CC. Официальный учебный курс.
• Adobe Photoshop Lightroom 5. Официальный учебный курс.
• Фотография. Все секреты мастерства: от замысла до воплощения. Джон Гаррет и Грэйм Харрис.
• Язык композиции. Создаем выразительные фотографии. Альбрехт Рисслер.
• Композиция в фотографии. Николай Жолудев.

Понравилась статья? Поделитесь с друзьями:

---

Зарабатывайте на своих фотографиях и видео:

---

---

Используете ли вы правильный формат изображения?

В этой статье мы объясним, почему использование правильного формата изображения имеет значение для производительности в Интернете.

---

 

Обзор

Оптимизация изображений — одна из самых простых, но полезных оптимизаций, которую вы можете выполнить.

По данным HTTP Archive, на изображения приходится почти 50% среднего веса страницы, что часто делает их самым большим типом ресурсов для оптимизации на вашем веб-сайте.

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

Это не так просто, как выбрать JPEG для всех изображений; в этой статье мы поможем вам выбрать правильный формат изображения для различных вариантов использования.
 

---

 

Выбор правильного формата изображения важен для веб-производительности

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

PNG и JPEG — самые популярные форматы изображений в Интернете. Ссылка: W3Techs, август 2021 г.

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

Это напрямую приводит к ускорению загрузки и меньшему использованию трафика вашими посетителями.

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

 

---

Растровые изображения

Наиболее распространенными сегодня в Интернете форматами изображений являются JPEG, PNG и GIF, все растровых изображения .

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

Растровые изображения с высоким разрешением/качеством содержат большое количество пикселей, что обеспечивает более четкое качество и лучшую цветопередачу.

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

После экспорта в JPEG, PNG или GIF они становятся растровыми изображениями.

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

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

Узнайте больше о сжатии без потерь и сжатии с потерями здесь.
 
 

Типы растровых изображений

Давайте рассмотрим некоторые распространенные форматы растровых изображений ниже:
 
 
A) JPEG

Форматы JPEG имеют самую широкую поддержку среди браузеров и устройств и очень широко используются в Интернете.

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

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

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

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

PNG также имеет универсальную веб-поддержку и является наиболее часто используемым форматом изображения в Интернете.

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

PNG отлично подходят для создания полноэкранных скриншотов с текстом. Вот снимок экрана водопадной диаграммы GTmetrix в формате PNG.

Формат PNG также поддерживает полную прозрачность (т. е. прозрачность альфа-канала), что делает его отличным вариантом, в частности, для логотипов и значков.
 

В) ГИФ
GIF-файлы могут быть подходящим форматом для простой графики с ограниченным количеством цветов (они поддерживают только до 256 цветов). Это делает их плохим выбором для отображения сложных изображений, и рекомендуется не использовать их для детальных изображений, таких как фотографии.
 

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

Кроме того, GIF-файлы поддерживают прозрачность; однако он также ограничен, поскольку не поддерживает полную альфа-прозрачность (только включение или выключение прозрачности).

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

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

---

Векторные изображения

Векторное изображение — это формат изображения, созданный с использованием алгоритма визуализации, который определяет линии, кривые, формы и цвета для создания изображения.

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

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

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

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

---

 

Какой формат изображения следует использовать?

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

Мы рекомендуем выбирать форматы с учетом их сильных сторон и того, насколько хорошо они соответствуют цели вашего веб-сайта. В общем, рассмотрите следующее:

 

---

Когда использовать JPEG

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

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

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

При этом не рекомендуется экспортировать изображение с параметрами «Максимальное качество» или «100%» в редакторе изображений. Вы всегда должны экспериментировать и выбирать уровень сжатия, обеспечивающий баланс резкости, качества и размера файла.
 

Не выбирайте качество 100 % при экспорте файлов JPEG. Выберите от 70% до 90% в зависимости от того, как выглядит итоговое качество изображения.

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

Наконец, JPEG не поддерживает прозрачность, поэтому не используйте JPEG, если вам нужно, чтобы ваши изображения использовали прозрачность.
 

---

Когда использовать PNG

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

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

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

PNG отлично подходят для снимков экрана и графики с четкими цветовыми переходами.

Следует отметить одну вещь: хотя формат PNG поддерживает миллионы цветов, вам лучше использовать PNG для изображений, которые содержат меньше цветовых данных. Это связано с тем, что PNG, как правило, на тяжелее по размеру, чем JPEG.

---

Когда использовать SVG

SVG лучше всего использовать для логотипов, значков и простой графики, включая инфографику .

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

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

Например, SVG — отличный формат для графиков, простых иллюстраций и графических изображений, где изображения имеют различные формы и размеры.
 

SVG отлично подходят для базовых иллюстраций, которые уже векторизованы.

 
Вы можете увеличить или уменьшить изображение выше по своему усмотрению без потери качества — попробуйте сами, увеличивая и уменьшая масштаб в браузере (Ctrl + Scroll).

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

Сравнение размеров изображений и файлов в форматах JPEG, PNG и SVG.

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

Также важно отметить, что больше детализирует изображение, больше размер файла. В целом, мы рекомендуем использовать изображения SVG только в том случае, если они заметно меньше, чем эквивалентные изображения PNG.

Узнайте больше о том, как создавать и использовать SVG.

 

---

Можно ли использовать один формат для всех изображений?

Правда, зависит от .

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

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

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

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

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

Как правило¹ :

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

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

Используйте SVG для логотипов и векторной графики.

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

SVG также может быть отличной альтернативой PNG, если изображение является векторным по своей природе (в основном логотипы и значки).

Подводя итог, вот несколько вариантов использования и их рекомендуемые форматы:

JPEG Фотографии Изображения с насыщенными цветами, деталями и т. д. Статические изображения, для которых качество не имеет решающего значения и требуется файл небольшого размера Богатые изображения с текстом, если качество сжатия приемлемое	PNG Логотипы Простая графика с ограниченным количеством цветов Изображения, требующие прозрачности Скриншоты Богатые изображения с текстом, если качество сжатия JPEG неприемлемо
СВГ Логотипы Простая графика с ограниченным количеством цветов Векторная графика

Узнайте больше о плюсах и минусах использования форматов JPEG и PNG здесь.
 
 

Всегда оптимизируйте изображение независимо от того, какой формат вы выберете

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

Существует несколько способов сжатия изображений:

• Используйте онлайн-инструменты оптимизации изображений, такие как Kraken или Optimizilla.
  • Эти инструменты также преобразуют базовые файлы JPEG в прогрессивные JPEG-файлы , которые загружаются поэтапно, а не побитно. Подробнее об этом.
     
• Используйте плагин, если вы используете CMS, например WordPress.

Узнайте больше об оптимизации изображений здесь.

---

 

Рассмотрите альтернативы

Вместо показа вашим посетителям только статических изображений JPEG/PNG рассмотрите следующие альтернативы:
 

---

WebP

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

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

По данным Google, WebP уменьшает размер файла примерно на 26% по сравнению с PNG и до 34% по сравнению с JPEG.

 

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

Формат WebP также поддерживает прозрачность, поэтому все файлы PNG и JPEG можно заменить изображениями WebP.

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

Аудит «Предоставление изображений в форматах нового поколения» показывает, сколько места вы можете сэкономить, предоставляя изображения WebP вместо JPEG/PNG.

Однако имейте в виду, что WebP не является единственным золотым решением, и есть несколько моментов, которые следует учитывать, прежде чем вы решите обслуживать изображения WebP:

• Изображения WebP еще не имеют 100% универсальной поддержки .
  • Совместимость в настоящее время составляет приблизительно 95% и улучшается; однако следует отметить, что старые браузеры могут не иметь возможности просматривать изображения WebP.
  • Вам по-прежнему следует показывать резервное изображение в формате PNG/JPEG, чтобы оно соответствовало всем устройствам и браузерам, используемым вашими посетителями.
     
• Изображения WebP несовместимы напрямую с большинством платформ CMS .
  • Хотя WordPress сейчас поддерживает WebP, другие платформы не имеют какой-либо прямой поддержки.
  • Вам может понадобиться подключаемый модуль, расширение или другой обходной путь (например, CDN изображений) для загрузки этих файлов.
  • Вы также можете использовать онлайн-конвертеры WebP для сохранения существующих изображений в формате WebP.
     
• В некоторых случаях изображения WebP до могут быть не меньше, чем эквивалентные JPEG .
  • В зависимости от того, какой кодировщик JPEG используется, вы можете получить лучшую экономию с помощью JPEG.
  • Сжатие WebP может быть неэффективным при больших размерах изображений.

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

---

Современные форматы

В дополнение к WebP существует несколько более современных форматов изображений «следующего поколения», которые либо доступны в настоящее время (с ограниченной поддержкой), либо появятся в будущем.

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

Эти форматы включают:
 

---

AVIF

AVIF означает Формат файла изображения AV1 . Это новый бесплатный формат изображений с открытым исходным кодом, основанный на видеокодеке AV1.

AVIF имеет следующие преимущества перед существующими форматами изображений:

• Как правило, он обеспечивает лучшее сжатие по сравнению с JPEG, PNG, GIF и даже WebP.
• AVIF поддерживает сжатие как с потерями, так и без потерь.
• Изображения высокого качества могут быть предоставлены с гораздо меньшими размерами файлов по сравнению с другими форматами.
• Он имеет широкий цветовой профиль и может использоваться для изображений HDR.
• Поддерживает анимацию, а также прозрачность альфа-канала.

Согласно Netflix, AVIF может заменить JPEG в будущем.

 

Netflix одним из первых начал использовать формат изображений AVIF. Источник изображения: Нетфликс

Тем не менее, AVIF — это новый формат, который все еще находится на ранней стадии разработки, поэтому перед тем, как вы решите его использовать, следует учесть некоторые моменты:

• Браузерная поддержка далеко не так хороша, как , как другие форматы.
  • На момент написания AVIF поддерживается только Google Chrome (версия 85 и выше), Firefox (версия 92 и выше) и Opera (версия 71 и выше).
  • Если вы решите использовать изображения в формате AVIF, вам потребуется предоставить резервные изображения PNG/JPEG для поддержки неподдерживаемых браузеров и устройств.
     
• Платформы CMS и конструкторы сайтов еще не имеют встроенной поддержки AVIF .
  • WordPress и другие платформы не поддерживают AVIF, поэтому вам придется использовать плагин, Image CDN или другой обходной путь.
  • Кроме того, вы можете вручную вставлять или загружать изображения в HTML-код своей страницы.
     
• Большинство графических редакторов не позволяют сохранять фотографии в формате AVIF, по умолчанию .
  • В то время как GIMP теперь имеет встроенную поддержку AVIF, Photoshop и большинство других графических редакторов этого не делают.
  • Вам нужно будет использовать расширения или онлайн-конвертеры изображений, чтобы преобразовать существующие изображения в формат AVIF.

 

---

JPEG-XL

JPEG-XL — это новый формат изображения, который скоро заменит устаревший формат JPEG.

Подобно AVIF, формат JPEG-XL обеспечивает превосходное сжатие, более высокое качество изображения и меньший размер файла по сравнению с существующими форматами. Он имеет широкий цветовой спектр и включает поддержку анимации.

JPEG-XL также преодолевает некоторые ограничения устаревшего JPEG, такие как прозрачность альфа-канала. Узнайте больше о спецификации JPEG-XL.

Обратите внимание, , что браузеры пока официально не поддерживают формат JPEG-XL, поскольку спецификации еще не стандартизированы на момент написания.

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

 

---

 

Резюме

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

Рассмотрите возможность использования SVG вместо PNG, где это возможно, и оцените использование форматов следующего поколения, таких как WebP или AVIF, везде и всегда, когда это возможно, чтобы дополнить ваши JPEG/PNG для повышения производительности в Интернете.

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

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

 

---

 

Дополнительная литература

Мы описали общий подход к определению того, какие форматы использовать для ваших изображений. Ниже приведены еще несколько статей о выборе правильного формата мультимедиа и оптимизации изображений в целом:

• Ресурсы GTmetrix
  • Как оптимизировать изображения: практическое руководство
  • Глоссарий терминов веб-производительности — PNG
  • Глоссарий терминов веб-производительности — JPEG
• Прочие ресурсы
  • JPEG против PNG: почему форматы изображений важны для быстрого веб-сайта
  • Какой формат изображений лучше всего подходит для вашего сайта? JPEG против PNG против GIF
  • JPG и PNG — чем они отличаются и когда использовать каждый формат файла изображения
  • Как оптимизировать изображения для Интернета и повысить производительность
  • Все, что вам нужно знать о сжатии изображений

 

---

 

Тестирование с разными странами, скоростями и опциями

Basic GTmetrix Splash

Получите доступ к большему количеству тестовых мест, вариантов анализа и скоростей подключения!

Зарегистрируйте учетную запись Basic GTmetrix и посмотрите, как ваш сайт работает в других сценариях — БЕСПЛАТНО!

---

Начните БЕСПЛАТНО

Войдите в свою учетную запись GTmetrix и посмотрите, как ваш сайт работает во всех сценариях.

---

Попробуй это сейчас

Теги: изображения JPG PNG WEBP wordpress

JPEG против PNG: какой формат сжатого изображения лучше?

Daven Mathies/Digital Trends

В цифровых изображениях преобладают два формата изображений: JPEG (или JPG) и PNG.

Содержание

• JPEG
• PNG
• Какой из них лучше?

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

JPEG

Сокращение от Joint Photographic Experts Group — команды, разработавшей формат — JPEG стал стандартным сжатым форматом для цифровой фотографии и обмена изображениями в Интернете благодаря тщательному балансу размера файла и качества изображения.

Точный коэффициент зависит от используемой программы и настроек, но типичное изображение JPEG имеет коэффициент сжатия 10:1. Если вы начнете с изображения размером 10 МБ и экспортируете его в формате JPEG, вы должны получить изображение размером примерно 1 МБ. JPEG должен иметь практически нулевую разницу в качестве, хотя это зависит от содержимого исходного изображения и типа файла.

Для этого JPEG использует дискретное косинусное преобразование (DCT). Хотя математика, стоящая за этим, сложна, этот алгоритм сжатия рассматривает все изображение, определяет, какие пиксели в изображении достаточно похожи на пиксели вокруг него, и объединяет пиксели в плитки (группы пикселей, имеющие одинаковое значение).

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

По этой причине JPEG не рекомендуется использовать в качестве формата архивных изображений, потому что если вам когда-нибудь понадобится открыть его и снова внести изменения, вы понесете потерю качества. Как и Adobe Lightroom, неразрушающие фоторедакторы могут помочь обойти эту проблему, если вы никогда не удаляете исходные файлы, поскольку они сохраняют изменения только как метаданные, а не записывают исходное изображение.

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

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

JPEG поддерживает цветовые пространства RGB и CMYK в 8-битном режиме, но его предложения CMYK оставляют желать лучшего. (Современные принтеры прекрасно обрабатывают файлы RGB, так что это не является серьезной проблемой. Однако было бы полезно, если бы вы все еще придерживались форматов более высокого качества для печати.)

За прошедшие годы появилось и исчезло множество вариаций JPEG. Например, JPG-LS был разработан для исправления сжатия с потерями, но так и не закрепился и в конечном итоге отошел на второй план. JPG2000 также пытался решить проблему без потерь, но и он не набрал обороты. BPG, новый формат, основанный на видеостандарте H.265, был полон решимости заменить JPEG, но так и не прижился.

Создатели JPEG недавно поделились новым форматом, предназначенным не для замены JPEG, а для того, чтобы существовать вместе с ним в качестве опции для более быстрой потоковой передачи. В JPEG XS сжатие всего в шесть раз вместо 10, но более простые алгоритмы означают, что файл быстрее справляется с потоковыми задачами. Потенциальная замена может прийти в виде HEIF, который также основан на стандарте h.265. Там, где другие потерпели неудачу, HEIF смог добиться успеха благодаря поддержке одного из крупнейших технологических брендов: Apple. Это еще не все, но больше программ для редактирования изображений и больше устройств добавляют поддержку нового формата, такого как JPEG Pleno, который предлагает пользователям отличный набор инструментов, который включает в себя голографическое изображение, текстуру плюс глубину, облака точек и свет. поля.

Плюсы	Минусы
Малый размер файла	Сжатие с потерями
Встроенная поддержка EXIF ​​	Не подходит для печати CMYK
Широкая поддержка	Нет поддержки прозрачности

PNG

Аббревиатура от Portable Network Graphics, PNG — это формат файлов без потерь, разработанный как более открытая альтернатива формату обмена графикой (GIF).

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

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

Одной из выдающихся особенностей PNG является поддержка прозрачности. И в цветных изображениях, и в оттенках серого пиксели в файлах PNG могут быть прозрачными. Это позволяет создавать изображения, которые аккуратно накладываются на содержимое изображения или веб-сайта. Как видно из приведенного выше GIF, многие программы редактирования — в данном случае Adobe Photoshop Mix — используют клетчатый фон для обозначения прозрачности графики. Это делает PNG идеальным для логотипов, особенно с текстом, используемых на веб-сайтах. С другой стороны, если вы создадите прозрачный фон в Photoshop и сохраните изображения в формате JPG, этот прозрачный фон станет белым, потому что формат не поддерживает прозрачность.

Когда дело доходит до фотографии, PNG может показаться надежной альтернативой проприетарным форматам RAW для хранения изображений без потерь. Тем не менее, правда в том, что есть много лучших альтернатив, таких как Adobe Digital Negative (DNG), который вы можете снимать даже на свой смартфон, и TIFF. PNG также изначально не поддерживает данные EXIF, которые включают в себя такую ​​информацию, как выдержка, диафрагма и ISO с камеры, с помощью которой он был снят.

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

Как и JPEG, формат PNG претерпел несколько вариаций на протяжении многих лет. APNG — это все еще поддерживаемый формат, предназначенный для воспроизведения анимированных функций GIF. Он не так распространен, но поддерживается многими современными браузерами.

Еще один забавный момент заключается в том, что на ранних стадиях разработки PNG предлагалось называть его PING, что является аббревиатурой от «PING Is Not GIF» — дерзкая шутка в адрес создателей формата GIF.

Плюсы	Минусы
Сжатие без потерь	Размер файла больше, чем у JPEG
Опора для прозрачности	Нет встроенной поддержки EXIF ​​
Отлично подходит для текста и скриншотов

Какой из них лучше?

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

Если вы хотите поделиться фотографией с камеры в Instagram, Twitter и т. д., лучше всего использовать JPEG. Он меньше по размеру, оптимизирован для фотографии и широко поддерживается практически всеми мыслимыми платформами и сервисами.

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