Путь изображения к сайту
Оригинальная фотография весит мегабайты и имеет огромное разрешение. Чтобы страница загружалась быстро, изображение проходит несколько шагов подготовки.
Какой формат выбрать
| Формат | Подходит для | Замечание |
|---|---|---|
| JPEG | Фотографии | Универсален, поддерживается везде |
| PNG | Графика с прозрачностью и чёткими краями | Для фотографий тяжёл |
| WebP | Фотографии и графика | Обычно заметно легче JPEG и PNG, широко поддерживается |
| AVIF | Фотографии | Часто ещё легче WebP, но дольше кодируется |
| SVG | Логотипы, иконки, схемы | Векторный формат, не теряет качества при масштабировании |
Размеры и адаптивность
Не отдавайте телефону изображение шириной в несколько тысяч пикселей. Подготовьте несколько размеров и позвольте браузеру выбрать подходящий.
<picture>
<source type="image/avif" srcset="/img/sofa-800.avif 800w, /img/sofa-1600.avif 1600w">
<source type="image/webp" srcset="/img/sofa-800.webp 800w, /img/sofa-1600.webp 1600w">
<img src="/img/sofa-800.jpg" width="800" height="600"
alt="Диван «Альфа» в гостиной">
</picture>Браузер возьмёт первый поддерживаемый им формат, а запасное изображение остаётся для остальных.
Что ещё важно
- Размеры в атрибутах. Ширина и высота предотвращают смещения макета.
- Осмысленный alt. Он помогает и доступности, и поиску по картинкам.
- Понятные имена файлов. Как их называть, описано в статье про имена изображений.
- Разумное сжатие. Небольшая потеря качества на глаз незаметна, а вес падает заметно.
- Кеширование и CDN. Быстрая доставка изображений с ближайшего сервера.
Порядок оптимизации на существующем сайте
- Найдите самые тяжёлые изображения на самых посещаемых страницах.
- Уменьшите размеры до реально используемых, подготовьте современные форматы.
- Добавьте размеры и запасные варианты в разметку.
- Замерьте результат: вес страницы и показатель LCP должны улучшиться.
Не путайте: ленивая загрузка подходит не для всех изображений — подробнее в статье про ленивую загрузку.
Условный пример экономии
| Шаг | Что меняется | Эффект |
|---|---|---|
| Оригинал с камеры | Огромное разрешение и вес | Слишком тяжело для страницы |
| Изменён размер до реально нужного | Меньше пикселей | Вес падает в несколько раз |
| Подобрано разумное сжатие | Небольшая потеря качества, незаметная глазу | Вес снижается ещё |
| Современный формат | WebP или AVIF вместо JPEG | Дополнительное снижение веса |
Каталог с тысячами изображений
- Автоматизируйте подготовку: загрузка оригинала должна запускать создание нужных размеров и форматов.
- Используйте сеть доставки содержимого с преобразованием изображений на лету.
- Задайте правила именования и хранения, чтобы адреса файлов оставались стабильными.
- Регулярно проверяйте самые тяжёлые изображения отчётом об оптимизации.
Частые вопросы
Какой формат изображений выбрать для фотографий?
WebP или AVIF с запасным вариантом в JPEG: они обычно заметно легче JPEG при сопоставимом качестве.
Нужно ли указывать ширину и высоту изображения?
Да: так браузер заранее зарезервирует место, и вёрстка не сдвинется при загрузке.
Как отдавать изображения на разных устройствах?
Подготовить несколько размеров и указать их в атрибутах srcset, чтобы браузер выбрал подходящий для экрана.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.