Картинки для сайта: формат, размер, сжатие
Картинки обычно весят больше всего остального на странице вместе взятого. Правильный формат и размер ускоряют сайт в разы, и посетитель разницы в качестве не увидит.
Какой формат выбрать
- WebP: основной формат для фото и иллюстраций. Его понимают все современные браузеры, а файл заметно меньше JPEG при том же качестве.
- AVIF: ещё меньше, но кодируется дольше. Хорош для крупных фото на первом экране.
- JPEG: запасной вариант для фотографий, когда WebP недоступен.
- PNG: только для скриншотов и картинок, где нужна точная пиксельная чёткость. Для фото PNG весит в разы больше.
- SVG: логотипы, иконки, простые схемы. Вектор, чёткий в любом размере и очень лёгкий.
Какой размер загружать
Не загружайте фото прямо с камеры: 4000 пикселей по ширине на сайте не нужны. Для картинки во всю ширину текста хватит 1200–1600 пикселей, для карточки 600–800. Если картинка показывается шириной 400 пикселей, на экранах с высокой плотностью её стоит сделать в два раза шире, 800.
Код для страницы
<img src="/img/foto-800.webp"
srcset="/img/foto-400.webp 400w, /img/foto-800.webp 800w, /img/foto-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 600px"
width="1200" height="675" alt="Описание картинки"
loading="lazy" decoding="async">- width и height обязательны: браузер заранее оставит место, и страница не будет прыгать при загрузке.
- loading="lazy" для всех картинок ниже первого экрана. Картинке на первом экране, наоборот, ленивая загрузка вредит.
- alt описывает, что на картинке: его читают поисковики и программы для незрячих.
Сжатие
Качество 75–85 для WebP и JPEG почти всегда незаметно отличается от исходника. Проверяйте глазами на участках с мелкими деталями и плавными переходами: там артефакты видны первыми. Иллюстрации на этом сайте сохранены в WebP с качеством 82.
Для логотипа и иконки сайта используйте SVG и генератор фавиконок, а для фона вместо картинки часто подходит CSS-градиент: он вообще ничего не весит.
Частые вопросы
Какой формат картинок лучше для сайта?
WebP для фото и иллюстраций, AVIF для крупных фото, SVG для логотипов и иконок. PNG только для скриншотов.
Какого размера загружать фото на сайт?
1200–1600 пикселей по ширине для картинки во всю ширину текста и 600–800 для карточки.
Зачем указывать width и height у картинки?
Браузер заранее оставляет место под картинку, и страница не прыгает при загрузке.
