15. Оптимизация изображений

Изображения — это часто самый тяжёлый ресурс на странице. Astro решает эту проблему через встроенный компонент <Image />, который автоматически конвертирует, сжимает и добавляет атрибуты width/height — никакого layout shift!

Думай об <Image /> как о личном фотографе-ретушёре: ты даёшь ему исходник, говоришь «сделай поменьше и в WebP», и получаешь идеально оптимизированный результат.

---

Компонент <Image />

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

<!-- Локальное изображение — Astro знает размеры автоматически -->
<Image src={myPhoto} alt="Мой фото" />

<!-- С явными параметрами -->
<Image
  src={myPhoto}
  alt="Мой фото"
  width={800}
  height={600}
  format="webp"
  quality={80}
/>

---

Ключевые пропсы

Проп	Тип	Описание
src	ImageMetadata | string	Источник изображения
alt	string	Обязательный alt-текст
width	number	Ширина в пикселях
height	number	Высота в пикселях
format	'webp' | 'avif' | 'jpeg' | 'png'	Формат вывода
quality	number | 'low' | 'mid' | 'high'	Качество (1–100)
loading	'lazy' | 'eager'	Стратегия загрузки
densities	number[]	Пиксельные плотности для srcset
widths	number[]	Несколько ширин для srcset

---

Компонент <Picture /> для art direction

---
import { Picture } from 'astro:assets';
import hero from '../assets/hero.jpg';
---

<Picture
  src={hero}
  alt="Hero"
  formats={['avif', 'webp']}
  widths={[400, 800, 1200]}
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
/>

<Picture /> генерирует <source> элементы с srcset — браузер выбирает лучший вариант автоматически.

---

Удалённые изображения

astro.config.mjs

export default defineConfig({
  image: {
    domains: ['images.unsplash.com', 'cdn.mysite.com'],
    remotePatterns: [
      { protocol: 'https', hostname: '**.cloudinary.com' }
    ],
  },
});

<Image
  src="https://images.unsplash.com/photo-123"
  alt="Remote image"
  width={800}
  height={600}
/>

---

Фоновые изображения через CSS

Для фоновых изображений используй getImage():

---
import { getImage } from 'astro:assets';
import bg from '../assets/bg.jpg';

const optimizedBg = await getImage({ src: bg, format: 'webp', quality: 60 });
---

<div style={\`background-image: url(\${optimizedBg.src})\`}>
  Контент с оптимизированным фоном
</div>

---

Изображения в Markdown и MDX

В MDX просто используй компонент напрямую. В Markdown Astro автоматически оптимизирует изображения если указана настройка:

astro.config.mjs

export default defineConfig({
  markdown: {
    shikiConfig: { theme: 'dracula' },
  },
  experimental: {
    optimizeHoistedScript: true,
  },
});

---

Интерактивная практика