Изображения занимают большую часть веса типичной страницы, поэтому выбор формата напрямую влияет на скорость загрузки, расход трафика у посетителя и на то, как сайт выглядит на экране с высокой плотностью пикселей. Разбираем форматы, с которыми чаще всего приходится иметь дело в вебе: JPEG, PNG, WebP, SVG и AVIF. У каждого своя область применения, и универсального ответа «этот лучше» не существует — есть подходящий под конкретную задачу.
JPEG: фотографии и всё, что похоже на фотографии
Формат появился в 1992 году и создавался ровно под одну задачу — сжатие снимков с большим количеством оттенков и плавными переходами между ними. Сжатие в JPEG работает с потерями: часть данных отбрасывается безвозвратно, но алгоритм убирает в первую очередь то, к чему человеческий глаз наименее чувствителен. При разумном уровне качества разница с оригиналом на экране незаметна, а файл получается в разы легче.
Слабые места тоже понятны. JPEG не поддерживает прозрачность, поэтому логотип на цветном фоне в нём не сохранить. На резких границах — тексте, тонких линиях, иконках — появляются заметные артефакты в виде ореолов. Каждое повторное сохранение ухудшает картинку, поэтому исходники держат в другом формате, а JPEG получают на последнем шаге.
Практический вывод: JPEG уместен для карточек товаров, фотографий объектов и команды, фонов и любых декоративных изображений. Уровень качества около 80 процентов почти всегда даёт хороший компромисс, а гнаться за 100 процентами смысла нет — вес растёт кратно, видимая разница отсутствует.
PNG: прозрачность и чёткие границы
PNG сжимает без потерь: файл после сохранения содержит ровно то же изображение, что и до него. Формат поддерживает альфа-канал, то есть частичную прозрачность, за счёт чего в нём делают логотипы, иконки, элементы интерфейса, скриншоты и любую графику с резкими краями. Мягкая тень или сглаженный край логотипа на PNG выглядят аккуратно на фоне любого цвета.
Есть две разновидности, и это важно понимать при подготовке файлов. PNG-8 хранит палитру до 256 цветов и весит немного, PNG-24 хранит полный цвет и весит значительно больше. Для плоских иконок и простой графики первого варианта достаточно. Для фотографии PNG не подходит принципиально: без потерь снимок сожмётся плохо, и файл окажется в несколько раз тяжелее аналогичного JPEG при неотличимом результате.
WebP: компромисс, который поддерживают все браузеры
WebP разработан в Google и представлен в 2010 году. Он умеет и сжатие с потерями, и сжатие без потерь, поддерживает прозрачность и анимацию — фактически закрывает задачи JPEG, PNG и GIF одним форматом. Типичная экономия по сравнению с JPEG сопоставимого качества составляет порядка четверти-трети веса, на графике с плоскими заливками выигрыш относительно PNG бывает и больше.
Долгое время главным аргументом против была поддержка браузерами, но сейчас этот вопрос закрыт: WebP понимают все актуальные версии Chrome, Firefox, Safari и Edge. Для очень старых устройств достаточно оставить запасной вариант через тег picture, о котором ниже. На сайтах, которые мы сопровождаем, перевод библиотеки изображений в WebP обычно даёт самое заметное улучшение веса страницы при минимальных трудозатратах.
SVG: векторная графика, которая не размывается
SVG стоит особняком: это не набор пикселей, а описание фигур в текстовом виде. Поэтому векторное изображение остаётся резким при любом масштабе и на любой плотности экрана, а файл с простой иконкой весит считанные килобайты. SVG можно встроить прямо в разметку страницы и перекрасить средствами CSS — удобно, когда иконка меняет цвет при наведении.
Ограничение простое: SVG подходит для логотипов, иконок, схем, графиков и иллюстраций с ограниченным числом форм. Для фотографии он не годится вовсе. Ещё один момент, о котором забывают: SVG — это код, и файлы из ненадёжных источников нужно очищать от лишнего содержимого перед публикацией, а экспорт из графических редакторов стоит прогонять через оптимизатор — он убирает служебный мусор и заметно уменьшает размер.
AVIF и куда движется ситуация
AVIF основан на видеокодеке AV1 и сжимает сильнее WebP, особенно на сложных фотографиях и градиентах. Он поддерживает прозрачность, расширенный цветовой охват и высокую разрядность цвета. Поддержка в браузерах сейчас широкая, хотя и появилась позже, чем у WebP.
Минусы связаны с производством: кодирование заметно медленнее, а на мелких изображениях и простой графике выигрыш перед WebP может оказаться незначительным. Разумный подход — не переводить всё разом, а отдавать AVIF первым вариантом для тяжёлых фотографий на главных и посадочных страницах, оставляя WebP запасным.
Как выбрать формат под задачу
Сводим сказанное в таблицу — примерно по ней мы принимаем решение, когда готовим изображения для проекта.
| Что за изображение | Основной формат | Запасной вариант |
|---|---|---|
| Фотографии товаров, объектов, людей | AVIF или WebP с потерями | JPEG качеством около 80 |
| Логотип, иконки, схемы | SVG | PNG с прозрачностью |
| Графика с прозрачностью и мягкими краями | WebP без потерь | PNG-24 |
| Скриншоты интерфейсов с мелким текстом | PNG или WebP без потерь | PNG-8, если цветов немного |
| Короткая анимация | WebP или видео | GIF только при крайней необходимости |
| Фон во весь экран | WebP с пониженным качеством | JPEG, отдельная версия для мобильных |
Как отдавать несколько форматов одновременно
Выбирать один формат на весь сайт не нужно. Тег picture позволяет перечислить несколько источников, и браузер сам возьмёт первый, который умеет открыть: сначала AVIF, затем WebP, в конце обычный JPEG или PNG в теге img. Атрибут srcset дополнительно решает вторую задачу — отдаёт версию нужного размера, чтобы на телефон не уезжала картинка шириной в две тысячи пикселей.
Вместе с этим стоит соблюдать несколько правил, которые влияют на скорость не меньше самого формата.
- Указывайте ширину и высоту у изображений, иначе страница будет дёргаться по мере загрузки.
- Включайте отложенную загрузку для картинок ниже первого экрана и не включайте для верхних — иначе главное изображение появится позже.
- Не растягивайте маленькие файлы: изображение, увеличенное в разметке вдвое, выглядит размытым, и никакой формат этого не исправит.
- Обрезайте и уменьшайте до реального размера отображения, а не полагайтесь только на сжатие.
- Проверяйте вес страницы после наполнения контентом: редактор нередко загружает файлы прямо с камеры.
Чем конвертировать и как встроить это в работу
Разово перевести файлы можно онлайн-сервисами: Squoosh показывает результат сравнением до и после, Convertio и Online-Convert берут пакеты файлов. Для постоянной работы удобнее инструменты командной строки — cwebp для WebP, avifenc для AVIF, ImageMagick для массовых операций и svgo для очистки векторных файлов.
Правильнее всего убрать конвертацию из ручных операций совсем. На сопровождаемых проектах мы настраиваем автоматическое создание облегчённых версий при загрузке файла в админку: редактор кладёт исходный снимок, а сайт сам делает нужные размеры и форматы. Это снимает зависимость от аккуратности сотрудника и не даёт странице потяжелеть через полгода после запуска.
Если картинки на вашем сайте не оптимизированы, а разбираться с форматами и настройками некому, мы возьмём это на себя: настроим оптимизацию изображений и поддержку сайта, переведём библиотеку в современные форматы и проследим, чтобы новые файлы обрабатывались автоматически.
