Сжать фото для сайта

Изображения больше нужного: отчёт показывает размер показа; уменьшите картинку примерно до двойной ширины для экранов высокой плотности — и не больше. Современные форматы: WebP обычно намного меньше JPG при сравнимом качестве. Кодирование: лимит заставляет компрессор подобрать самое высокое качество, которое в него укладывается.

Это решает вопрос с самими файлами. Ленивая загрузка, атрибуты width и height, предзагрузка главного изображения и адаптивный srcset настраиваются в коде сайта или CMS — инструмент для загрузки файлов может исправить именно файлы.

Отчёт PageSpeed называет элемент Largest Contentful Paint. Если это изображение, этот один файл важнее всех остальных: главное фото на 2 МБ может задержать LCP на секунды на мобильных. Сожмите его первым, перепроверьте, а потом переходите к мелким картинкам.

Мобильная проверка использует замедленное соединение, поэтому экономия, незаметная на компьютере, там очень важна. Главное изображение около 150–250 КБ в WebP — реалистичная цель для большинства сайтов.

На WordPress используйте сжатие фото для WordPress с размером под колонку контента, для интернет-магазина на Shopify — сжатие фото для Shopify. На Тильде, 1С-Битрикс и других конструкторах принцип тот же: загружайте изображение в том размере, в каком оно показывается, а не исходник камеры. Целые папки JPG удобно перевести через JPG в WEBP. Чтобы подогнать картинки под ширину блоков, есть размер изображений для сайта.

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

Атрибуты width и height резервируют место до загрузки изображения и предотвращают сдвиг макета. Адаптивный srcset позволяет телефонам скачивать уменьшенные версии. CMS может делать и то и другое сама — эта страница даёт ей более лёгкие исходники.

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