Чеклист по оптимизации изображений: все шаги для быстрых веб-картинок

Последнее обновление: June 28, 2026. Повторите проверку по этому списку перед каждой публикацией для получения стабильных результатов.

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

Быстрый ответ: что включает полный цикл оптимизации изображений?

Полный цикл означает выбор правильного формата (WebP для фотографий, SVG для векторов, PNG для прозрачности), изменение размера до размеров отображения, сжатие до целевого размера файла, предоставление адаптивных вариантов со srcset, ленивую загрузку изображений ниже линии сгиба и доставку из CDN. Пропуск любого этапа снижает производительность — несжатое изображение медленное, слишком большое изображение тратит байты, а изображение без ленивой загрузки задерживает первоначальный рендеринг. Выполните весь чек-лист, вместо того чтобы выбирать отдельные этапы.

Почему следует использовать контрольный список вместо ad hoc оптимизации?

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

• Каждый этап затрагивает отдельный фактор производительности.
• Пропуск этапа оставляет этот фактор без внимания.
• Этапы достаточно независимы, чтобы их можно было надежно проверить по чек-листу.

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

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

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

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

Этап 2: Изменение размера до размеров отображения

Никогда не отдавайте изображение размером больше, чем оно отображается. Фотография в 4000 пикселей в слоте шириной 600 пикселей тратит пропускную способность и замедляет страницу. Изменить размер до максимально размера, который будет отображаться изображением, учитывая retina (2x).

Изменение размера перед сжатием важно, потому что сжатие работает с количеством пикселей — меньше пикселей сжимаются в меньшие байты. В руководстве по изменению размера описано, как это сделать без потери качества.

Этап 3: Сжатие до целевого размера файла

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

• Фотографии: WebP или JPEG с качеством 80.
• Графика с плоским цветом: PNG или без потерь WebP.
• Проверьте при 100% масштабе, чтобы убедиться в отсутствии видимых артефактов.
• Стремитесь к тому, чтобы главные изображения были менее 200 KB, а контентные — менее 100 KB.

В руководстве по сжатию описаны техники и настройки качества.

Этап 4: Обслуживание адаптивных вариантов

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

• Генерируйте варианты 1x, 2x и 3x для экранов Retina.
• Используйте дескрипторы ширины (400w, 800w) с sizes для адаптивных макетов.
• Позвольте браузеру выбрать правильный файл.
• Гид по адаптивным изображениям охватывает разметку.

Этап 5: Ленивая загрузка изображений ниже линии сгиба

Изображения ниже линии сгиба не должны загружаться, пока пользователь до них не прокрутит страницу. Это освобождает пропускную способность для первоначальной отрисовки и улучшает метрику Largest Contentful Paint.

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

Этап 6: Доставка через CDN

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

CDN также поглощает скачки трафика. Когда страница становится вирусной или кампания посылает всплеск посетителей, кэш на периферии обслуживает изображения вместо источника, благодаря чему сайт остается быстрым даже при нагрузке, которая в противном случае перегрузила бы один сервер. Для сайтов, где время бесперебойной работы под трафиком так же важно, как и среднее время загрузки, такая устойчивость ценится не меньше снижения задержки.

Распространенные ошибки оптимизации

Даже со списком проверок несколько ошибок повторяются и сводят на нет проделанную работу. Знание этих ошибок ускоряет этап проверки.

• Сжатие перед изменением размера — тратит усилия на пиксели, которые будут отброшены. Всегда сначала изменяйте размер.
• Предоставление одного размера для всех устройств — телефоны скачивают файлы, предназначенные для десктопа. Используйте srcset.
• Ленивая загрузка главного изображения — задерживает элемент LCP. Держите изображение выше сгиба готовым к отображению.
• Забыть атрибуты ширины и высоты — вызывает сдвиг макета во время загрузки изображений. Всегда включайте их.
• Использование PNG для фотографий — сильно увеличивает размер файла. Используйте WebP или JPEG для фотоконтента.

Проверка: сработала ли оптимизация?

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

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

В web.dev performance measurement guide описано, как PageSpeed оценивает страницы, а в Mozilla performance guide подробно рассматриваются эти метрики. Страница, которая проходит эти проверки после выполнения контрольного списка, имеет действительно быстрые изображения, а не просто выглядит оптимизированной. Для более широкого контекста SEO image SEO guide связывает этот прирост производительности с поисковой выдачей.

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

Что включает полная оптимизация изображений?

Выбор правильного формата, изменение размера до размеров отображения, сжатие до целевого размера файла, предоставление адаптивных вариантов с srcset, ленивая загрузка ниже линии сгиба (below the fold) и кэширование на CDN. Пропуск любого этапа оставляет байты или качество незадействованными. Этот контрольный список существует для того, чтобы не забыть ни один этап.

Почему следует использовать контрольный список вместо ad hoc оптимизации?

Потому что ad hoc оптимизация пропускает этапы — разработчик сжимает, но забывает изменить размер, или добавляет srcset, но забывает о ленивой загрузке. Контрольный список гарантирует, что каждое изображение пройдет через все этапы, последовательно, на всем сайте. Именно постоянство улучшает Core Web Vitals в масштабе.

Какова самая значительная победа в оптимизации изображений?

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

Как мне предоставить адаптивные варианты?

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

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

Всякий раз, когда вы добавляете новые изображения, и проводите аудит существующего набора, если Core Web Vitals падают. Старые изображения, оптимизированные годами назад, могут быть в формате JPEG, тогда как WebP сейчас был бы меньше. Периодический аудит помогает отслеживать дрейф формата и сжатия.

Как мне провести аудит изображений существующего сайта?

Запустите сканирование (Lighthouse или инструмент типа Screaming Frog), чтобы получить список каждого изображения с его размером и габаритами, а затем отметьте все, которые слишком велики для своего места отображения, представлены как JPEG там, где WebP был бы меньше, или не имеют атрибутов ширины/высоты. Сначала исправьте самые крупные нарушения — несколько огромных изображений обычно составляют большую часть веса страницы. Повторно запустите аудит после исправлений, чтобы подтвердить улучшение.