Опубликовано автор в категориях Верстальщику.

Наконец-то браузеры могут свободно использовать спецификацию элемента <picture> как рекомендацию, и как сказал Маркос Касерес «время идти вперед и превратить все в <picture>».

Однако вы не должны. Вы не должны использовать <picture> везде.

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

Запутались? Не только вы.

<picture> vs картинка

Стандарты разрабатываются нелинейно.  Идеи развиваются и объединяются. Часто в конце долгого процесса, мы оглядываемся и удивляемся, как пришли к этому.

И в данный момент мы подошли к тому, что спецификация «изображение» содержит не только элемент <picture>. Она также включает srcset и sizes, и вы можете использовать эти свойства без элемента <picture>.

Знание того, какую проблему вы решаете, подскажет нужное решение.

Одной из первых частей работы, которую выполняла Общественная Группа отзывчивых изображений (Responsive Images Community Group),  было определение вариантов использования отзывчивых изображений.

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

Два самых распространенных варианта использования:

  • Переключение разрешения – здесь нужно выбрать другой источник этого же изображения, потому что нам необходимо другое разрешение для различных случаев. Эти случаи включают изображения, использованные в другом размере, который базируется на размере экрана, плотности пикселей на экране, или чтобы избежать загрузки ненужных больших изображений.
  • Художественные требования – существует несколько причин, почему нужно изменить содержимое изображения при определенных условиях. Возможно, нам необходимо обрезать изображение по-разному на маленьких экранах. Или мы работаем с баннером, который содержит текст, и использование уменьшенной версии изображения просто сделает текст нечитаемым.

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

Для большинства отзывчивых изображений, вам не нужен элемент <picture>

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

Спецификация изображения поддерживает синтаксис, который может использоваться без элемента <picture> . Пример синтаксиса, заимствованный из отличной статьи Йоава Вейсса (Yoav Weiss) Native Responsive Images, должен выглядеть примерно так:

<img src="cat_500px.jpg"
    srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
    width="500px" alt="lolcat">

Это снабдит браузер различными вариантами для разной плотности дисплея. Или более сложный пример:

<img sizes="(max-width: 30em) 100vw,
            (max-width: 50em) 50vw,
            calc(33vw - 100px)"
    srcset="swing-200.jpg 200w,
            swing-400.jpg 400w,
            swing-800.jpg 800w,
            swing-1600.jpg 1600w"
    src="swing-400.jpg" alt="Kettlebell Swing">

Можно приводить множество примеров, но, к сожалению, нет возможности полностью охватить тему синтаксиса здесь. Я рекомендую почитать статью Йоава или один из дополнительных источников, приведенных внизу, если вы хотите узнать об этом поподробнее.

Используя srcset и sizes свойства в элементе  <img>, вы предоставляете информацию, чтобы браузер мог принять верное решение о том, какое изображение подходит для пользователя, основываясь на ряде факторов, которых вы не знаете.

Как веб-дизайнер или разработчик, у вас нет возможности узнать, сколько трафика пользователь имеет в настоящее время, и какую плотность изображений он предпочитает. Если мы обеспечим браузер информацией с помощью srcset и sizes, тогда браузеры смогут принимать более верные решения о соответствующем источнике изображения.

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

Но все это становится невозможным, когда вы используете элемент  <picture>  и его медиа-атрибуты.

<picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 32em)" srcset="med.jpg">
    <img src="small.jpg" alt="The president giving an award.">
</picture>

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

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

Для большинства изображений в интернете <picture> — неправильное решение

Последний год, Йоав пытался подсчитать, какой процент отзывчивых изображений попадает под случай дизайнерских требований. Ответ:  25%.

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

Поэтому, для большинства отзывчивых изображений, элемент <picture> — неверное решение. Следует использовать  <img> с srcset и sizes.

Будущее интернета зависит от нас, и мы получили это право.

Получение этого права имеет большое значение для будущего интернета. Мы видели в прошлом, что происходит, когда веб-разработчики создают огромную установленную базу не оптимизированных веб-страниц. Мы заканчиваем с браузерами, принимающими css префиксы или медиа-типы, наподобие “mobile” или “tv”, которые игнорируются мобильными телефонами и телевизорами.

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

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

Возможно, стоит прекратить ссылаться на спецификацию изображений

Много этой путаницы происходит от того, что у нас есть спецификация, которая заканчивается изображением в названии, хотя спецификация – это не просто изображение.

Для тех, кто принимал активное участие в развитии решения для отзывчивых изображений, картинка – хорошее сокращение. Поэтому мы видим ссылку на <picture> в Chrome Status и Modern IE Status.

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

Брюс Лоусон (Bruce Lawson) ответил: «Я, как правило, ссылаюсь на «картинку и друзей» или на общее понятие «отзывчивые изображения»».

А Один Херт Омдаль (Odin Hørthe Omdal) добавил: «Я всегда говорю про отзывчивые изображения, и думаю, я, вероятно, подразумеваю спецификацию отзывчивых изображений».

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

Простые рекомендации для использования спецификации отзывчивых изображений

Подводя итог:

  • Спецификация для “picture” включает в себя больше чем просто элемент  <picture>. Думайте о ней как о спецификации отзывчивых изображений.
  • Для большинства отзывчивых изображений, не следует использовать элемент  <picture>. Необходимо использовать srcset и/или sizes.
  • Способ узнать, когда необходимо использовать элемент <picture> зависит от варианта использования, который вы решаете.
  • Если вы работаете с вариантом художественных требований, используйте элемент <picture> . Во всем остальном придерживайтесь srcset и sizes.
  • Начните делать правильно раньше – до того, как у нас появится тысячи неправильных веб-страниц – это критично для будущего интернета.

И на этом, я исправлю слова Маркоса: «Идите вперед и сделайте все ваши изображения отзывчивыми!».

  1. В документе вариантов использования отзывчивых изображений, переключение разрешения описывается тремя примерами: Resolution-based selection, Viewport-based selection и Device-pixel-ratio-based selection.
    И да, это все разные причины, почему вы выбираете другой источник разрешения, но они все включают в себя переключение разрешения, поэтому я и смешал все вместе.
  2. Вы также можете найти статью A Framework for Discussing Responsive Images чтобы получить хороший обзор вариантов использования.
  3. Несколько дополнительных статей, которые помогут понять основные свойства спецификации изображений: HTML5 Rocks: Built-in Browser Support for Responsive Images, Srcset and sizes и Responsive Images Done Right: A Guide To <picture> And srcset, написанные Эриком Портисом (Eric Portis).

Ссылка на оригинал http://blog.cloudfour.com/dont-use-picture-most-of-the-time/

С английского перевела Виктория Павлова.

Оставить комментарий

  • (не будет показан)