Оптимизация изображений: как ускорить сайт в разы

Если сайт медленный, в подавляющем большинстве случаев виноваты изображения. На типовом сайте они составляют 60–80% веса страницы, и работа именно с ними даёт больший эффект, чем все остальные оптимизации вместе взятые.

Разбираем по шагам, что делать.

Почему это важнее, чем кажется

Медленная загрузка бьёт по трём направлениям сразу.

Посетители уходят до того, как увидят предложение — особенно с мобильного интернета.

Рекламный бюджет сгорает в загрузку: вы платите за клик, который не дошёл до содержимого.

Метрики скорости учитываются поиском. Самая крупная картинка первого экрана обычно и есть тот элемент, по которому измеряется скорость появления содержимого — подробно в статье Core Web Vitals.

Что делать: пять шагов

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

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

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

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

2. Современные форматы

Форматы вроде WebP при сопоставимом визуальном качестве весят заметно меньше привычных JPEG и PNG.

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

3. Разумное сжатие

Качество 100% на фотографии избыточно: разница с 80% на экране почти незаметна, а вес отличается кратно.

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

Для графики с чёткими линиями — логотипы, иконки, схемы — лучше использовать векторный формат: он весит мало и остаётся чётким на любом экране.

4. Отложенная загрузка

Изображения ниже первого экрана загружаются не сразу, а когда посетитель до них доскроллит.

Эффект особенно заметен на длинных страницах и в галереях: браузер не тратит трафик на то, что человек может вообще не увидеть.

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

5. Заданные размеры

Каждому изображению должны быть заданы ширина и высота, чтобы браузер заранее зарезервировал под него место.

Без этого страница «прыгает» при загрузке: текст сдвигается вниз, когда подгружается картинка. Это и раздражает посетителя, и портит метрику стабильности вёрстки.

Что настраивается один раз

На современном сайте всё перечисленное происходит автоматически: изображение загружается в систему управления, а на выходе получает нужные размеры, современный формат, отложенную загрузку и заданные габариты.

Это стандартная часть разработки, а не отдельная услуга. Если её нет — каждое новое изображение будет требовать ручной обработки, а рано или поздно кто-то загрузит файл на 8 МБ прямо с камеры.

Вопрос, который стоит задать подрядчику при приёмке: что произойдёт, если контент-менеджер загрузит фотографию в исходном качестве. Правильный ответ — «система обработает автоматически».

Этот пункт входит в чек-лист приёмки сайта.

Особые случаи

Галереи и портфолио. Ниши, где изображения — основное содержание: фотография, дизайн, недвижимость, ремонт. Здесь оптимизация критична вдвойне, о чём в статьях про сайт фотографа и сайт-портфолио.

Дополнительно: показывайте превью, а полноразмерное изображение подгружайте по клику.

Каталоги товаров. Сотня карточек на странице — сотня изображений. Без отложенной загрузки и правильных размеров такая страница неработоспособна на мобильных.

Фоновые изображения. Часто забывают, что фон тоже загружается. Крупное фоновое изображение на первом экране — типичная причина плохих метрик.

Видео вместо картинки. Тяжёлое фоновое видео на первом экране портит скорость сильнее любых изображений. Если без него никак — короткий сжатый ролик с картинкой-заглушкой и без автозапуска.

Как проверить свой сайт

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

Ориентиры: до 1,5 МБ — хорошо, 1,5–3 МБ — терпимо, больше 3 МБ — есть над чем работать.

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

Итог

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

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

Остальные практики ускорения — в статье как ускорить загрузку сайта.