Вопрос «какой формат изображения лучше для сайта?» кажется простым, но универсального ответа нет. Фотография товара, логотип с прозрачным фоном, скриншот интерфейса и большой баннер имеют разную структуру пикселей и разные требования к качеству. Формат, который отлично сжимает пейзаж, может создавать ореолы вокруг мелкого текста. Файл без потерь сохранит каждый пиксель, но окажется в несколько раз тяжелее, чем нужно для обычной фотографии.
Для большинства современных сайтов практичное решение — не выбрать один формат навсегда, а настроить правила: AVIF или WebP для оптимизированной доставки, JPEG или PNG как совместимый исходник либо fallback, SVG для векторной графики и несколько размеров каждого важного изображения. В этом материале сравним WebP, JPEG, PNG и AVIF, их сильные стороны, ограничения и влияние на скорость.
Сначала определите тип изображения
Расширение файла — только один параметр. До конвертации нужно понять, что содержит изображение и как оно будет показано. Фотографии состоят из тысяч цветов, плавных переходов и естественного шума. Скриншоты интерфейсов содержат ровные области, резкие границы и текст. Логотипам часто нужны прозрачность и идеально четкие контуры.
Растровая или векторная графика
WebP, JPEG, PNG и AVIF — растровые форматы: они хранят сетку пикселей. Увеличение небольшого файла снижает резкость. Для логотипов, иконок и простых схем обычно лучше SVG, поскольку вектор масштабируется без потери качества. Растр подходит для фотографий, сложных текстур, живописи и сцен, которые нельзя компактно описать геометрическими фигурами.
Сжатие с потерями и без потерь
Алгоритм с потерями удаляет информацию, которую зритель, вероятно, не заметит. Так работают JPEG, lossy WebP и lossy AVIF. Более сильное сжатие уменьшает файл, но увеличивает риск блоков, размытия, полос в градиентах и изменения цветов. Сжатие без потерь восстанавливает исходные значения пикселей; его поддерживают PNG, lossless WebP и lossless AVIF.
Без потерь не всегда означает лучше
Для фотографии разница между качественным lossy-файлом и lossless-версией часто незаметна при реальном размере показа, зато разница в весе существенна. Режим без потерь оправдан для технической графики, скриншотов с текстом, промежуточных мастер-файлов и изображений, которые будут редактироваться.
JPEG как предсказуемая основа для фотографий
JPEG десятилетиями остается стандартным форматом веб-фотографий. Он поддерживается почти везде, быстро кодируется и декодируется, а инструменты для него есть в любом редакторе и CMS. Для фото без прозрачности правильно оптимизированный JPEG остается рациональным решением, особенно как fallback.
Где JPEG работает хорошо
- фотографии людей, интерьеров, природы и товаров;
- большие изображения с естественными переходами цвета;
- email-рассылки и внешние системы с неизвестной поддержкой новых форматов;
- резервный вариант внутри
<picture>.
Progressive JPEG может показать грубую предварительную версию до завершения загрузки. Это не уменьшает количество байтов автоматически, но иногда улучшает субъективное восприятие скорости.
Ограничения JPEG
JPEG не поддерживает альфа-канал и прозрачный фон. На логотипах, тексте, тонких линиях и контрастных границах сжатие создает заметные артефакты. Повторное сохранение уже сжатого JPEG ухудшает его снова, поэтому рабочий оригинал лучше хранить без потерь.
Избегайте повторной lossy-конвертации
Если доступен только готовый JPEG, не нужно сначала дополнительно сжимать его, а затем превращать в WebP или AVIF. Каждый этап накапливает дефекты. Генерируйте веб-версии из RAW, TIFF, PNG или максимально качественного исходника.
PNG для прозрачности и точных деталей
PNG использует сжатие без потерь и поддерживает альфа-канал. Он хорошо сохраняет ровные цвета, мелкий текст, линии и прозрачные края. Поэтому PNG часто выбирают для скриншотов, схем, растровых логотипов и элементов интерфейса.
Когда PNG оправдан
PNG подходит, если изображение имеет немного цветов, прозрачность или пиксельные детали, которые не должны меняться. Для обучающей статьи со скриншотами он может быть надежным мастер-форматом. Для доставки браузеру lossless WebP при этом нередко создает меньший файл с тем же визуальным результатом.
Почему фотографии редко стоит хранить в PNG
Кодирование без потерь сложной фотографии с миллионами оттенков дает большой файл. Если прозрачность не нужна, JPEG, WebP или AVIF обеспечат лучший баланс. Архивный оригинал может оставаться PNG, но посетителю его напрямую отдавать не следует.
PNG-8 и PNG-24
Палитровый PNG-8 экономичен для простой графики с ограниченным количеством цветов. PNG-24 хранит полноцветное изображение, но весит больше. Современный конвейер может автоматически выбирать палитру, удалять лишние метаданные и оптимизировать структуру без изменения пикселей.
WebP как универсальный формат для сайта
WebP поддерживает сжатие с потерями и без потерь, прозрачность и анимацию. Согласно официальной документации Google, lossy WebP в тестах давал файлы на 25–34% меньше сопоставимых JPEG при эквивалентном показателе качества, а lossless WebP — на 26% меньше PNG. Реальный результат зависит от изображения и настроек энкодера, поэтому эти проценты не являются гарантией.
Сильные стороны WebP
WebP подходит для фотографий и прозрачной растровой графики. Он широко поддерживается современными браузерами, эффективно декодируется и интегрирован в популярные CMS, CDN и библиотеки обработки. Это делает его безопасным базовым выбором для нового корпоративного сайта.
Где WebP может проиграть
AVIF иногда сжимает фотографии эффективнее. PNG может быть проще для обмена мастер-файлами или специального ПО. Старым браузерам, почтовым клиентам и встроенным платформам может понадобиться JPEG или PNG. Автоматическая конвертация также не гарантирует уменьшение: простая палитровая PNG-графика иногда уже оптимальна.
WebP не отменяет контроль качества
Значения quality не являются универсальными между энкодерами. Показатель 80 в JPEG и 80 в WebP не описывает одинаковое визуальное качество. Проверяйте лица, волосы, мелкие надписи, красные контуры, тени и плавные градиенты на типичных экранах.
AVIF для максимальной эффективности
AVIF основан на видеокодеке AV1 и поддерживает сжатие с потерями и без потерь, прозрачность, HDR, широкий цветовой диапазон и несколько изображений в одном контейнере. Во многих фотографических сценариях он дает меньший файл, чем JPEG или WebP, при похожем визуальном качестве. Возможности описаны в руководстве web.dev по AVIF.
Когда AVIF приносит больше пользы
AVIF стоит тестировать для больших hero-изображений, каталогов товаров, редакционных фотографий и насыщенных медиа страниц. Экономия на одной миниатюре может быть несущественной, а на десятках полноразмерных фото — заметной для мобильного пользователя.
Компромиссы AVIF
Кодирование AVIF сложнее и обычно медленнее, чем JPEG или WebP. Это важно, когда сайт создает множество вариантов сразу после загрузки. Агрессивные настройки могут удалять мелкие текстуры или давать неестественную гладкость. Поддержка современных браузеров уже широкая, но fallback остается уместным для старых клиентов.
Не применяйте AVIF ко всему автоматически
На маленьких иконках, линейной графике и изображениях с текстом служебные данные контейнера и особенности кодирования могут не дать преимущества. Сравнивайте AVIF, WebP и PNG на реальных категориях контента, а не на одной тестовой фотографии.
Краткое сравнение форматов
| Формат | Сжатие | Прозрачность | Лучшие сценарии | Главное ограничение |
|---|---|---|---|---|
| JPEG | С потерями | Нет | Фото, fallback, внешние каналы | Артефакты на тексте и краях |
| PNG | Без потерь | Да | Скриншоты, графика, прозрачные элементы | Большой размер фотографий |
| WebP | Оба режима | Да | Универсальная веб-доставка | Не всегда самый маленький файл |
| AVIF | Оба режима | Да | Большие фото, каталоги, hero | Более медленное кодирование |
Доставка современных форматов через picture
Элемент <picture> позволяет браузеру выбирать формат. Он берет первый поддерживаемый source, а вложенный <img> остается fallback и содержит alt, размеры и параметры загрузки.
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" width="1280" height="720"
alt="Описание изображения">
</picture>Порядок важен: предпочтительный эффективный формат ставят первым, fallback — последним. Сервер не должен отдавать JPEG под именем AVIF; MIME type и фактическое содержимое обязаны совпадать.
Когда достаточно одного WebP
Если аудитория использует современные браузеры, а сайт не встроен в старые WebView или email-шаблоны, один WebP может быть практичным. Меньшее число вариантов упрощает кеширование, хранение и администрирование. Решение принимайте по аналитике реальных устройств.
Art direction и формат решают разные задачи
<picture> может отдавать разные кадры для мобильного и десктопного экрана. Это art direction. Формат управляет кодированием, а media-условие — композицией. Не сжимайте широкий баннер в узкую колонку, если главный объект становится неразборчивым.
Размеры важны не меньше формата
Изображение шириной 4000 пикселей останется избыточным даже в AVIF, если показывается в блоке 600 пикселей. Наибольшую экономию часто дает правильная геометрия, а затем формат и качество.
Используйте srcset и sizes
srcset перечисляет доступные ширины, а sizes подсказывает браузеру примерную ширину в макете. Браузер учитывает viewport и плотность пикселей до загрузки подходящего кандидата.
<img
src="photo-960.webp"
srcset="photo-480.webp 480w,
photo-960.webp 960w,
photo-1600.webp 1600w"
sizes="(max-width: 700px) 100vw, 50vw"
width="960" height="640" alt="...">Всегда задавайте width и height
Размеры позволяют браузеру зарезервировать правильные пропорции до загрузки файла и уменьшают layout shift. CSS по-прежнему может сделать картинку адаптивной через max-width:100% и height:auto.
Высокая плотность не требует бесконечных пикселей
Большая версия полезна для детальной фотографии на Retina-экране, но разница между 2x и 3x может быть незаметна при обычном расстоянии просмотра. Проверяйте визуально и не создавайте гигантские варианты без необходимости.
Влияние на Core Web Vitals
Большое изображение на первом экране часто становится элементом Largest Contentful Paint. Меньший файл сокращает загрузку, но LCP также зависит от момента обнаружения ресурса, приоритета, ответа сервера и рендеринга.
Не применяйте lazy loading к hero
Главное изображение первого экрана должно обнаруживаться рано. Обычно для него не используют loading="lazy"; при необходимости добавляют fetchpriority="high". Галереи и изображения ниже viewport можно загружать лениво.
Не прячьте важный hero только в CSS
CSS-фон обнаруживается позже обычного <img> в HTML. Если hero несет смысл и может стать LCP, семантический img или picture проще оптимизировать. Чисто декоративный фон может оставаться в CSS.
Используйте preload выборочно
Предварительная загрузка помогает критическому ресурсу, но избыток preload конкурирует за сеть с CSS, шрифтами и другими файлами. Не нужно приоритизировать всю галерею.
Оценивайте качество глазами и метриками
Самый маленький файл не обязательно лучший. Если товар выглядит пластиковым, градиент имеет полосы, а текст на скриншоте размыт, сжатие вредит задаче. Сравнивайте кандидатов в одинаковом размере на мобильном и десктопном экранах.
Где искать артефакты
- волосы, трава, ткань и повторяющиеся мелкие текстуры;
- красные элементы на контрастном фоне;
- тени и плавные градиенты неба;
- тонкие линии, иконки и текст;
- полупрозрачные края и тени объектов.
Не сравнивайте одинаковые числа quality
Найдите близкое воспринимаемое качество в каждом формате и только потом сравните вес. SSIM, PSNR и современные перцептивные метрики помогают в больших конвейерах, но важные маркетинговые изображения стоит проверять визуально.
SEO и доступность изображений
Формат сам по себе не обеспечивает позиции, но более быстрая и стабильная страница улучшает опыт. Поисковой системе также нужны доступный URL, контекст и полезный alt.
Пишите содержательный alt
Альтернативный текст описывает содержание или функцию картинки для человека, который ее не видит. Не добавляйте список ключевых слов. Декоративное изображение может иметь пустой alt="", а информация со схемы должна быть доступна и в HTML.
Сохраняйте стабильные URL
CDN или CMS могут генерировать варианты динамически, но адреса должны оставаться кешируемыми и предсказуемыми. Не меняйте их при каждом запросе. После замены важной картинки обновите sitemap и проверьте старые ссылки.
Если тяжелые изображения уже ухудшают скорость и индексацию, SEO-аудит сайта поможет найти LCP-элементы, неправильные размеры, отсутствие lazy loading и другие технические причины.
Автоматизация в CMS и на сервере
Ручная оптимизация подходит для десяти файлов, но не для каталога с тысячами товаров. Надежная система хранит один качественный исходник, а при загрузке или первом запросе создает необходимые форматы, ширины и кадры.
Что должен делать конвейер
- проверять тип, размеры и безопасность файла;
- исправлять ориентацию по EXIF;
- хранить мастер отдельно от публичных копий;
- генерировать AVIF, WebP и fallback по правилам;
- создавать несколько ширин без увеличения маленького исходника;
- удалять лишние метаданные, сохраняя нужный цветовой профиль;
- записывать width, height и alt в модель контента;
- кешировать результат в CDN и очищать по версии файла.
Генерация заранее или по запросу
Предварительное создание дает предсказуемую отдачу, но занимает место и процессорное время для неиспользуемых вариантов. Генерация по требованию экономит хранилище, однако замедляет первый запрос и требует защиты от произвольных размеров. Часто применяют гибрид: основные ширины создаются сразу, редкие — через image CDN.
Автоматизация особенно важна при разработке интернет-магазина: одна фотография товара используется в миниатюре, карточке, галерее, рекомендациях и Open Graph.
Типичные ошибки
- изменить расширение без реального перекодирования;
- отдавать исходник 5000 px в превью 300 px;
- превратить логотип в JPEG с потерями;
- конвертировать поврежденный JPEG с еще меньшим качеством;
- отдавать AVIF без fallback важным старым клиентам;
- использовать lazy loading для основного LCP-изображения;
- не указывать width и height;
- применять одно качество к фото, скриншотам и прозрачной графике;
- оптимизировать обложку, игнорируя галереи и сторонние виджеты.
Практическая схема выбора
Для фотографий и hero
Начните с AVIF, добавьте WebP и при необходимости JPEG fallback. Сравните вес и мелкие детали. Для критичного hero создайте продуманные мобильный и десктопный кадры, задайте размеры и не применяйте lazy loading.
Для скриншотов и интерфейсов
Сравните PNG, lossless WebP и lossless AVIF. Если текст остается четким в качественном lossy WebP, его можно использовать, но проверьте масштаб 100%. Важный текст продублируйте в HTML.
Для прозрачных объектов
Используйте WebP или AVIF с alpha, а PNG храните как мастер или fallback. Проверяйте полупрозрачные тени на светлом и темном фоне. Для простого логотипа выбирайте SVG.
Для большого каталога
Настройте пресеты по роли изображения, а не одно значение quality для всех. Измеряйте средний вес страницы, cache hit rate, время генерации и LCP. Если платформа не поддерживает такой процесс, учтите его при разработке сайта или технической модернизации.
Сбалансированная рекомендация
WebP — самый простой универсальный стандарт доставки для большинства современных сайтов: он подходит для фотографий и прозрачной графики, широко поддерживается и легко автоматизируется. Добавляйте AVIF там, где он заметно уменьшает большие фото. JPEG оставляйте надежным fallback и обменным форматом, а PNG используйте для графики без потерь, прозрачности и мастер-файлов.
Скорость обеспечивает не само расширение. Нужны правильные физические размеры, responsive variants, разумное качество, раннее обнаружение LCP, lazy loading ниже первого экрана, стабильный макет, кеширование и автоматический конвейер. Лучший формат — тот, который выполняет требования конкретного изображения с минимальным реальным весом и без заметного ухудшения.