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 сжимает изображения без потери качества.
Статья опубликована в 2019 и была обновлена в 2022 году
Тематические статьи
Ускоряем работу сайта: оптимизация HTML
Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, а без этого скорость загрузки и отрисовки будет ниже.
быстродействие
веб-разработка
Статья опубликована в 2014 году
Ускоряем работу сайта за счёт оптимизации CSS
Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.
быстродействие
веб-разработка
Статья опубликована в 2014 году
Браузерное или клиентское кеширование
Кэширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или при посещении просматривает несколько страниц, которые используют одинаковые ресурсы.
быстродействие
веб-разработка
Статья опубликована в 2014 году
Ajax-навигация Turboliks & Wiselinks
Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.
быстродействие
JavaScript
веб-разработка
Статья опубликована в 2014 году
Адаптивные изображения
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения.
Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет‑соединение. Рассмотрим самые распространённые.
PNG против JPG: битва популярных форматов изображений
Всемогущий эксперт по написанию текстов, который хорошо разбирается в проблемах Mac и предоставляет эффективные решения.
Изображения помогают вам выразить то, что вы хотите сказать. Он может быть использован в личных целях, где вы хотите поделиться своим опытом. Это может также использоваться для компаний, чтобы разделить информацию о продукте или услуге. Два самых популярных формата изображения — PNG и JPEG. И есть дебаты о двух, PNG против JPG столкновение. Эти два типа изображений являются наиболее широко используемыми в Интернете. Вы можете узнать, какой из них использовать для определенных целей.
Эта статья научит вас веревкам о PNG против JPG, предоставив обзор двух. Мы будем сравнивать их цели, методы сжатия и многое другое. Давайте погрузимся в эту дискуссию PNG против JPG сейчас!
Часть 1. PNG против JPG: какой формат изображения имеет наилучшее качество?
Прежде чем мы углубимся в дебаты PNG против JPG, давайте сначала дадим обзор двух. JPEG обозначает Объединенную группу экспертов по фотографии, а также название группы, разработавшей этот формат файла. Это сжатый формат с потерями. Вы должны думать об этом следующим образом: JPEG получит изображение и уменьшит его размер, уменьшая мельчайшие детали в нем. Можно уменьшить размер файла до крошечных битов, но это приведет к не очень приятному выводу. Изображение будет в пикселях и полный беспорядок.
Таким образом, форматы файлов JPEG представляют собой компромисс между ними. Размер оставлен меньше. Тем не менее, изображение сохраняется с максимально возможным качеством, обеспечивая компромисс между размером и качеством. Из-за этого JPEG стал одним из самых популярных форматов и стандартным форматом для сжатых изображений. Правильное сокращение для этого — JPEG. Однако он также взаимозаменяем с JPG. Это сокращение из трех букв было связано с тем, что раньше в расширениях Windows было только три буквы. Таким образом, вы можете видеть его как JPG в окнах и как JPEG на компьютерах с macOS.
Наконечник: Если вы хотите конвертировать PNG-файлы в формат JPG, ознакомьтесь с этого руководства изучить эффективные способы.
Если вы хотите конвертировать JPEG в PNG, было бы лучше иметь инструмент, который поможет вам в этом.
Для чего в основном используется PNG?
С другой стороны, PNG относится к Portable Graphics Format и является широко используемым форматом файлов изображений, в котором по умолчанию используется сжатие без потерь. Этот формат отлично подходит для текста, штриховых рисунков и пиктограмм и дает небольшой размер без ущерба для качества. PNG был впервые разработан как альтернатива для GIF, анимированная графика, формат. Он обрабатывает изображения с высокой детализацией и большим контрастом. Таким образом, это по-прежнему популярный формат файлов изображений, который используется как в Интернете, так и в автономном режиме.
Часть 2. В чем разница между PNG и JPG?
Теперь давайте перейдем к дебатам PNG против JPG. Каковы различия между ними и что вам нужно для конкретной цели? Сначала вы можете подумать, что между ними нет различий в качестве. Но на самом деле есть. Давайте найдем подробности об JPEG и PNG ниже.
& Разработка
Во-первых, давайте поговорим о PNG v. JPG с точки зрения развития. JPEG был разработан Объединенной группой экспертов по фотографии и является стандартным форматом, который сжимается и используется для онлайн-обмена изображениями и цифровой фотографии. Это потому, что он имеет отличный баланс между качеством изображения и размером файла. С другой стороны, PNG разработан как замена графического формата обмена (GIF). Он был разработан в 1995 году группой под руководством Томаса Бутелла. Он стал популярным, когда его продвигал W3C, организация, целью которой является определение стандартов для Интернета.
компрессия
В чем разница между JPG и PNG? Теперь давайте поговорим о форматах PNG и JPG с точки зрения методов сжатия. Что мне отправлять: PNG или JPEG? Когда дело доходит до JPEG, фактическая степень сжатия будет зависеть от программного обеспечения и используемых настроек. Тем не мение, обычно степень сжатия изображений JPEG составляет 10: 1. Это означает, что если вы начнете с изображения размером 20 МБ и экспортируете его в другой формат JPEG, размер изображения будет только 2 МБ. С точки зрения качества, как правило, обычным глазом потери не заметны. Однако это по-прежнему будет зависеть от содержимого и фактического типа файла исходного изображения. Для того, чтобы JPEG достиг этого, он будет использовать DCT или дискретное косинусное преобразование.
Математика и смежные науки, стоящие за этим DCT, на самом деле сложны. Тем не менее, это тип алгоритма сжатия, который извлекает обзор всего изображения. Затем он определяет, какие из пикселей изображения похожи на каждый из остальных пикселей, окружающих его. Затем эти похожие пиксели объединяются в заголовки. Когда мы ссылаемся на заголовки, мы ссылаемся на группу похожих пикселей, которые содержат похожие значения.
Это действительно эффективный метод. Однако после этого вы не сможете вернуть потерянную информацию. Когда мы говорим PNG против JPG, последний использует сжатие с потерями. Имея в виду, когда ваше изображение действительно сохранено, потерянные данные после сохранения не будут впоследствии восстановлены. Подумайте о том, чтобы сделать ксерокопию вашей первой фотокопии. Делая ксерокопию после каждой ксерокопии, вы заметите, что качество каждый раз ухудшается.
С другой стороны, PNG использует метод сжатия, называемый LZW. Это также используется в форматах TIFF и GIF. Этот метод сжатия состоит из двух этапов, что приводит к уменьшению размеров файлов без ущерба для качества. Опять же, наука, лежащая в основе этой техники сжатия, сложна. Тем не мение, с PNG сжатие без потерь. На самом деле это без потерь. Это означает, что при каждом открытии и повторном сохранении изображения не происходит потери качества.
Предлагаемое и нерекомендованное использование
Теперь давайте перейдем к дискуссии о предполагаемом использовании PNG и JPG. Не рекомендуется использовать JPG для архивных форматов файлов изображений. Это потому, что каждый раз, когда вы открываете его и вносите правки, будет происходить потеря качества. «Неразрушающие» фоторедакторы (например, Adobe Lightroom) действительно могут помочь вам решить эту проблему. Однако необходимо, чтобы исходные файлы не удалялись. Он работает, сохраняя внесенные вами изменения как метаданные. Они не перезаписывают исходное изображение JPEG.
JPEG не рекомендуется использовать с изображениями, в которых много текста. Не рекомендуется использовать их на иллюстрациях с четкими линиями. Это связано с тем, что определенные линии обычно размываются из-за сглаживания. Имеется в виду преднамеренное размытие линий или содержимого изображения с целью удаления его шероховатостей. Изображения, тексты в формате JPEG и помещенные на белый фон будут отображать больше артефактов по сравнению с PNG. Бывают ситуации, когда вам нужно преобразовать файлы PDF в формат JPEG. В этих случаях вы должны убедиться, что экспортируете его в настройки с наивысшим качеством. Таким образом текст будет четким.
Этот формат файла поддерживает CMYK и RGB цветовые пространства в 24-битных настройках. Однако есть на что обратить внимание в отношении того, что он предлагает для CMYK. Современные принтеры могут хорошо управлять файлами RGB. Это не проблема, с которой вам нужно иметь дело. Однако при печати все же лучше придерживаться форматов с более высоким качеством. Один из вариантов — использовать 8-битную шкалу серого. Однако коэффициенты сжатия на самом деле не так впечатляют, как у изображений в градациях серого, если сравнивать их с цветными изображениями.
С другой стороны, PNG может использоваться для детальных изображений с высокой контрастностью внутри него. Вот почему этот формат файла используется по умолчанию для снимков экрана. Это потому, что он предлагает почти отличное изображение пикселя за пикселем вашего экрана. Он не сжимает похожие пиксели вместе. Вероятно, самая большая особенность форматов файлов PNG — это поддержка прозрачности. Как изображения в градациях серого, так и цветные изображения могут иметь прозрачные пиксели. Таким образом, вы можете формулировать изображения, которые накладываются на другие изображения или даже веб-сайты.
Что лучше для веб-сайта: PNG или JPG? В каком формате лучше всего сохранить логотип? PNG — отличный выбор для логотипов, особенно тех, которые содержат текст и используются на веб-сайтах. Если у вас есть файл PNG с прозрачным фоном и вы конвертируете его в JPG, прозрачность станет белой. Это связано с тем, что в споре о форматах PNG и JPG последний не поддерживает прозрачность.
PNG — одна из лучших альтернатив, которые вы можете использовать для проприетарных Файл RAW форматы касаемо фотографии. Он хранит изображения со сжатием без потерь. Однако есть и другие альтернативы, такие как DNG (Digital Negative) от Adobe и TIFF. Данные EXIF изначально не поддерживаются PNG. Эти данные EXIF содержат информацию о выдержке, ISO и диафрагме с камер, с помощью которых были сняты изображения. Таким образом, PNG был фактически разработан для использования в Интернете (для всемирной паутины).
JPEG — это формат, который используется для большого количества изображений. Тем не менее, PNG по-прежнему является эффективной альтернативой для использования, которое JPEG не может выполнить. По сути, PNG используется для четкого отображения текста или логотипа над другими разделами или элементами вашего сайта.
Вариации
Теперь мы углубимся в вариации PNG против JPG. За последние несколько лет было создано множество вариаций JPEG. Например, JPG-LS был разработан для устранения проблемы сжатия с потерями. Тем не менее, он не стал популярным и был забыт.
JPG2000 является еще одной альтернативой, которая решает проблему сжатия с потерями. Однако, это не получило тягу также. Другой формат, который был сделан, чтобы заменить JPEG, был BPG. Этот формат был основан на стандарте видео под названием H.265. Это было действительно решительно, чтобы заменить JPEG. Однако это не так.
Потенциальной альтернативой JPEG может быть (включая измененные, и даже если изначально они имели HEIF. Это также основано на стандарте видео H.265. HEIF добился успеха благодаря использованию в продуктах Apple iOS. Тем не менее, ему еще предстоит пройти долгий путь. Но из-за популярности Apple многие программы и устройства для редактирования изображений поддерживают ее. Таким образом, сегодня он стал более доступным по сравнению с прошлым.
С другой стороны, в PNG также были внесены некоторые изменения, чтобы заменить его или стать его лучшей версией. Afng, например, это формат, который все еще поддерживается сегодня. Он создан для дублирования функции анимированной графики GIF. Он не так популярен, но по-прежнему поддерживается многими браузерами, которые мы используем сегодня.
Часть 3. PNG против JPG: плюсы и минусы
В этом сравнении PNG с JPG полезно иметь раздел «за» и «против», который поможет вам понять слабые стороны и возможности каждого формата файла. Ниже приведены преимущества и недостатки PNG по сравнению с JPG:
JPEG
- Имеет разумный или маленький размер файла.
- Имеет интегрированную поддержку для EXIF.
- Он поддерживается большим количеством программного обеспечения, операционных систем и устройств.
- Сжатие с потерями используется форматом файла.
- Это не рекомендуемый вариант в отношении печати CMYK.
- Он не поддерживает прозрачность в изображениях.
PNG
- Он использует технику сжатия без потерь.
- Он поддерживает прозрачность в изображениях.
- Это отличный формат файла для использования со скриншотами и текстами.
- Он имеет больший размер файла по сравнению с форматом файла изображения JPEG.
- Он изначально не поддерживает EXIF.
Часть 4. Качество PNG лучше, чем JPEG?
Итак, в этом споре о формате PNG и JPG, какой из них лучше? Чтобы дать вам действительно хороший ответ, мы хотим сказать, что один формат файла НЕ лучше другого. На самом деле это зависит от того, для каких целей вы будете использовать изображения. Если вы хотите поделиться изображениями, снятыми с камеры вашего телефона, в Twitter и Instagram, вам следует выбрать формат файла JPEG.
Это связано с тем, что файл JPEG меньше по размеру. Он также оптимизирован для использования в фотографии и имеет широкую поддержку на разных устройствах, сервисах и платформах.
С другой стороны, если вы хотите делать снимки экрана для дальнейшего использования, то лучшим выбором будет формат PNG. Это потому, что он не будет терять качество при каждом сохранении. И после редактирования изображения пиксель по-прежнему будет резким. Если вы собираетесь использовать веб-графику и логотипы, вам также следует выбрать PNG.
Часть 5. Бонус: удалите похожие изображения с вашего Mac
Если вы преобразовали файлы PNG в JPEG и наоборот, то на вашем компьютере могут быть похожие изображения. Для этого вы должны выбрать iMyMac PowerMyMac и его модуль под названием Похожие изображения Finder.
Модуль Похожие изображения Finder этого программного обеспечения является отличным способом найдите ваши похожие изображения и удалите их партиями. Это можно сделать всего за несколько кликов, и вам не нужно беспокоиться о потере данных. Это мощный инструмент, который сканирует ваш компьютер на наличие изображений, которые идентичны друг другу.
Часть 6. Вывод
В дебатах PNG против JPG мы узнали, что одно НЕ лучше, чем другое. Это зависит от вашего использования, потому что у каждого есть свои слабости, возможности, плюсы и минусы. Таким образом, мы сделали сравнение, чтобы помочь вам выбрать между двумя.
И, если у вас есть дубликаты в вашей системе из-за преобразования, вы можете удалить дубликаты этих идентичных изображений с помощью iMyMac PowerMyMac и его модуль поиска похожих изображений. У этого инструмента есть бесплатная пробная версия, так что вы можете протестировать его, если хотите. Получите PowerMyMac прямо сейчас!
Рейтинг: 4.7 / 5 (на основе 75 рейтинги)
JPEG или PNG — У какого формата лучшее качество?
При создании сайтов на этапе верстки всегда стоит задача выбора того или иного формата для хранения изображений.
Изображения можно сохранять в любом формате: PNG, JPEG, GIF и десятке других.
Но какой формат выбрать, чтобы передать лучше качество с минимальным размером получаемого файла изображения? Чем отличается jpeg от png? Какой самый качественный формат изображения для сайта?
Какой формат файла выбрать?
Формат GIF ограничен 256 цветами. Это формат без потерь, при его использовании достигается минимальное сжатие изображения. Формат GIF поддерживает анимацию (единственный из всех форматов) и прозрачность, но полупрозрачные картинки сохранить в нем не получится. За счет особенностей алгоритма, он очень хорошо сжимает изображения, в котором есть вертикальные линии (для веба, например, это могут быть вертикальные разделительные полосы, одноцветные иконки, графические точки и пр.). Он может быть использован для хранения чертежей, текстовой и знаковой график в небольшом размере файла.
Формат PNG является форматом, в котором сжатие происходит без потерь. В этом формате на каждый пиксель приходится 3 цветовых канала (RGB — красный, зеленый, синий), тем самым реализуется полноцветное формирование изображения без искажений. По качеству цветового отображения формат PNG может превосходить JPG, но по размеру файла будет также больше. Формат PNG поддерживает разные уровни прозрачности (полупрозрачность). За счет особенностей алгоритма, он очень хорошо сжимает изображения, в котором есть горизонтальные линии. И когда стоит задача выбрать сохранение файла в формате GIF или PNG, для случаев, когда картинка представляет из себя примитивные линии, стоит обращать внимание на положение этих линий — т.е. в формате GIF стоит сохранять изображения с вертикальными линиями, в PNG — горизонтальными. PNG является лучшим форматом фото для хранения чертежей, текста и знаковой графики в небольшом размере файла.
Формат JPG является форматом, в котором есть потери цвета. Алгоритм работы в этом формате такой, что в нем очень хорошо сжимаются изображения с градиентами (сохраняются цвета первого пикселя в градиенте и последнего, а при выводе изображения — все промежуточные цвета между этими точками вычисляются), что делает его полезным для хранения изображений в меньшем размере, чем в формате BMP. Фотографии, переливы, логотипы, бекграунды и пр. лучше сохранять в формате JPG.
Таким образом, при разработке сайтов можно добиться очень хороших результатов в скорости за счет правильного выбора форматов изображений для сайта.
Какой формат выбрать — WebP, PNG или JPG
Существует множество форматов изображений, с некоторыми из них разработчики сталкиваются постоянно, с другими крайне редко.
В статье рассмотрим три распространённых формата: JPEG, PNG и WebP. Каждый из них имеет свои сильные и слабые стороны. Выбор правильного формата зависит от специфики вашего сайта и изображений, с которыми вы работаете. Узнаем особенности форматов и в каких случаях их лучше использовать.
Форматы изображений и их назначение
JPEG
Формат JPEG (Joint Photographic Experts Group) был разработан в 1992 году для сжатия фотографий или других изображений с большим количеством цветов и плавными переходами между оттенками. Изображения в формате JPEG широко используются в вебе. Большинство красочных картинок, которые мы видим в интернете, имеют именно этот формат.
Изображение в формате JPG.
В процессе сжатия изображения некоторые данные удаляются, чтобы уменьшить размер файла. При этом происходит незначительная потеря качества, но для глаз это не сильно заметно.
Недостаток JPEG-файлов в том, что, если изменить их размер, они могут стать размытыми. Также они не обладают прозрачностью, поэтому JPEG не подходит для создания логотипов. Файлы .jpg используют для контентных, декоративных фоновых изображений на сайте, также для иллюстрации товаров и многого другого.
PNG
Формат изображений PNG (Portable Network Graphics) часто используется для графики и логотипов. В отличие от JPEG, в PNG сжатие происходит без потерь — изображение сохраняет первоначальное качество даже после многократного редактирования или изменения размера. Это делает PNG отличным выбором для логотипов, иконок и других графических изображений, которые должны всегда оставаться чёткими.
Пример изображения PNG. Источник
Важная особенность этого формата — возможность поддержки альфа-канала, то есть прозрачности. Причём она может быть разной степени: от непрозрачного изображения до полностью прозрачного. Этот формат удобно использовать, если нужен прозрачный фон, например, у логотипа или графика.
В PNG есть многослойность. За счёт наложения слоёв и варьирования их прозрачности можно создавать интересные эффекты с тенями и градиентами.
Формат также поддерживает различные цветовые пространства, включая RGB и индексированный цвет, который позволяет хранить палитру цветов. Это полезно при использовании PNG для хранения изображений с меньшим количеством цветов, таких как иконки и логотипы.
Недостаток PNG — размер файла в нём обычно больше, чем в JPEG, что может привести к замедлению загрузки сайтов.
WebP
Формат WebP был разработан компанией Google в 2010 году. Он был создан для улучшения скорости загрузки страниц и экономии места на сервере.
WebP имеет ряд преимуществ по сравнению с другими форматами изображений. Он позволяет уменьшить размер файлов изображений на 25-35% по сравнению с JPEG, сохраняя при этом качество изображения. WebP обеспечивает поддержку прозрачности, анимации и многоканальности. Это делает формат идеальным для использования на сайтах, где важно быстрое время загрузки, например, в интернет-магазинах или на сайтах с множеством изображений.
Пример изображения в формате WebP
Недавно Google выпустил новую версию формата — WebP Lossless. Она использует алгоритм, который позволяет сжимать изображения без потерь качества, предыдущие же версии использовали только сжатие с потерями.
✅ Если вам понадобится использовать лёгкие изображения для вёрстки сайта, то для преобразования в формат WebP рекомендуется использовать онлайн-конвертеры. Например:
- Convertio — конвертер изображений, позволяющий преобразовывать JPEG, PNG и другие форматы в WebP.
- Online-Convert — сервис, который позволяет конвертировать изображения, видео, аудио и другие файлы в различные форматы, включая WebP.
- Squoosh — онлайн-приложение для оптимизации изображений, которое также позволяет сохранять их в формате WebP.
Как выбрать формат изображения
Для каждой задачи выбирайте свой формат изображения. Если важна быстрая загрузка, вы работаете с фотографиями или другими многоцветными изображениями, то лучше всего подойдёт WebP.
Если вам необходимо сохранить качество графики и логотипов, то лучше использовать PNG. Для изображений со множеством цветов и плавными переходами цвета выбирайте формат JPEG.
✅ Выбор формата изображения:
- определите задачи сайта и каждого изображения;
- для логотипов и графических изображений с мелкими деталями рекомендуется использовать формат PNG. Также для этих целей подойдёт WebP;
- для декоративных и красочных изображений подойдёт JPEG;
- если важны быстрая загрузка и большое количество многоцветных изображений, то лучше отдать предпочтение WebP.
Материалы по теме:
- Обзор цветовых форматов в CSS
- Полупрозрачный градиент над картинкой на чистом CSS
- Как добавить изображение на страницу
- Как сделать картинку ссылкой
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.