Оптимизация изображений для сайта: форматы, размеры и сжатие

На средней странице изображения занимают больше половины объёма загрузки. При этом их проще всего оптимизировать: не нужно переписывать код, достаточно правильно подготовить файлы. В этом руководстве — какие форматы выбирать, как определить размеры, как сжимать и как подключать картинки, чтобы страница грузилась быстро.

Форматы изображений

WebP при сопоставимом качестве обычно легче JPEG на 25–35 %. AVIF сжимает ещё сильнее, особенно на фото с плавными переходами, но кодируется медленнее. SVG не теряет чёткость при любом масштабе и часто весит несколько килобайт.

Перевести изображения в WebP можно в конвертере WebP.

Правильный размер

Самая частая ошибка — загружать фото прямо с камеры или телефона. Снимок 4000×3000 px весит 3–8 МБ, а на сайте показывается в блоке шириной 800 px.

Как определить нужный размер:

1. Узнайте максимальную ширину блока, где выводится картинка (в DevTools браузера).
2. Умножьте на 2 для экранов с высокой плотностью пикселей (Retina, большинство смартфонов).
3. Не превышайте разумный предел — для полноширинного баннера 1920–2560 px.

Пример: картинка в статье выводится шириной 760 px. Для чётких экранов готовим 760 × 2 = 1520 px. Исходник 4000 px — в 2,6 раза шире нужного, а по количеству пикселей — примерно в 6,9 раза больше (4000² ÷ 1520² ≈ 6,9), если пропорции сохраняются.

Изменить размер без установки программ можно в инструменте изменения размера изображения.

Сжатие

• С потерями (lossy): удаляются детали, которые глаз почти не замечает. Для фото оптимально качество 75–85 %. Разница с 100 % на глаз почти не видна, а вес падает в 2–5 раз.
• Без потерь (lossless): файл уменьшается за счёт более эффективного кодирования и удаления метаданных (EXIF, цветовые профили, миниатюры). Экономия скромнее — 5–30 %.

Удаление EXIF полезно ещё и для приватности: в метаданных фото со смартфона бывают координаты места съёмки.

Сжать JPEG, PNG и WebP прямо в браузере можно в сервисе сжатия изображений — файлы не нужно никуда загружать.

Адаптивные изображения

Смартфону не нужен тот же файл, что и монитору 27 дюймов. Атрибуты srcset и sizes позволяют браузеру выбрать подходящий вариант:

<img src="/img/kitchen-800.jpg"
     srcset="/img/kitchen-400.jpg 400w,
             /img/kitchen-800.jpg 800w,
             /img/kitchen-1600.jpg 1600w"
     sizes="(max-width: 768px) 100vw, 800px"
     width="800" height="533"
     alt="Кухня в скандинавском стиле">

Чтобы отдавать современные форматы с запасным вариантом, используйте <picture>:

<picture>
  <source srcset="/img/kitchen.avif" type="image/avif">
  <source srcset="/img/kitchen.webp" type="image/webp">
  <img src="/img/kitchen.jpg" width="800" height="533" alt="Кухня в скандинавском стиле">
</picture>

Браузер возьмёт первый поддерживаемый формат.

Ленивая загрузка

Атрибут loading="lazy" откладывает загрузку картинок, пока пользователь не прокрутит к ним страницу:

<img src="/img/review-1.webp" loading="lazy" width="400" height="300" alt="Отзыв клиента">

Правила:

• Используйте для всего, что ниже первого экрана: галереи, отзывы, товары в конце списка.
• Не используйте для главного изображения первого экрана — это ухудшит LCP. Ему, наоборот, добавьте fetchpriority="high".
• Всегда указывайте width и height, чтобы не было сдвигов макета (CLS).

Alt и имена файлов

Атрибут alt описывает изображение для незрячих пользователей и для поисковиков — Яндекс Картинки и Google Картинки приносят заметный трафик магазинам и сайтам с рецептами, интерьерами, товарами.

• Хорошо: alt="Угловой диван «Норд» серого цвета, раскладной".
• Плохо: alt="диван купить диван недорого" или alt="IMG_4521".
• Для декоративных элементов — пустой alt="".

Имена файлов лучше давать латиницей через дефис: divan-nord-seryj.webp, а не ФОТО 1 (копия).JPG.

Пример: галерея товара

Карточка товара в интернет-магазине показывает основное фото шириной 600 px и шесть превью по 100 px. Фотограф прислал семь снимков по 5 МБ — всего 35 МБ.

Что делаем:

1. Основное фото готовим в двух размерах: 600 px и 1200 px (для экранов высокой плотности), формат WebP, качество 80 %. Получается около 60 и 150 КБ.
2. Превью — 200 px (двойная плотность), WebP, примерно по 10 КБ каждое.
3. Полноразмерное фото для увеличения — 1600 px, около 250 КБ, загружается только по клику.
4. Превью ниже первого экрана получают loading="lazy".

При первой загрузке страница получает основное фото (150 КБ на Retina-экране) и шесть превью (60 КБ) — около 210 КБ вместо 35 МБ. Цифры примерные и зависят от сюжета снимков, но порядок экономии типичный.

Автоматизация

Если изображений много, готовьте их автоматически. Большинство CMS умеют создавать уменьшенные копии при загрузке (WordPress генерирует несколько размеров и сам подставляет srcset). Для конвертации в WebP и AVIF есть плагины и модули, а на своём сервере — утилиты вроде cwebp, avifenc или библиотеки sharp и ImageMagick. Ещё один вариант — CDN с обработкой изображений «на лету»: он подбирает формат и размер под устройство посетителя.

Типичные ошибки

• Загрузка оригиналов с камеры без уменьшения.
• PNG для фотографий — файл в разы тяжелее JPEG или WebP.
• Ленивая загрузка главного баннера.
• Отсутствие width и height — макет «прыгает».
• Иконки в виде PNG вместо SVG или иконочного шрифта.
• Анимированные GIF размером в несколько мегабайт вместо короткого видео.
• Масштабирование большой картинки средствами CSS вместо подготовки нужного размера.

Чек-лист

• Фото в WebP или AVIF (с запасным JPEG при необходимости).
• Логотипы и иконки в SVG.
• Размер не больше двойной ширины отображения.
• Качество сжатия 75–85 %, метаданные удалены.
• Используются srcset и sizes для разных экранов.
• Ленивая загрузка ниже первого экрана, fetchpriority="high" для главного изображения.
• Указаны width, height и осмысленный alt.

Оптимизация изображений — первый и самый выгодный шаг в ускорении сайта. Остальные шаги описаны в гайде Как ускорить сайт, а влияние картинок на метрики Google — в материале Core Web Vitals.