Главные шаги оптимизации
Выбрать формат
AVIF для фото, WEBP для скриншотов, SVG для логотипов, WEBP/MP4 для анимаций.
Правильное разрешение
Размер отображения × 2 для retina. Не больше, не меньше. Используйте srcset.
Сжать качественно
JPG: 80–85, WEBP: 75–80, AVIF: 50–60. Дальше — лишний вес без выигрыша.
Lazy-loading
loading="lazy" на всех картинках, кроме главного героя. Plus width/height для CLS.
Какой формат выбрать
| Контент | Лучший формат | Фолбэк |
|---|---|---|
| Фотография | AVIF | WEBP / JPG |
| Скриншот, графика | WEBP lossless | PNG |
| Логотип, иконка | SVG | PNG |
| Анимация | WEBP / MP4 | GIF (только если совсем нужно) |
Влияние на Core Web Vitals и SEO
LCP — Largest Contentful Paint
Время до отображения главной картинки. Цель <2.5 с. Самое важное для SEO.
CLS — Cumulative Layout Shift
Насколько «прыгает» макет при загрузке. Цель <0.1. Width/height фиксят это.
INP — Interaction to Next Paint
Отзывчивость. Тяжёлые картинки блокируют main-thread и портят INP.
Используйте тег <picture>
Тег <picture> — стандартный способ давать AVIF новым браузерам и WEBP/JPG старым:
<picture>
<source srcset="/photo.avif" type="image/avif" />
<source srcset="/photo.webp" type="image/webp" />
<img src="/photo.jpg" alt="Описание"
width="800" height="600" loading="lazy" />
</picture>Браузер выбирает первый поддерживаемый формат. Chrome/Firefox с AVIF возьмут AVIF (минимальный вес), Safari старее 16.4 — WEBP, доисторический IE — JPG.
Srcset для разных устройств
<img
src="/photo-800.jpg"
srcset="/photo-400.jpg 400w,
/photo-800.jpg 800w,
/photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Описание"
width="800"
height="600"
loading="lazy"
/>Браузер сам выберет нужный размер под размер экрана и плотность пикселей. Для retina iPhone возьмёт 1600w, для бюджетного Android — 400w.
Важно: lazy-loading и LCP
Не ставьте loading="lazy" на главную картинку «героя» (LCP-элемент). Она должна загружаться сразу, иначе LCP-метрика рухнет и Google понизит позицию в выдаче. Также всегда указывайтеwidth иheight — без них макет «прыгает» при загрузке (плохой CLS).
Инструменты для оптимизации
Онлайн
- · TinyPNG, Squoosh
- · Наш «Сжать изображения»
- · iLoveIMG
Локально
- · ImageMagick
- · Sharp (Node.js)
- · pngquant, mozjpeg, libvips
GUI
- · ImageOptim (macOS)
- · FileOptimizer (Windows)
Автоматизация
- · Vercel Image Optimization
- · Cloudflare Images, Imgix
- · Next.js <Image>
Часто задаваемые вопросы
Какой формат лучший для сайта в 2025?+
AVIF + WEBP с фолбэком на JPG через тег <picture>. AVIF даёт минимальный размер, WEBP — приемлемый размер и широкая поддержка, JPG — универсальный фолбэк для редких старых браузеров.
Какое разрешение брать для веба?+
Соответствующее размеру отображения × 2 (для retina). Если картинка показывается 600 px шириной — берите 1200 px. Делать больше — пустая трата трафика.
Что такое Core Web Vitals и причём здесь изображения?+
Три метрики Google: LCP (когда видна основная картинка), CLS (сдвиг макета), INP (отзывчивость). Большие неоптимизированные изображения рушат LCP, а отсутствие width/height даёт плохой CLS.
Помогает ли lazy-loading SEO?+
Да, через ускорение LCP. Главное правило: lazy-loading на «герое» главной страницы — НЕ ставить (его браузер должен загрузить сразу). На всех остальных — ставить через атрибут loading="lazy".
Стоит ли использовать CDN для изображений?+
Для серьёзного сайта — да. CDN (Cloudflare Images, Imgix, BunnyCDN) автоматически делает оптимизацию: ресайз, выбор формата, кеширование.
Связанные статьи
Сжать изображения для сайта
Бесплатно, без регистрации. PNG, JPG, WEBP — все форматы поддерживаются.
Открыть «Сжать»