Элемент изображения

В предыдущем модуле было продемонстрировано, как атрибут srcset позволяет указывать версии одного и того же изображения разных размеров. Браузер затем может определить, какая версия подходит для использования. Если вы хотите полностью изменить изображение, вам понадобится элемент picture .

Подобно тому, как атрибут srcset основывается на атрибуте src , элемент picture основывается на элементе img . Элемент picture является оберткой для элемента img .

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

Если внутри элемента picture нет вложенного элемента img , то элемент picture работать не будет.

Подобно атрибуту srcset , элемент picture будет обновлять значение атрибута src в элементе img . Разница заключается в том, что если атрибут srcset дает браузеру подсказки, то элемент picture дает команды. Это дает вам контроль.

source

Внутри элемента picture можно указать несколько элементов source , каждый из которых имеет свой собственный атрибут srcset . Затем браузер выполнит первый доступный ему элемент.

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

В этом примере представлены три разных изображения в трёх разных форматах:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image."
    width="300" height="200">
</picture>

Первый элемент source указывает на изображение в новом формате AVIF . Если браузер способен отображать изображения AVIF, он выбирает именно этот файл изображения. В противном случае он переходит к следующему элементу source .

Второй элемент source указывает на изображение в формате WebP . Если браузер способен отображать изображения WebP, он будет использовать именно этот файл изображения.

В противном случае браузер будет использовать файл изображения, указанный в атрибуте src элемента img . Это изображение в формате JPEG.

Это означает, что вы можете начать использовать новые форматы изображений, не жертвуя при этом обратной совместимостью.

В этом примере атрибут type указывал браузеру, какой именно формат изображения был задан.

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

Помимо переключения между форматами изображений, вы можете переключаться между их размерами. Используйте атрибут media , чтобы указать браузеру ширину отображаемого изображения. Поместите медиа-запрос внутрь атрибута media .

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image."
    width="300" height="200">
</picture>

Здесь вы указываете браузеру, что если ширина области просмотра превышает 75em , он должен использовать большое изображение. При ширине от 40em до 75em браузер должен использовать среднее изображение. При ширине менее 40em браузер должен использовать маленькое изображение.

Это отличается от использования атрибутов srcset и sizes для элемента img . В том случае вы предлагаете браузеру варианты. Элемент source больше похож на команду, чем на предложение.

Вы также можете использовать дескриптор плотности пикселей внутри атрибута srcset элемента source .

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

В этом примере вы по-прежнему указываете браузеру, что делать на разных контрольных точках, но теперь у браузера есть возможность выбрать наиболее подходящее изображение в зависимости от плотности пикселей устройства.

Посев

Если вам нужно отображать только версии одного и того же изображения разного размера, srcset — ваш лучший вариант. Но если изображение плохо выглядит в уменьшенном размере, вы можете попробовать создать обрезанную версию изображения.

Разные изображения могут иметь разные соотношения ширины и высоты, чтобы лучше соответствовать контексту. Например, в мобильном браузере может потребоваться отображение узкого и высокого фрагмента, тогда как в настольном браузере — широкого и низкого фрагмента.

Вот пример главного изображения, которое изменяет свое содержимое и форму в зависимости от ширины области просмотра. Добавьте атрибуты width и height к каждому элементу source .

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" fetchpriority="high">
</picture>

Помните, что вы не можете изменить атрибут alt в зависимости от источника изображения. Вам потребуется указать атрибут alt , описывающий как полноразмерное изображение, так и обрезанное изображение.

В большинстве случаев вам, вероятно, не понадобится использовать элемент picture для адаптивных изображений — атрибуты srcset и sizes элемента img охватывают множество вариантов. Но в тех ситуациях, когда требуется более точный контроль, элемент picture является мощным инструментом.

Есть один тип изображений, для которого вам, возможно, не понадобится ни одно из этих решений: иконки. Вот что будет дальше .

Проверьте свое понимание

Проверьте свои знания об элементе изображения.