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

Предыдущий модуль продемонстрировал, как атрибут 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" loading="lazy" decoding="async">
</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" loading="lazy" decoding="async">
</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" loading="lazy" decoding="async"
    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" loading="eager" decoding="sync">
</picture>

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

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

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

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

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