x
 
Юрий Мазурский
20 февраля 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Адаптивные изображения

Эле­мент picture — ещё один инстру­мент, кото­рый предо­став­ляет допол­ни­тель­ные воз­мож­но­сти управ­ле­ния выбо­ром изоб­ра­же­ний. В отли­чие от srcset и sizes, эле­мент picture под­ра­зу­ме­вает руч­ной выбор изоб­ра­же­ния в зави­си­мо­сти от условий.

Адаптивные изображения

Внутри picture через дочер­ние эле­менты source можно ука­зы­вать изоб­ра­же­ния и меди­а­усло­вия, при кото­рых они будут выбраны:

<picture>
  <source srcset="/img/300x350.png" media="(max-width: 350px)" />
  <source srcset="/img/800x630.png" media="(max-width: 800px)" />
  <source srcset="/img/2000x1000.png" media="(max-width: 1000px)" />
  <source srcset="/img/3000x1500.png" media="(min-width: 1001px)" />
  <img src="/img/2000x1000.png" style="width: 100%;" alt="При­мер 1" />
</picture>

Эле­мент img обя­за­те­лен — через него зада­ются раз­меры, стили и про­чие атри­буты изоб­ра­же­ния. Если бра­у­зер не под­дер­жи­вает picture или source, под­став­ля­ется изоб­ра­же­ние из img.

Всё это напо­ми­нает srcset и sizes, но есть прин­ци­пи­аль­ное отли­чие. В srcset и sizes мы ука­зы­ваем усло­вия и целе­вой раз­мер изоб­ра­же­ния. Под­бо­ром наи­бо­лее под­хо­дя­щего изоб­ра­же­ния из доступ­ных зани­ма­ется бра­у­зер. В source мы явно ука­зы­ваем ресурс, кото­рый дол­жен быть пока­зан при выпол­не­нии условия.

Для описания этой задачи в англоязычных статьях часто встречается термин art direction problem

На раз­ных экра­нах одно и то же изоб­ра­же­ние может смот­реться по‑раз­ному. Ино­гда тре­бу­ется пока­зы­вать глав­ный объ­ект изоб­ра­же­ния с окру­жа­ю­щими мел­кими дета­лями на широ­ких экра­нах и кад­ри­ро­вать изоб­ра­же­ние на узких. Тех­ни­че­ски — пока­зы­вать раз­ные изоб­ра­же­ния с раз­ными про­пор­ци­ями. Как именно кад­ри­ро­вать, каковы усло­вия под­ста­новки нуж­ных изоб­ра­же­ний — вопрос дизайна, а picture помо­гает решить его.

Для описания этой задачи в англоязычных статьях часто встречается термин art direction problem
Пример 1
С помо­щью picture удобно управ­лять пере­клю­че­нием изоб­ра­же­ний в зави­си­мо­сти от раз­мера экрана

При этом в source исполь­зу­ется зна­ко­мый нам атри­бут srcset, а зна­чит, оба под­хода можно сов­ме­стить — менять изоб­ра­же­ние с помо­щью меди­а­усло­вий и дать бра­у­зеру воз­мож­ность выби­рать из вари­ан­тов изоб­ра­же­ния. Для этого нужно доба­вить вари­анты и опи­сать кри­те­рии под­ста­новки с помо­щью sizes в source:

<picture>
  <source srcset="/img/300x350.png" media="(max-width: 350px)" />
  <source srcset="/img/800x630.png" media="(max-width: 800px)" />
  <source srcset="/img/2000x1000.png 2x,
                  /img/1000x500.png 1x"
          sizes="1000px"
          media="" />
  <img src="/img/2000x1000.png" style="width: 100%;" alt="При­мер 2" />
</picture>
Пример 2
На ширине экрана более 800 пик­се­лей изоб­ра­же­ние выбе­рется авто­ма­ти­че­ски в зави­си­мо­сти от экрана поль­зо­ва­теля — на ретине выбе­рется изоб­ра­же­ние раз­ме­ром 2000×1000, на экране с еди­нич­ной плот­но­стью точек — 1000×500 пик­се­лей

В эле­менте source, вло­жен­ном в picture рабо­тает тот же син­так­сис, что и у img.

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

Что ещё почитать


Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Что делать, если меня, технического директора, потихоньку отстраняют от дел? Типовые решения в вёрстке. Почему не стоит использовать float 2 3 Как написать аккуратный код? Часть третья: заменяемость




Недавно всплыло

1 3 Куда податься? 2 3