Как ускорить загрузку изображений на вашем сайте (без размытия)

Почему вес изображений важен

Самое медленное на странице — обычно её самое большое изображение, и именно его браузер часто измеряет как Largest Contentful Paint (LCP). Core Web Vitals от Google считают хорошим LCP менее 2,5 секунды. Одна главная фотография в 3 МБ при мобильном соединении может в одиночку израсходовать весь этот бюджет.

1. Отдавайте изображения в том размере, в каком они показываются

Нет смысла отправлять фото в 4000 пикселей туда, где оно показывается шириной 800 пикселей. Как практическое правило, изображение должно быть не более чем примерно вдвое шире ширины отображения, что сохраняет чёткость на экранах высокой плотности. Типичная ширина: 1600–2000 px для главного изображения на всю ширину, 800–1200 px для изображений в статьях, 300–400 px для миниатюр.

2. Используйте современный формат

Файлы WebP обычно на 25–35% меньше JPG при сопоставимом качестве, и все современные браузеры их поддерживают. Используйте PNG только там, где нужна графика без потерь или прозрачность. Если нужно поддерживать старое ПО, держите JPG как запасной вариант. Подробности — в JPG vs PNG vs WebP.

3. Сжимайте до разумного веса

Это ориентировочные цели, а не правила: главное изображение — менее примерно 200 КБ, изображения внутри статей — менее примерно 100 КБ и миниатюры — менее примерно 30 КБ. Задайте цель и позвольте инструменту найти самое высокое качество, которое ей соответствует, вместо того чтобы подбирать ползунок наугад.

4. Загружайте лениво изображения ниже первого экрана

<img src="photo.webp" alt="Describe the image"
     width="800" height="600" loading="lazy">

Ленивая загрузка (lazy loading) откладывает изображения, пока посетитель не прокрутит страницу поближе к ним. Не применяйте её к главному изображению вверху страницы — оно должно загружаться сразу, потому что обычно является элементом LCP.

5. Всегда задавайте ширину и высоту

Когда размеры указаны в HTML, браузер резервирует нужное место до прихода изображения, чтобы страница не прыгала при загрузке (этот скачок измеряется как Cumulative Layout Shift). Описательный атрибут alt помогает доступности и поиску по картинкам.

6. Предлагайте несколько размеров с помощью srcset

<img
  src="photo-800.webp"
  srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 800px"
  alt="Describe the image"
  width="800" height="600">

Браузер выбирает самый маленький файл, который достаточно чёток для экрана посетителя, так что телефон не скачивает версию для компьютера.

Как проверить результат

Прогоните страницу через PageSpeed Insights или Lighthouse в инструментах разработчика Chrome. Оба отмечают слишком большие и неоптимизированные изображения и оценивают, сколько именно байтов вы сэкономили бы.

Подготовка файлов

1. Конвертируйте изображение в WebP.
2. Задайте нужную ширину в инструменте изменения размера — с заблокированным соотношением сторон.
3. Задайте максимальный размер файла и проверьте результат ползунком «до/после».
4. Экспортируйте по одному файлу для каждой ширины, которую вы хотите использовать в srcset.

При каждом экспорте работайте от оригинала. Повторное сжатие уже сжатой копии теряет больше качества, чем однократное сжатие источника.

Часто задаваемые вопросы