Зачем сжимать изображения для сайта
Картинки — самая тяжёлая часть большинства страниц: на них приходится 50–70% веса. Фотография с телефона весит 3–8 МБ, и если загрузить её на сайт без обработки, страница будет открываться секунды даже на быстром интернете, а на мобильном — ещё дольше. Это напрямую бьёт по показателю LCP (время отрисовки самого крупного элемента), который Google учитывает в Core Web Vitals, и по поведенческим факторам в Яндексе: посетители уходят, не дождавшись загрузки.
Правильно сжатое изображение весит в 5–10 раз меньше исходного и визуально от него не отличается. Подробно о том, как это влияет на скорость, — в статье оптимизация изображений для сайта.
WebP, JPEG или PNG: какой формат выбрать
WebP — современный формат от Google: при том же качестве он легче JPEG на 25–35% и легче PNG в разы, поддерживает прозрачность и понимается всеми актуальными браузерами. Для сайта это выбор по умолчанию.
JPEG нужен там, где WebP не принимают: старые CMS, почтовые рассылки, некоторые маркетплейсы и соцсети. PNG оставляйте для схем, скриншотов интерфейсов и логотипов с прозрачностью, если WebP по какой-то причине недоступен: для фотографий PNG избыточно тяжёлый.
Какое качество и размер ставить
- Фото в статьях и карточках товаров — WebP, качество 75–85%, ширина не больше ширины блока (обычно 800–1280 px).
- Баннер на всю ширину экрана — WebP, качество 70–80%, ширина 1920 px (2560 px для экранов высокой плотности).
- Превью и миниатюры — качество 60–70%, ширина 300–600 px.
- Иллюстрации с мелким текстом — качество 85–90%, иначе буквы «поплывут».
Главный выигрыш даёт не качество, а уменьшение ширины: фото 4000 px, показанное в блоке 800 px, браузер всё равно скачивает целиком.
Как работает этот инструмент
Сжатие выполняется прямо в вашем браузере: файл декодируется и перекодируется на вашем компьютере, на сервер ничего не отправляется. Поэтому обработка занимает секунды, а приватные изображения никуда не уходят. Можно добавить до 20 файлов JPG, PNG и WebP за раз, менять формат, качество и максимальную ширину — результат пересчитывается сразу, и видно, сколько процентов веса удалось сэкономить по каждому файлу.
Ограничения: анимированные GIF и формат HEIC с iPhone не поддерживаются, а Safari не умеет сохранять WebP — в нём инструмент автоматически сохранит JPEG. После сжатия проверьте, что у картинок на странице заполнены описания, — для этого есть проверка alt-атрибутов изображений.
Как сжимать картинки на всём сайте автоматически
Вручную удобно обработать десяток файлов. На сайте с каталогом или блогом нужен автоматический процесс: конвертация в WebP при загрузке, отдача WebP поддерживающим браузерам и ленивая загрузка изображений ниже первого экрана. Для 1С-Битрикс это закрывают готовые модули — например, сжатие и конвертация изображений в WebP для 1С-Битрикс или модуль TinyPNG для 1С-Битрикс.
Если сайт медленный не только из-за картинок, поможет комплексная оптимизация скорости загрузки сайта: переведём все изображения в WebP, настроим кэш, уберём блокирующие скрипты и доведём показатели PageSpeed до зелёной зоны.
