Оптимизация изображений для Core Web Vitals

# Как оптимизация изображений влияет на Core Web Vitals Core Web Vitals от Google — это три метрики, которые напрямую влияют на ваши позиции в поиске. А изображения? Они влияют на все три. ## LCP (Largest Contentful Paint) **Цель: < 2,5 с** Ваше главное изображение обычно является элементом LCP. Для оптимизации: 1. **Предзагрузите** изображение LCP: `` 2. **Используйте WebP** — на 30% меньше = на 30% быстрее загрузка 3. **Адаптивные изображения** — не отдавайте изображение 2000px на мобильный 4. **Приоритетная подсказка** — `fetchpriority="high"` на главных изображениях ## INP (Interaction to Next Paint) **Цель: < 200 мс** Тяжелая обработка изображений в главном потоке блокирует взаимодействия: 1. **Ленивая загрузка** изображений ниже сгиба 2. **Асинхронное декодирование** — `decoding="async"` 3. **Используйте наши браузерные инструменты** — обработка происходит вне главного потока через Web Workers ## CLS (Cumulative Layout Shift) **Цель: < 0,1** Изображения без размеров вызывают сдвиги макета: 1. **Всегда указывайте ширину/высоту** — в HTML или CSS 2. **Используйте блоки с соотношением сторон** — резервируйте место до загрузки изображения 3. **Избегайте вставки контента** — не загружайте изображения над существующим контентом ## Влияние в реальном мире До оптимизации: - LCP: 4,2 с ❌ - CLS: 0,25 ❌ - INP: 380 мс ❌ После оптимизации изображений: - LCP: 1,8 с ✅ - CLS: 0,02 ✅ - INP: 120 мс ✅ ## Преимущество AmberPic Наши инструменты помогают: - Сжимать изображения перед загрузкой (меньший LCP) - Конвертировать в современные форматы (быстрее декодирование) - Массово изменять размер для адаптивных точек останова (правильные размеры) --- *Оптимизируйте свои изображения, прежде чем они попадут в CDN — [попробуйте AmberPic](/ru/compress/).*