Иллюстрации и статические ресурсы

Добавим собственную иллюстрацию полки и разберём её участие в статическом проекте. Картинка должна иметь понятные размеры и соответствующее назначению описание. Урок не посвящён подключению большого внешнего медиасервиса: используем маленький локальный SVG, который можно читать вместе с исходниками.

Файл src/assets/shelf.svg содержит три условные книги на общей линии полки. Он создан для примера, а не скачан с чужого сайта. Атрибуты width, height и viewBox определяют отношение сторон. Такие данные помогают зарезервировать место и объяснить, почему иллюстрация не должна неожиданно сдвигать соседний текст после получения ресурса.

Размеры изображения до его загрузки

Компонент ShelfImage.astro импортирует ресурс и использует Image из astro:assets. Импортированный локальный asset имеет известные метаданные. Для SVG не обещаем такое же преобразование в растровые варианты, как для фотографии. Механизм обработки зависит от типа файла и выбранного сервиса. Здесь важны правильное включение, размеры и подпись.

alt описывает смысл изображения: три учебных материала на общей полке. Он не повторяет точное перечисление всех геометрических координат SVG и не заменяет figcaption. Подпись видима всем посетителям, альтернативный текст сопровождает сам ресурс. Если иллюстрация станет полностью декоративной, допустим другой договор с пустым alt, но это нужно выбрать по роли в странице.

Размеры в компоненте соответствуют исходному соотношению сторон. При адаптивном CSS изображение может занимать меньшую ширину, сохраняя пропорции. Не задавайте независимую высоту только ради того, чтобы картинка поместилась в нужный прямоугольник: это может исказить содержание. Для фотографий с обрезкой следует отдельно описать object-fit и значимую область.

Загрузка помечена lazy, поскольку в этом учебном вводном блоке изображение не является обязательным первым содержимым. Для настоящего hero-изображения такое решение может быть неправильным: откладывание важного первого ресурса способно ухудшить его появление. Нельзя назначать lazy всем картинкам как универсальное правило ускорения сайта. Положение и роль ресурса определяют выбор.

Папка public демонстрирует другой путь: файл из неё копируется без такого импорта и обработки. Это удобно для архивов, текстовых документов и ресурсов с договорённым именем. Но сам факт размещения в public не оптимизирует большой файл. Если положить туда тяжёлую фотографию, посетитель получит её исходный объём, пока отдельный процесс не подготовит варианты.

Ожидаемая главная страница содержит иллюстрацию с подписью и последующий текст. Пример не собран, поэтому итоговый размер ресурса и время загрузки не измерены. Для будущего просмотра рассмотрите страницу с задержкой изображения: зарезервированное место должно оставаться понятным. Затем отключите ресурс и убедитесь, что название библиотеки и ссылка каталога всё ещё объясняют задачу.

Крупная библиотека должна связывать ресурсы со статьями через устойчивые правила, а не через случайные относительные пути после переноса файлов. Этот этап показывает ограниченный локальный компонент. Следующее улучшение добавит независимый интерактивный элемент, сохранив основной текст и иллюстрацию обычными статическими частями страницы.

Полный файл src/components/ShelfImage.astro текущего этапа:

---
import { Image } from 'astro:assets';
import shelf from '../assets/shelf.svg';
---
<figure><Image src={shelf} alt="Три учебных материала на общей полке" width={640} height={240} loading="lazy" /><figcaption>Иллюстрация общей библиотеки.</figcaption></figure>

Полный файл src/assets/shelf.svg текущего этапа:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 240" width="640" height="240"><rect width="640" height="240" fill="#f0edf7"/><path d="M60 180h520" stroke="#56378a" stroke-width="12"/><rect x="90" y="50" width="90" height="124" rx="8" fill="#6d28d9"/><rect x="205" y="74" width="80" height="100" rx="8" fill="#247347"/><rect x="310" y="35" width="100" height="139" rx="8" fill="#8964bd"/></svg>

Разбор состояния библиотеки

Размеры ресурса важны не только для загрузки. Они также выражают договор компонента: иллюстрация имеет определённое отношение сторон и не должна произвольно растягиваться вслед за высотой соседнего текста. Если изображение становится фоном с обрезкой, это другой способ подачи, где альтернативное содержание нужно продумать отдельно. Текущий figure сохраняет самостоятельную подпись и обычный ресурс внутри потока.

Для главной страницы полезно различать декоративную картинку и изображение, по которому человек получает данные. В нашем SVG три книги иллюстрируют модель общей библиотеки; точные цвета прямоугольников не являются учебным ответом. Поэтому alt передаёт идею, а не длинный графический протокол. Если изображение покажет диаграмму структуры коллекции, потребуется более подробный текстовый разбор рядом с ним.

Локальный импорт и ресурс public имеют разные договоры имён. После обработки импортированный asset может получить итоговый адрес, выбранный сборщиком. Для скачиваемого архива часто важен заранее известный путь, поэтому public подходит лучше. Не используйте относительный путь из исходной папки Markdown как предположение о конечном URL. Сборщик может разместить ресурс иначе, а перенос статьи изменит глубину её адреса.

Для самостоятельного варианта уменьшите видимую ширину картинки на мобильной странице, сохранив отношение сторон. Затем рассмотрите длинную figcaption. Подпись должна переноситься как обычный текст, не выходя за ширину ресурса или контейнера. Не помещайте её поверх изображения лишь ради компактности, если такой дизайн делает чтение зависимым от случайного цвета подложки.

В случае фотографии потребуется рассмотреть формат, размер и варианты разрешения. Нельзя взять пример маленького SVG и из него вывести универсальную инструкцию для многомегабайтного JPEG. Astro предоставляет механизмы изображения, но выбор исходных данных всё ещё влияет на выпуск. Набор примера не содержит сторонних фотографий, поэтому результаты их сжатия и качества здесь не измерены.

Права на ресурс также относятся к редакционному договору. Собственный SVG удобен тем, что его происхождение ясно и код входит в архив. Для чужой иллюстрации нужно сохранить разрешение использования и атрибуцию, если она требуется. Технически успешный импорт не делает ресурс разрешённым для публикации. В серии подготовка ресурса и его возможный выпуск рассматриваются отдельно от самой компиляции страницы.

SVG в примере не содержит внешних ссылок, сценариев или чужих шрифтов. Он показывает простые собственные геометрические элементы. Если ресурс получен от внешнего автора, его формат не следует считать безусловно безопасным только по расширению. Для редакционной системы понадобится отдельная политика приёма и обработки файлов. Здесь происхождение ограничено собственным исходником, поэтому урок может сосредоточиться на размерах и роли иллюстрации.

Условия для самостоятельного наблюдения

Это план будущего разбора, а не журнал выполненных проверок. Рассмотрите одинаковые исходные данные и сопоставьте действие с ожидаемым состоянием.

Условие	Ожидаемое состояние и его граница
Локальный SVG	Он имеет известные размеры и собственный исходник, который входит в архив этапа.
Ресурс задержался	Разметка должна резервировать согласованное отношение сторон, не ожидая получения пикселей.
Картинка отсутствует	Текст страницы и ссылка каталога сохраняют самостоятельный смысл.
Картинка декоративная	Роль alt нужно пересмотреть по назначению, не копируя описание механически.
Файл лежит в public	Он копируется без обещания автоматического уменьшения или конвертации.
Изображение стало hero	Решение lazy следует пересмотреть по реальной роли первого содержимого.

Оглавление серии, курсы ProfessorWeb и полный архив исходников. Для этого урока выберите lesson-08.

Первичные источники: Images.

Редакционный статус: локальный черновик. Установка, учебные программы, браузерные сценарии, тесты и публикация не выполнялись. Описанные эффекты ожидаемые.