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

Почему сжатие изображений важно

Цифры говорят сами за себя:

• 53% мобильных пользователей уходят со страницы, которая грузится дольше 3 секунд (Google)
• Каждые 100 мс ускорения загрузки повышают конверсию на 1% (Deloitte)
• Core Web Vitals напрямую влияют на позиции в Google, а LCP (Largest Contentful Paint) почти всегда - изображение
• Средняя веб-страница отдаёт 1,5 MB изображений, и большинство из них не оптимизированы

Чек-лист по сжатию изображений

1. Выберите правильный формат: WebP для веба, JPG для фото, PNG - только если нужна прозрачность и WebP использовать нельзя
2. Сначала измените размер: не отдавайте изображение 4000px в блок шириной 800px. Измените размер изображений до размера показа (или вдвое больше для retina).
3. Сожмите: используйте качество 75-85 для форматов с потерями. Большинство пользователей разницы не заметят.
4. Используйте WebP: конвертируйте в WebP и сразу получите на 25-35% меньше.
5. Отложенная загрузка: добавьте loading="lazy" изображениям ниже первого экрана.
6. Указывайте размеры: всегда добавляйте атрибуты width и height, чтобы избежать сдвигов макета.

Бесплатные инструменты для сжатия изображений

В браузере (без загрузки на сервер)

• Умное сжатие WebP Buddy: автоматически подбирает оптимальное качество. Работает полностью в браузере - ваши изображения не покидают устройство.
• Сжатие WebP: ручная настройка качества для изображений WebP.
• Массовая конвертация: конвертируйте и сжимайте много изображений сразу.

Командная строка

# Convert and compress with cwebp
cwebp -q 80 photo.jpg -o photo.webp

# Compress existing WebP
cwebp -q 75 image.webp -o image-compressed.webp

# Batch convert a folder
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Шпаргалка по настройкам качества

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