Как оптимизировать изображения для веба в 2026 году

Изображения составляют 50–70% среднего веса веб-страницы. Плохо оптимизированные изображения. главная причина медленных сайтов, высокого показателя отказов и плохих оценок Core Web Vitals. В этом руководстве рассматриваются все техники для доставки быстрых, лёгких и SEO-дружественных изображений.

Шаг 1: Выберите правильный формат

Выбор формата оказывает наибольшее влияние на размер файла ещё до применения какого-либо сжатия:

• AVIF: лучшее сжатие для фотографий (стандарт 2026 года для современных браузеров)
• WebP: отличное сжатие, поддержка 97% браузеров. используйте как запасной вариант для AVIF
• JPEG: универсальный запасной вариант для фотографий
• PNG: когда требуется прозрачность и WebP не является опцией
• SVG: логотипы, иконки, любой векторный контент. бесконечно масштабируемый

Шаг 2: Изменяйте размер до отображаемых размеров

Никогда не загружайте фото размером 4000×3000 пикселей для отображения в 800×600. Браузер загружает полное разрешение, а затем масштабирует его. впустую расходуя пропускную способность без видимой пользы. Всегда изменяйте размер изображений до максимальных отображаемых размеров перед загрузкой.

Для адаптивных изображений, отображаемых в разных размерах на мобильных и десктопных устройствах, используйте атрибуты srcset и sizes, чтобы предоставить несколько разрешений и позволить браузеру выбрать подходящее.

Шаг 3: Агрессивно сжимайте

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

Шаг 4: Реализуйте ленивую загрузку

Изображения ниже линии видимости не следует загружать, пока пользователь не прокрутит страницу к ним. Нативный HTML-атрибут делает это тривиальным:

<img src="photo.jpg" alt="Описание" loading="lazy">

Всегда добавляйте loading="eager" (или опускайте атрибут) для изображений выше линии видимости. особенно для вашего LCP-изображения (Largest Contentful Paint). Ленивая загрузка главного изображения негативно скажется на вашем LCP-показателе.

Шаг 5: Добавляйте атрибуты width и height

Всегда указывайте width и height для каждого тега <img>. Это позволяет браузеру зарезервировать правильное пространство до загрузки изображения, устраняя Cumulative Layout Shift (CLS). метрику Core Web Vitals:

<img src="photo.jpg" alt="Описание" width="800" height="600" loading="lazy">

Шаг 6: Используйте CDN

Сеть доставки контента (CDN) обслуживает изображения с серверов, географически близких к вашим пользователям, снижая задержку. Современные image CDN (Cloudflare Images, Fastly, Imgix, Cloudinary) также автоматизируют:

• Конвертацию форматов (AVIF для поддерживающих браузеров, иначе WebP, в крайнем случае JPEG)
• Адаптивное изменение размера по запросу
• Агрессивное кеширование с правильными заголовками

Шаг 7: Предзагружайте LCP-изображение

Изображение Largest Contentful Paint (обычно главное изображение) оказывает наибольшее влияние на пользовательский опыт. Сообщите браузеру о необходимости загрузить его как можно раньше:

<link rel="preload" as="image" href="hero.avif" type="image/avif"
      imagesrcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
      imagesizes="100vw">

Чеклист оптимизации изображений

• ✅ Правильный формат для каждого типа изображения
• ✅ Размер изменён до максимальных отображаемых размеров
• ✅ Сжатие до целевого качества (не 100%)
• ✅ loading="lazy" для всех изображений ниже линии видимости
• ✅ Атрибуты width и height для каждого <img>
• ✅ Описательный атрибут alt для каждого изображения
• ✅ Доставка по HTTPS через CDN
• ✅ LCP-изображение предзагружено
• ✅ Элемент <picture> с источниками AVIF + WebP + JPEG