Уменьшение размера фото для сайта: оптимизация без потерь
Уменьшение веса фото для сайта в 5-10 раз. WebP, AVIF, оптимизация JPG. Скорость загрузки сайта.
Тяжёлые картинки — главная причина медленного сайта. Один JPG на 5 МБ тормозит загрузку, особенно на мобильном. Современные форматы (WebP, AVIF) сжимают то же изображение в 5-10 раз без потери качества.
Конвертация в WebP
WebP от Google — формат, поддерживается всеми современными браузерами. Размер на 25-35% меньше JPG.
Наш /converter → JPG/PNG → WebP → качество 80-85% (визуально неотличимо от оригинала).
AVIF — будущее
AVIF — следующее поколение, на 50% эффективнее WebP. Поддерживается Chrome, Safari, Firefox.
Но не работает в старых браузерах (IE, Opera Mini) — для них нужно держать резерв в JPG.
Оптимизация существующих JPG
Если перейти на WebP сложно — оптимизируйте JPG. Сервисы squoosh.app (Google) и tinypng.com снижают вес на 30-60% без видимой потери.
Squoosh работает офлайн (PWA), не отправляет фото на сервер.
Размер vs разрешение
Уменьшать стоит до тех размеров, в которых картинка отображается. Если на сайте логотип 200×200 — нет смысла грузить 4000×4000.
Для retina-экранов держите версию ×2: если отображается 200×200, оригинал 400×400.
Автоматизация в Next.js
Компонент <Image> в Next.js (наш стек на Zentomax) автоматически конвертирует и кэширует разные размеры под устройства.
Просто кладите оригинал в /public — Next.js сам отдаст оптимизированную версию.
Частые вопросы
Какой формат самый лёгкий?
AVIF, потом WebP, потом JPG. PNG — только для прозрачных изображений (вес выше).
Каково оптимальное качество JPG?
80-85% — визуально неотличимо от 100%. Размер при этом в 2 раза меньше.
Стоит ли использовать прогрессивный JPG?
Да — прогрессивный JPG показывает превью сразу при загрузке, пользователь видит контент быстрее.