Оптимизация изображений для скорости: сократите нагрузку страниц без потери качества

Последнее обновление: June 28, 2026

Изображения обычно являются самой тяжелой частью веб-страницы, поэтому их оптимизация — это самое эффективное изменение, которое вы можете внести для повышения скорости страницы. Работа проста: нужно предоставить правильный размер, правильный формат и правильное сжатие, а затем отложить загрузку изображений, которые пользователь не видит сразу. В этом руководстве описаны конкретные шаги, которые уменьшают вес изображений и время загрузки без видимой потери качества, а также то, как эти улучшения отражаются в Core Web Vitals.

Быстрый ответ: как оптимизировать изображения для скорости загрузки веб-страницы?

Изменяйте размер каждого изображения до фактических размеров отображения, конвертируйте его в WebP (или AVIF с запасным вариантом), compress до качества 80 и подавайте адаптивные варианты со srcset, чтобы каждое устройство загружало правильный размер. Лениво загружайте изображения ниже линии сгиба и доставляйте их через CDN. Эта последовательность может уменьшить вес изображения на 70 процентов или более без видимой потери качества, что напрямую улучшает метрику Largest Contentful Paint и общую загрузку страницы.

Почему изображения определяют вес страницы?

Типичная веб-страница состоит в основном из изображений по объему байтов. Текст занимает мало места, CSS и JavaScript имеют ограниченный объем, но неоптимизированная фотография для хедера может весить несколько мегабайт сама по себе. Обслуживание изображений в полном разрешении и тяжелых форматах по умолчанию делает страницу тяжелой.

Возможность велика, потому что стандартная практика — загрузка JPEG с разрешением камеры — крайне неэффективна. Фотография в 5000 пикселей, отображаемая при 800 пикселях, передает в шесть раз больше пикселей, чем необходимо, а использование JPEG вместо WebP только усугубляет проблему. Исправление обоих аспектов резко уменьшает размер файла.

Шаг 1: Изменение размера до размеров отображения

Никогда не передавайте больше пикселей, чем отображает изображение. Resize до максимальной ширины отображения, умноженной на 2 для четкости Retina.

• Измеряйте место отображения, а не исходное разрешение.
• Умножьте на 2 для экранов Retina (3x для плотных телефонов).
• Изменяйте размер до сжатия — меньше пикселей означает меньший объем сжатия.
• В руководстве по изменению размера описано, как сделать это чисто.

Шаг 2: Конвертация в современный формат

Выбор формата определяет нижний предел размера файла. WebP и AVIF сжимают фотографии гораздо лучше, чем JPEG, без видимой потери качества в современных браузерах.

• AVIF — самый маленький, растет поддержка. Используйте запасной вариант WebP или JPEG.
• WebP — практичный вариант по умолчанию, широко поддерживается и намного меньше, чем JPEG.
• JPEG — универсальный запасной вариант для неподдерживающих браузеров.
• SVG — для логотипов и иконок; бесконечно масштабируемый и крошечный.

Сравнение форматов и Руководство AVIF vs WebP описывают компромиссы. Используйте элемент <picture>, чтобы сначала подавать AVIF, с запасными вариантами WebP и JPEG.

Шаг 3: Сжатие до целевого качества

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

Проверьте при увеличении на 100%, чтобы убедиться в отсутствии видимых артефактов. В руководстве по сжатию описаны эти методы.

Шаг 4: Обслуживание адаптивных вариантов и ленивая загрузка

Разные экраны требуют разных размеров, а изображения ниже сгиба не обязательно должны загружаться немедленно. Обработайте это с помощью разметки.

• Использовать srcset с описателями ширины, чтобы каждое устройство получало правильный файл.
• Добавить loading="lazy" к изображениям ниже сгиба для их отсрочки загрузки.
• Оставить главное изображение, загружаемое немедленно (eager-loaded), чтобы элемент LCP загружался быстро.
• Всегда устанавливать атрибуты ширины и высоты, чтобы предотвратить сдвиг макета.

В responsive images guide и в lazy loading guide подробно описывается реализация.

Как скорость изображений влияет на Core Web Vitals?

Оптимизация изображений напрямую влияет на метрику Largest Contentful Paint (LCP), которая часто измеряет скорость загрузки главного изображения (hero image). Тяжелое, медленно загружающееся главное изображение сдвигает LCP за порог в 2.5 секунды, который Google считает «хорошим», что негативно сказывается как на пользовательском опыте, так и на пои ранжировании. В руководстве по Core Web Vitals (/blog/optimizing-images-for-core-web-vitals) и в руководстве по image SEO (/blog/image-optimization-for-seo) объясняется связь этих улучшений с ранжированием, а документация web.dev LCP (https://web.dev/articles/lcp) описывает саму метрику. В руководстве Mozilla по производительности (https://developer.mozilla.org/en-US/docs/Web/Performance) рассматривается общая картина измерений — запустите PageSpeed Insights после оптимизации, чтобы подтвердить улучшение LCP.

Практический пример: оптимизация одного главного изображения

Прохождение через одно изображение делает абстрактные шаги конкретными. Возьмем JPEG шириной 5000 пикселей прямо с камеры, предназначенный для главного блока (hero slot) шириной 1200 пикселей на веб-сайте.

1. Изменение размера с 5000px до 2400px (для Retina: 1200 отображение × 2). Файл сразу уменьшается, потому что количество пикселей падает более чем на 75 percent.
2. Конвертация JPEG в WebP. Изменение формата само по себе обычно удаляет еще 25-35 percent при одинаковом качестве.
3. Сжатие до качества 80. Видимые потери незначительны, но байты падают еще больше.
4. Подача с использованием srcset, предлагающего варианты 1200w и 2400w, чтобы телефоны получали меньший файл.
5. Ленивая загрузка (Lazy-load), если это не элемент LCP, или оставить активной, если это главный блок (hero).

Оригинал размером 6 MB становится примерно 150 KB после этих шагов — это снижение на 97 percent без видимой потери качества на дисплее. Умножьте это на страницу с дюжиной изображений, и вес страницы рухнет, именно поэтому оптимизация изображений является работой по ускорению с наибольшим эффектом для большинства сайтов. Та же логика применима к каждому изображению, поэтому автоматизация процесса окупается.

Автоматизация оптимизации на всем сайте

Оптимизировать одно изображение вручную просто; оптимизировать каждое изображение на растущем сайте вручную — нет. Устойчивый подход заключается в том, чтобы встроить оптимизацию в рабочий процесс, чтобы она происходила автоматически, а не как ручной шаг, который можно забыть.

Инструмент на этапе сборки (build-step tool), который выполняет конвертацию и сжатие WebP для каждого изображения во время развертывания, гарантирует, что ни одно неоптимизированное изображение не попадет в продакшн. Для сайта, управляемого CMS, плагин, оптимизирующий при загрузке, перехватывает изображения у источника. А для сайтов с непредсказуемой компоновкой CDN, который трансформирует данные на лету, справляется с изменением размера без ручных вариантов. Правильная автоматизация зависит от стека технологий, но принцип одинаков — сделать оптимизацию настройкой по умолчанию, чтобы она не зависела от того, что человек вспомнит о ней.

Измерение результата

Оптимизация без измерения — это догадки. После выполнения шагов проверьте полученный прирост с помощью реальных инструментов.

1. Запустите Google PageSpeed Insights и проверьте рекомендации по изображениям.
2. Подтвердите, что LCP составляет менее 2.5 секунд.
3. Проверьте вкладку network на предмет фактических размеров файлов.
4. Тестируйте на мобильном соединении, а не только на широкополосном интернете.

Страница, которая проходит эти проверки после оптимизации, имеет по-настоящему быстрые изображения. Эта работа повторяема — выполните те же шаги для каждого изображения перед публикацией, и прирост скорости сохранится на всем сайте.

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

Что дает наибольший прирост скорости загрузки изображений?

Изменение размера до размеров отображения. Фото с камеры размером 6000px, показанное на дисплее 800px, является самой большой потерями. Сначала измените размер, а затем сжимайте — порядок важен больше, чем инструмент.

Следует ли мне применять ленивую загрузку ко всем изображениям?

Все, что находится ниже сгиба экрана (below the fold), да. Элемент LCP должен загружаться активно (и предварительно загружаться); ленивая загрузка замедляет самый крупный элемент и вредит Core Web Vitals. Примените ленивую загрузку к остальным элементам, чтобы они не конкурировали с главным элементом.

Как измерить скорость изображений?

Данные из PageSpeed Insights за окно в 28 дней, а не результаты одного лабораторного теста. Лабораторные инструменты (Lighthouse) показывают потенциал; данные реальных пользователей показывают то, что испытывают пользователи. CWV оценивается на основе данных реального использования.

Какой формат быстрее всего для веба?

WebP — как безопасный вариант по умолчанию (на 25–35 percent меньше, чем JPEG, универсальная поддержка), или AVIF для самых маленьких файлов в современных браузерах. Используйте современный формат с запасным вариантом JPEG через элемент <picture>.

Как подавать адаптивные изображения?

Сгенерируйте каждое изображение в размерах, необходимых для ваших точек останова (breakpoints), затем используйте srcset с атрибутом sizes, описывающим ширину отображения, позволяя браузеру выбрать нужный файл для каждого viewport. Браузер загружает только необходимый ему вариант, экономя байты на маленьких экранах. Подробную настройку см. в руководстве по адаптивным изображениям.

Что такое ленивая загрузка?

Это функция браузера, которая откладывает загрузку изображений до тех пор, пока они не окажутся рядом с viewport, чтобы изображения ниже сгиба экрана (below-the-fold) не конкурировали с главным элементом за пропускную способность. Добавьте loading="lazy" к изображениям ниже сгиба экрана. Элемент LCP должен загружаться активно (а не лениво), потому что его ленивая загрузка замедляет самый крупный элемент и вредит Core Web Vitals.