SSI - Единый стандарт для изображений

Определения

Стандарт SSI определяет требования к форматам, текстовым альтернативам, размерам и загрузке изображений в веб-интерфейсах.

Структура и Семантика

Форматы изображений

SVG

• Для небольших статичных иконок, которые нужно стилизовать вместе с интерфейсом, можно использовать встроенный SVG. В проектах с Tailwind класс shrink-0 предотвращает сжатие иконки во flex- или grid-контейнере. currentColor позволяет наследовать цвет текста:

  <svg
    class="shrink-0"
    fill="none"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    focusable="false"
  >
    <path d="M12 2L..." fill="currentColor" />
  </svg>

• Inline-SVG, дублирующий видимую подпись или служащий украшением интерфейса, скрывать от скринридеров через aria-hidden="true". Самостоятельно значимый SVG снабжать role="img" и доступным именем через <title> и aria-labelledby.

• Содержательные SVG, статичные или загружаемые из админки, отображать через <img> или next/image с понятным alt. Отдельный ресурс позволяет браузеру кэшировать SVG.

• Непроверенный SVG из админки не вставлять в DOM как разметку. Перед inline-встраиванием пропускать файл через доверенную очистку. При использовании SVG как изображения браузеры ограничивают выполнение активного содержимого, но проверка загрузок всё равно необходима.

Растровые изображения

• Подходящий исходник и формат выбираются с учётом целевой среды. Для доставки подходят WebP или AVIF; при ручном выборе предусматривается JPEG/PNG fallback через <picture>, если этого требуют поддерживаемые браузеры.

• Качество сжатия выбирать отдельно для каждого изображения, с учётом результата визуальной проверки и размера файла.

  <picture>
    <source srcset="/images/photo.avif" type="image/avif" />
    <source srcset="/images/photo.webp" type="image/webp" />
    <img
      src="/images/photo.jpg"
      width="1600"
      height="1067"
      alt="Велосипед у стены кирпичного здания"
    />
  </picture>

При использовании Next.js Image Optimization форматы настраиваются в конфигурации Next.js. Компонент next/image выводит адаптивные варианты через srcset; элементы <source> внутри <picture> нужны, если вручную задаются разные файлы или арт-дирекшн.

Текстовая альтернатива

• Содержательные изображения получают краткий alt, который передаёт их смысл в контексте страницы. Общие подписи вроде «Фото» и повторение текста, который уже находится рядом, не подходят.

• Для декоративных изображений задаётся пустой alt — alt="". Атрибут необходимо сохранять: без него скринридер может озвучить имя файла.

• Если изображение является единственным содержимым ссылки или кнопки, его alt должен сообщать назначение ссылки или действие кнопки.

• Кнопке без текста задаётся доступное имя, например с помощью видимой подписи или aria-label; одной SVG-иконки недостаточно для имени элемента управления.

• Важные данные графиков, схем и других сложных изображений также должны быть представлены в доступном текстовом виде.

• <figure> и <figcaption> используются, когда изображению нужна видимая подпись.

  <figure>
    <img
      src="/images/photo.webp"
      width="1200"
      height="800"
      alt="Велосипед у стены кирпичного здания"
    />
    <figcaption>В мастерской принимают велосипеды на ремонт по предварительной записи.</figcaption>
  </figure>

Размеры и адаптивное отображение

Атрибуты width и height задают исходные размеры изображения. Браузер использует их соотношение сторон, чтобы заранее зарезервировать место и уменьшить смещение макета (Cumulative Layout Shift, CLS). Фактический размер отображения задаётся CSS.

Для заполнения блока с обрезкой подходит object-cover. При fill контейнеру задаются позиционирование и размеры, например position: relative и aspect-ratio; кадрирование не должно скрывать важные детали.

Значение sizes должно соответствовать ширине изображения в макете. Оно помогает браузеру выбрать подходящий ресурс из srcset; само по себе sizes не создаёт набор вариантов. В обычном HTML sizes указывать вместе с srcset:

<img
  src="/images/photo-960.webp"
  srcset="
    /images/photo-480.webp 480w,
    /images/photo-960.webp 960w,
    /images/photo-1600.webp 1600w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1600"
  height="1067"
  alt="Велосипед у стены кирпичного здания"
  loading="lazy"
/>

В next/image responsive-стили также требуют корректного sizes. При fill оно обязательно, а родительский элемент должен задавать область изображения:

<div className="relative aspect-[3/2]">
  <Image
    src="/images/photo.webp"
    alt="Велосипед у стены кирпичного здания"
    fill
    sizes="(max-width: 768px) 100vw, 50vw"
    className="object-cover"
  />
</div>

Доступность и Производительность

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

• Разрешение изображения должно соответствовать наибольшему фактическому размеру отображения и плотности пикселей целевых устройств. Загрузка значительно большего исходника без необходимости нежелательна.
• Размер файла и качество сжатия определяются для каждого изображения отдельно. Универсального лимита в 500 КБ или качества WebP 90% нет: фотография, прозрачная иконка и большой hero-баннер требуют разных настроек.
• TinyPNG и аналогичные сервисы подходят для оптимизации; после сжатия необходимо проверять визуальное качество и фактический размер файла.
• Для изображений из внешнего хранилища или CDN требуется подходящее кэширование. Форматы, размеры и cache headers также настраиваются отдельно.

Загрузка изображений

• Изображения за пределами начальной области просмотра можно загружать лениво через loading="lazy".
• Загрузка изображения, которое является крупнейшим элементом содержимого (Largest Contentful Paint, LCP) или сразу видно пользователю, не должна откладываться. Для одного подтверждённого критичного изображения подходит loading="eager"; fetchPriority="high" используется при наличии подтверждения измерениями.
• Высокий приоритет следует ограничивать небольшим числом изображений, чтобы они не конкурировали за сетевые ресурсы без необходимости.
• Нативный <img> загружается eager по умолчанию. loading="lazy" нужно указать явно; браузер начинает такую загрузку, когда изображение приближается к области просмотра.
• next/image по умолчанию использует ленивую загрузку для изображений, если она не переопределена. Для критичных изображений важна проверка итоговой разметки и настроек компонента.

Организация файлов

Статичные файлы можно группировать по назначению. Изображения, которыми управляют через CMS, обычно остаются в CMS или подключённом хранилище.

public/
  ├─ icons/                 # Статичные SVG-файлы для <img>
  └─ images/                # Статичные растровые изображения

src/
  └─ shared/
    └─ icons/               # Переиспользуемые SVG-компоненты

Проверка

Проверка изображений в Lighthouse и браузерных DevTools включает:

• у содержательных изображений есть точный alt, а декоративные имеют alt="";
• width и height либо заданное соотношение сторон резервируют место до загрузки;
• адаптивные изображения получают подходящий вариант из srcset, а sizes отражает реальный макет;
• только необходимые изображения загружаются с высоким приоритетом, а нижележащие изображения не мешают загрузке начального экрана;
• кадрирование, качество, кэширование и CLS проверены на типичных размерах экрана.

Итоговые примеры

Содержательное изображение с зарезервированным соотношением сторон:

<img
  src="/images/photo.webp"
  width="1200"
  height="800"
  alt="Велосипед у стены кирпичного здания"
  loading="lazy"
/>

Содержательный SVG как отдельный ресурс:

<img src="/icons/user.svg" width="24" height="24" alt="Профиль пользователя" />

Адаптивное изображение с вариантами источника:

<img
  src="/images/photo-960.webp"
  srcset="/images/photo-480.webp 480w, /images/photo-960.webp 960w, /images/photo-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1600"
  height="1067"
  alt="Велосипед у стены кирпичного здания"
  loading="lazy"
/>

Критичное изображение в начальной области просмотра:

<Image
  src="/images/hero.webp"
  width={1600}
  height={900}
  alt="Велосипедная мастерская с рабочим местом у окна"
  loading="eager"
  fetchPriority="high"
  sizes="(max-width: 768px) 100vw, 50vw"
/>