HTML Academy · Урок

Элемент picture для арт-дирекшена

Заменяйте изображения целиком в зависимости от условий области просмотра

«Элемент picture для арт-дирекшена» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Проблема арт-дирекшна

Арт-дирекшн означает использование принципиально разного crop или композиции изображения в зависимости от размера экрана:

Полноформатная альбомная фотография на компьютере
Увеличенный портретный crop на мобильном устройстве
Эту задачу нельзя решить только с помощью srcset + sizes

Элемент picture

Элемент <picture> объединяет несколько элементов <source> и резервный вариант <img>:

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

Как работает picture

Браузер проверяет элементы <source> по порядку, сверху вниз:

Проверяет условие media первого элемента source — если оно выполняется, используется это изображение
Проверяет второй элемент source — если условие выполняется, используется это изображение
Если ни один вариант не подошёл, используется <img> по умолчанию

Элемент <img> по-прежнему отображает выбранное изображение и содержит текст alt.

Переключение форматов with picture

<picture> также может выбирать форматы изображений с учётом поддержки браузером:

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

Объединение арт-дирекшна и выбора формата

Можно объединить условия media и выбор формата:

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

Элемент img обязателен

Элемент <img> внутри <picture> не является необязательным:

Он отображает выбранное изображение
Он содержит текст alt для обеспечения доступности
Он содержит атрибуты width, height, loading и другие атрибуты
Без него ничего не отображается

Атрибут media элемента source

Атрибут media принимает стандартные медиазапросы CSS:

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

srcset элемента source для адаптивного выбора

Объедините арт-дирекшн with srcset для полного контроля:

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

Изображения для тёмного режима

Показывайте пользователям тёмного режима другие изображения:

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

picture и CSS background-image

Когда использовать <picture>, а когда — фон CSS:

Содержимое страницы — используйте <picture>: нужен текст alt, изображение является частью содержимого документа
Декоративные изображения — используйте CSS background-image с медиазапросами
Изображения, важные для SEO — всегда используйте <picture>: поисковые роботы индексируют img elements

Примечание о доступности

Атрибут alt всегда указывается у <img>, а не у <source>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

Ленивая загрузка with picture

Добавьте ленивую загрузку в элемент <img> внутри <picture>:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

Быстрая проверка

Какой элемент в блоке picture должен присутствовать всегда и содержит атрибут alt?

Повторение: элемент picture

Арт-дирекшн with picture:

<picture> объединяет элементы <source> и <img>
Браузер выбирает первый подходящий элемент <source>
Используйте media для условий области просмотра, а type — для выбора формата
<img> обязателен — он отображает изображение и содержит текст alt
Объединяйте его with srcset + sizes для полного адаптивного контроля

Часто задаваемые вопросы

Урок «Элемент picture для арт-дирекшена» бесплатный?

Да — полный текст урока «Элемент picture для арт-дирекшена» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Элемент picture для арт-дирекшена»?

Заменяйте изображения целиком в зависимости от условий области просмотра Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Элемент picture для арт-дирекшена»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy