Astro: оптимизация изображений (picture, webp/avif, lazy loading)

Оптимизация изображений через <picture> с поддержкой webp/avif, fallback и lazy loading. Используйте для ускорения загрузки страниц.

---
// src/components/OptimizedImage.astro
interface Props {
  src: string;
  alt: string;
  width?: number;
  height?: number;
  loading?: 'lazy' | 'eager';
  class?: string;
}

const { 
  src, 
  alt, 
  width, 
  height, 
  loading = 'lazy',
  class: className = '' 
} = Astro.props;

// Генерируем пути для разных форматов (предполагаем, что они уже созданы)
const avifSrc = src.replace(/\.(jpg|jpeg|png)$/i, '.avif');
const webpSrc = src.replace(/\.(jpg|jpeg|png)$/i, '.webp');
---

<picture class={className}>
  <source srcset={avifSrc} type="image/avif" />
  <source srcset={webpSrc} type="image/webp" />
  <img 
    src={src} 
    alt={alt}
    width={width}
    height={height}
    loading={loading}
    decoding="async"
    fetchpriority={loading === 'eager' ? 'high' : 'auto'}
  />
</picture>

Использование с Astro Image (рекомендуемый способ):

---
import { Image } from 'astro:assets';
import originalImage from '../assets/photo.jpg';
---

<Image 
  src={originalImage}
  alt="Описание"
  width={800}
  height={600}
  loading="lazy"
  formats={['avif', 'webp']}
  quality={80}
/>

Ручная оптимизация с Picture компонентом:

---
// Для статических изображений из public/
const imageBase = '/images/hero';
---

<picture>
  <source 
    srcset={`${imageBase}.avif`} 
    type="image/avif"
  />
  <source 
    srcset={`${imageBase}.webp`} 
    type="image/webp"
  />
  <img 
    src={`${imageBase}.jpg`}
    alt="Hero image"
    width="1200"
    height="600"
    loading="lazy"
    decoding="async"
  />
</picture>

Usage:

Используйте компонент <OptimizedImage> или встроенный <Image> из Astro. Для автоматической генерации webp/avif используйте плагин @astrojs/image или скрипт оптимизации.

Notes:

⚠️ Убедитесь, что файлы .avif и .webp существуют (сгенерируйте через sharp/imagemin). Атрибут decoding="async" улучшает производительность. loading="lazy" не работает для изображений выше fold (используйте eager для hero-изображений).