Как сжать изображения для сайта

По данным Web Almanac 2025 от HTTP Archive, медианная главная страница на мобильных устройствах весила 2,56 MB, из них 911 KB приходилось на изображения. На компьютерах медианная страница содержала 1058 KB изображений. Именно изображений посетители и ждут: самый крупный элемент на экране при загрузке страницы, Largest Contentful Paint (LCP), оказывался изображением на 76% мобильных страниц.

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

Сжатие не спасёт изображение, которое гораздо больше отведённого ему места. Снимок с камеры шириной 4000 пикселей, показанный в колонке шириной 800 пикселей, содержит в 25 раз больше пикселей, чем может использовать страница. Как отмечает web.dev, если отправлять на телефоны изображения в размере для компьютеров, данных может уходить в 2–4 раза больше, чем нужно.

• Баннеры во всю ширину: для большинства макетов достаточно ширины около 1600–2000 пикселей.
• Изображения в колонке статьи: примерно вдвое шире колонки, чтобы они оставались чёткими на экранах с высокой плотностью пикселей (например, 1400 пикселей для колонки в 700 пикселей).
• Миниатюры и аватары: вдвое больше отображаемого размера, часто 200–400 пикселей.

От формата зависит, насколько эффективно можно сохранить изображение. Коротко: для фотографий подходят JPG или WebP; для логотипов, скриншотов и всего, где есть прозрачность, — PNG или WebP. В нашем сравнении JPG, PNG и WebP объясняется, когда какой формат выигрывает.

Около 97% используемых браузеров отображают WebP, и файлы в нём часто заметно меньше. Чтобы попробовать, конвертируйте изображение с помощью JPG в WebP или PNG в WebP и сравните результат с оригиналом: конвертированный файл не всегда меньше, особенно у простой графики.

Сжатие удаляет данные, отсутствие которых глаз вряд ли заметит. В сервисе сжатия изображений Bitinz можно перетащить сразу пачку файлов JPG, PNG или WebP и выбрать один из трёх уровней:

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

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

Даже хорошо сжатое изображение может замедлить страницу, если загружается не вовремя или не в том размере. Основную работу делают несколько HTML-атрибутов:

• Указывайте width и height у каждого изображения, чтобы браузер заранее зарезервировал место и макет не прыгал во время загрузки.
• Добавляйте loading="lazy" к изображениям ниже по странице, чтобы они загружались, только когда посетитель при прокрутке приблизится к ним.
• Никогда не используйте ленивую загрузку для главного изображения вверху страницы. Вместо этого web.dev рекомендует указать для него fetchpriority="high", причём не более чем для одного-двух изображений.
• Используйте srcset и sizes, чтобы предложить одно и то же изображение в нескольких вариантах ширины: так телефоны скачают файл меньше, чем большие экраны.
• Отдавайте изображения с долгим сроком кеширования, через CDN, если он у вас есть, чтобы вернувшимся посетителям не приходилось скачивать их снова.

Проверьте страницу в PageSpeed Insights или на панели Lighthouse в Chrome. Начиная с Lighthouse 13 проверки изображений собраны в один пункт — «Improve image delivery». В нём перечислены изображения, которые можно сжать сильнее, отдавать в современном формате или уменьшить. Изображения, которые сэкономили бы меньше 4 KiB, в список не попадают, так что короткий список — хороший знак.

Затем посмотрите страницу сами на телефоне. Проблемы сжатия первыми проявляются на резких краях, тексте внутри изображений и оттенках кожи.

Если на сайте каждый день появляются новые изображения, например через систему управления контентом или интернет-магазин, сжимайте их при загрузке или публикации, а не вручную. API для разработчиков Bitinz принимает изображение по HTTP и возвращает ссылку на сжатый файл, поэтому его можно вызывать из скрипта или конвейера сборки. У каждого аккаунта есть бесплатная месячная квота.

1. 01Уменьшите каждое изображение до размера примерно вдвое больше того, в котором оно показывается.
2. 02Используйте JPG или WebP для фотографий, а PNG или WebP — для графики и прозрачности.
3. 03Сжимайте на уровне «Баланс», а для самых крупных изображений попробуйте «Максимум».
4. 04Сравните результат с оригиналом, прежде чем заменять его.
5. 05Указывайте ширину и высоту, включайте ленивую загрузку для изображений ниже первого экрана и никогда — для главного изображения.
6. 06Снова проверьте страницу в PageSpeed Insights.

Загружаете изображения не только на свой сайт? У каждой платформы свои правила: см. требования к размеру изображений для почты и интернет-магазинов.