Изображения

Большие фотографии — главная причина медленных страниц. Компонент Image из модуля astro:assets при сборке уменьшает картинку, переводит её в лёгкий формат WebP и проставляет размеры, чтобы страница не «прыгала» при загрузке. Для этого картинка должна лежать в src/, а не в public/.

Картинка на странице

Положите фотографию в src/assets/anna.jpg и откройте страницу src/pages/about.astro (если у вас about.md, создайте рядом пробную страницу src/pages/photo.astro):

---
import { Image } from 'astro:assets';
import anna from '../assets/anna.jpg';
---
 
<Image src={anna} alt="Анна за ноутбуком" width={400} />

Картинку импортируют как модуль, и Astro узнаёт её исходный размер. На странице появится фото шириной 400 пикселей. Если открыть код страницы в браузере, вы увидите тег <img> с адресом файла .webp, атрибутами width, height и loading="lazy".

Атрибуты Image

Без атрибута alt сборка остановится с ошибкой: Astro заботится о доступности. Для декоративной картинки пишут alt="".

Картинки с другого сайта

Для картинки по полному адресу Astro не знает размер, поэтому width и height указывают вручную:

<Image src="https://example.com/cover.jpg" alt="Обложка" width={800} height={450} />

Чтобы такие картинки тоже оптимизировались, домен разрешают в astro.config.mjs опцией image: { domains: ['example.com'] }. Иначе Astro выведет картинку как есть.

Обложка статьи

В коллекции картинку можно хранить рядом со статьёй. Схема получает помощник image(), который проверяет путь и превращает его в импорт:

// src/content.config.ts
const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: ({ image }) => z.object({
    title: z.string(),
    cover: image().optional(),
    // остальные поля — как в уроке о коллекциях
  }),
});

Во фронтматтере статьи пишут путь относительно файла: cover: ./first-post.jpg. На странице статьи src/pages/posts/[id].astro обложку выводят так: {post.data.cover && <Image src={post.data.cover} alt="" width={720} />}.

Несколько форматов

Компонент Picture из того же модуля выводит тег <picture> с несколькими вариантами, например formats={['avif', 'webp']}. Браузер сам выберет формат, который понимает.

Частая ошибка

Картинку кладут в public/ и передают в Image строкой /anna.jpg. Файлы из public/ Astro не обрабатывает: размеры неизвестны, и сборка требует width и height, а оптимизации не будет. Картинки для Image храните в src/assets/ и подключайте через import.