Picture элемент и множественные источники

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 32
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этой серии заданий вы познакомитесь с мощным инструментом адаптивного дизайна — элементом `<picture>`. Он позволяет веб-разработчикам предоставлять браузеру несколько вариантов изображений, из которых тот выберет наиболее подходящее. Это помогает оптимизировать сайт для разных устройств, будь то смартфон с маленьким экраном или большой настольный монитор. Вы научитесь управлять выбором изображения в зависимости от размера экрана, его плотности пикселей и поддержки современных форматов, таких как WebP. Пройдя эти упражнения, вы сможете делать сайты быстрее и удобнее для пользователей на любых устройствах.
Список тем

Базовая структура элемента <picture>

id: 37816_picture-base-structure-1

Для начала создадим самую простую конструкцию. У вас есть стандартный тег `<img>`. Ваша задача — обернуть его в тег, который позволяет добавлять альтернативные источники изображений. Этот тег работает как контейнер.

CSS
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<input1>
  <img src="https://naytikurs.ru/img/1.png" alt="Изображение по умолчанию">
<input2>
Используйте парный тег `<picture>` для обертывания тега `<img>`. Тег `<img>` в этой конструкции является обязательным и служит для отображения изображения по умолчанию, а также для браузеров, которые не поддерживают `<picture>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление первого источника <source>

id: 37816_picture-add-source-2

Теперь добавим альтернативный источник изображения. Внутри `<picture>` разместите специальный тег, который указывает на другой файл изображения и задает условие, при котором его нужно показать. В данном случае, изображение должно меняться на экранах шириной до 370px.

CSS
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<picture>
  <input1 input2="(max-width: 370px)" input3="https://naytikurs.ru/img/2.png">
  <img src="https://naytikurs.ru/img/1.png" alt="Адаптивное изображение">
</picture>
Используйте тег `<source>`. У него должны быть два ключевых атрибута: `srcset` для указания пути к альтернативному изображению и `media` для задания условия (медиа-запроса). Например, `media="(max-width: 370px)"` означает 'для экранов с максимальной шириной 370 пикселей'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Условие для минимальной ширины

id: 37816_picture-min-width-3

В прошлом задании мы использовали `max-width`. Теперь сделаем наоборот. Задайте условие, чтобы специальное изображение `https://naytikurs.ru/img/4.png` отображалось на экранах, ширина которых *больше или равна* 350px.

CSS
body { background: #f0f0f0; }
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #ccc;
  border-radius: 8px;
}
HTML
<picture>
  <source media="input1" srcset="https://naytikurs.ru/img/4.png">
  <img src="https://naytikurs.ru/img/5.png" alt="Изображение для разных экранов">
</picture>
Для задания условия минимальной ширины используется медиа-выражение `min-width`. Правильный синтаксис будет выглядеть так: `(min-width: 350px)`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Поддержка современных форматов (WebP)

id: 37816_picture-webp-support-4

Элемент `<picture>` отлично подходит для отдачи современных форматов изображений, таких как WebP, браузерам, которые их поддерживают. Добавьте источник, который будет предлагать браузеру изображение в формате WebP. Если браузер не поддерживает этот формат, он проигнорирует этот источник.

CSS
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<picture>
  <source srcset="https://naytikurs.ru/img/6.png" input1="input2/webp">
  <img src="https://naytikurs.ru/img/7.png" alt="Изображение с поддержкой WebP">
</picture>
Чтобы указать формат изображения, используется атрибут `type`. Для формата WebP значение этого атрибута должно быть `image/webp`. Браузер сначала проверит, поддерживает ли он `image/webp`, и только потом загрузит изображение из `srcset`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Несколько альтернативных источников

id: 37816_picture-multiple-sources-5

Сила `<picture>` в возможности задавать несколько условий. Создайте конструкцию с двумя разными источниками: один для экранов до 300px, второй — для экранов от 301px до 360px. Если ни одно из условий не сработает, покажется изображение по умолчанию.

CSS
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<picture>
  <!-- Для самых маленьких экранов -->
  <input1 media="(max-width: 300px)" srcset="https://naytikurs.ru/img/8.png">
  
  <!-- Для средних экранов -->
  <source input2="(min-width: 301px) and (max-width: 360px)" srcset="https://naytikurs.ru/img/9.png">
  
  <!-- По умолчанию -->
  <img src="https://naytikurs.ru/img/1.png" alt="Изображение с несколькими источниками">
</picture>
Просто добавьте несколько тегов `<source>` один за другим. Браузер проверит их по порядку и использует первый, чье условие `media` будет истинным. Порядок имеет значение!
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Роль обязательного тега <img>

id: 37816_picture-required-img-6

Конструкция `<picture>` не будет работать без одного важного элемента, который служит резервным вариантом и содержит описание изображения. Допишите недостающий обязательный тег с атрибутами источника и альтернативного текста.

CSS
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<picture>
  <source media="(max-width: 370px)" srcset="https://naytikurs.ru/img/2.png">
  
  <input1 input2="https://naytikurs.ru/img/1.png" input3="Резервное изображение для всех">
</picture>
Внутри `<picture>` всегда должен быть тег `<img>`. Он используется, если ни один из `<source>` не подошел, или если браузер не поддерживает `<picture>`. У него должны быть обязательные атрибуты `src` (путь к файлу) и `alt` (альтернативный текст).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комплексный пример: формат и размер

id: 37816_picture-complex-example-7

Соберем все вместе! Создайте сложную конструкцию: для экранов шире 350px предложите современный формат WebP. Если он не поддерживается, то для этих же экранов отдайте обычный PNG. А для всех экранов меньше 350px используйте другое, маленькое изображение.

CSS
img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #eee;
  border-radius: 8px;
}
HTML
<picture>
  <!-- WebP для больших экранов -->
  <source media="(min-width: 351px)" input1="image/webp" input2="https://naytikurs.ru/img/4.png">
  
  <!-- PNG для больших экранов (если WebP не поддерживается) -->
  <source input3="(min-width: 351px)" srcset="https://naytikurs.ru/img/5.png">

  <!-- Изображение для маленьких экранов -->
  <source media="(max-width: 350px)" srcset="https://naytikurs.ru/img/6.png">
  
  <!-- Резервное изображение -->
  <img src="https://naytikurs.ru/img/1.png" alt="Комплексный пример">
</picture>
Порядок тегов `<source>` критически важен. Сначала укажите наиболее специфичные условия. В данном случае: 1) `source` с `media` для больших экранов и `type` для webp. 2) `source` с `media` для больших экранов (без `type`). 3) `source` для маленьких экранов. 4) Замыкающий `<img>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру