Тег picture как использовать
Заметка: как использовать HTML «picture» для адаптивных изображений
Изображения заведомо являются одним из самых сложных аспектов адаптивного веб дизайна. Сегодня мы рассмотрим как элемент
, являющийся решением проблемы адаптивных изображений, можно использовать прямо сейчас.
Вначале о проблеме
Времена попиксельного (pixel perfect) и дизайна фиксированной ширины (fixed-width) ушли в прошлое. Теперь во времена широкоформатных мониторов, интернет телевидения, планшетов и смартфонов различных размеров наши дизайны должны удовлетворять любому устройству шириной от 320px до потенциальных 7680px.
Вместе с множеством разрешений экранов приходит необходимость в сжатии или растяжении изображений для того, чтобы соответствовать различным требованиям. Это может оказаться проблей, т.к. за исключением векторной графики, у подавляющего большинства изображений есть базовая ширина в px, которую нельзя изменить.
Так что же нам делать?
Текущее общепринятое решение
Как правило, вы найдете этот код на любом сайте с адаптивные дизайном:
Одно «жидкое» изображение под все случаи
Проблема решается лишь в одном ключе, позволяя нам показывать одно и то же изображение для всех случаев. Но это не дает нам возможность устанавливать разные изображения для разных ситуаций.
Новое решение:
это новый элемент, который является частью HTML5.
Это позволит загружать разные изображения в зависимости от:
Это в свою очередь означает, что вы можете:
Как работает
Основные шаги при работе с
Эти проверки можно использовать для того, чтобы например загружать альбомную (landscape) или книжную (portrait) версию изображения в зависимости от ориентации устройства, к тому же можно одновременно проверять размеры в этих выражениях. Например:
Этот код загружает уменьшенную альбомную (landscape) версию изображения для устройств с малым экраном и соответствующей ориентацией. И увеличенную версию того же изображения для устройств с большим экраном.
Использование
Прямо сейчас встроенная поддержка
реализована в Chrome, Firefox и Opera. В будущем, вполне вероятно, мы увидим широкую поддержку и другими браузерами. Но до этого момента еще надо дожить.
Тем временем вам не нужно ждать, если хотите использовать
прямо сейчас. Просто воспользуйтесь Picturefill 2.0; polyfill от умных людей из Filament Group.
После скачивания файла picturefill.js в свой проект просто подключите его в шапке:
Есть также опция для асинхронной загрузки скрипта, о которой можно прочитать в документации Picturefill.
При использовании этого скрипта элемент
будет работать так, как я и объяснял, но с несколькими ограничениями.
Ограничения Picturefill
Picturefill отлично работает с разными версиями IE, однако IE9 не поддерживает элементы, которые используются внутри
. Чтобы обойти это, оберните source элементы в теги с помощью условных комментариев; это сделает их видимыми для IE9, например:
Android 2.3
Как и IE9, Android 2.3 не показывает элементы внутри
. Однако он понимает атрибут srcset при использовании в обычных тегах. Убедитесь в том, что всегда включаете резервный с именем файла по умолчанию в атрибут srcset для Android 2.3 и других браузеров, которые могут иметь такую же проблему.
Требуется JavaScript и встроенная поддержка Media Query
Соответственно требуется, чтобы JavaScript был включен в браузере. Picturefill 2.0 не предоставляет «no-js» решения, ведь если это будет сделано, то когда браузер выкатит нативную поддержку
— будет показываться уже несколько изображений. Однако, вы можете использовать Picturefill 1.2, если параметр «no-js» является для вас обязательным.
Возможны дополнительные HTTP-запросы
Это лишь временная проблема, и она пропадет как только выкатят встроенную поддержку
Picture — новый элемент, которого нет
Синтаксис
Условно, расширенный синтаксис нового элемента выглядит так
Поэтому для большинства задач хватит сокращенной записи, совсем без использования picture
Давайте рассмотрим как решаются вышеозначенные проблемы с помощью нового элемента. Все файлы примеров можно найти в этом репозитории github.com/fetis/picture
Для тестирования примеров из данной статьи на десктопе вам понадобятся либо Firefox Nighlty (поддержка picture включается настройкой dom.image.picture.enable в about:config), либо Chrome Canary, либо Opera Developer. На мобильном устройстве новый элемент можно протестировать в Chrome Beta
Ретина
У нас есть изображение 400х300 пкс, которое мы хотим также красиво показывать при двукратной и трехкратной плотности пикселей. Для этого готовим еще 2 картинки, размерами 800×600 и 1200х900 и пишем следующий код
2x и 3x это дескрипторы плотностей пикселей, они говорят браузеру, что вот эти картинки были подготовлены для вот этой плотности, если хочешь, можешь использовать. Обратите внимание, они не заставляют бразуер использовать эти картинки, а только подсказывают ему. Окончательное решение остается за ним в зависимости от других условий, например, текущего соединения.
Атрибут src в данном случае служит источником картинки для плотности 400w, 800w, 1200w — это дескрипторы ширины, они подсказывают браузеру картинка какой ширины находится по данному URL и на основе этой информации браузер принимает решение какое изображение лучше всего подойдет в текущей ситуации. Как и в случае с ретиной информация носит рекомендательный характер и окончательное решение какое изображение грузить остается за браузером.
Одновременное использование дескрипторов плотности и ширины недопустимо.
В атрибуте sizes перечисляются размеры изображения для всех контрольных точек в нашем дизайне. Контрольные точки задаются в виде обычного медиавыражения, браузер берет первое, которое возвращает Истину и дальше цепочку не рассматривает. Для значения ширины используется новая единица длины vw, которая возвращает значение в процентах от ширины вьюпорта.
Формат
Использование различных форматов для изображений мало отличается от способов используемых для тегов video или audio
Кадрирование
Когда мы показываем фото на меньшем экране иногда имеет смысл обрезать лишние детали, оставив только основную часть. С этой задачей нам поможет справиться атрибут media
В каждом атрибуте media мы задаем медиавыражение, при котором у нас будет меняться исходное изображение и, в отличие от предыдущих примеров, браузер будет обязан ему следовать. Обратите также внимание как кадрирование здесь сочетается с адаптивностью, чтобы растянуть изображение на всю ширину.
А теперь все 4 метода в одном флаконе 🙂 Возможно так будет выглядеть вставка картинок через пару лет (пример из блога Оперы)
Здесь используются 2 формата JPEG и WebP. При ширине экрана более 1280 пкс показывается полноразмерная картинка в половину вьюпорта. При ширине от 640 до 1279 показывается обрезанное фото на 60% ширины вьюпорта. При ширине экрана меньше 640пкс показывается обрезанная фотография на 100% ширины. Выбор под текущее DPI экрана производится на основе ширины исходных файлов.
Адаптивные изображения. Что использовать: img или picture?
Теги img и picture предназначены для загрузки изображений. Каждый из них позволяет задать набор правил, согласно которым браузер будет выбирать, какое из изображений загружать. Рассмотрим синтаксис и различия данных тегов. Для начала нужно задать следующий метатег:
Данный метатег указывает браузеру выполнять масштабирование размеров экрана устройства. Так, например, размеры экрана iPhone X составляют 375×812 css-пикселей.
Для тестирования будем использовать следующее изображение:
Медведи
Тег img
Атрибут srcset предназначен для указания всех доступных размеров изображений и URL каждого из них. При этом, тег src указывать нужно. Его значение будет использовано, если все варианты из srcset не подойдут согласно указанным правилам.
Атрибут srcset содержит список из одной или нескольких строк, разделённых запятыми, указывающих набор источников изображения. Каждая строка состоит из:
Рассмотрим на примере:
Аналогично, если ширина экрана больше 480 css-пикселей, но не превышает 960 css-пикселей, то:
Рассмотрим на примере:
В данном примере браузер будет следовать следующим правилам при выборе источника изображения:
Если ширина экрана устройства составляет не более 600 css-пикселей, то изображение на таком экране занимает максимум 480 css-пикселей в ширину.
Если ширина экрана устройства составляет от 600 до 1200 css-пикселей, то изображение на таком экране занимает максимум 960 css-пикселей в ширину.
В противном случае браузер будет подразумевать, что изображение может занимает всю ширину экрана.
Также нужно учитывать коэфициент плотности пикселей. Например, если ширина экрана устройства составляет 550 css-пикселей, то браузер выберет следующее изображение:
Атрибут sizes нужно указывать, если размеры изображения ограничены css стилями. Если атрибут sizes не указан, то по умолчанию он будет иметь значение 100vw (sizes=»100vw» ), то есть браузер будет подразумевать, что изображение может занимает всю ширину экрана.
Тег picture
Разница между img и picture
Медведи
Для этого нужно указать несколько тегов source и задать им атрибуты media :
Тег picture как использовать
Время чтения: меньше 5 мин
Обновлено 20 декабря 2021
Кратко
используется, когда для разных устройств или вариантов отображения нам нужны разные картинки.
Пример
Как это понять
Как пишется
В этом примере при помощи атрибута media в теге мы задаём условие по аналогии с медиавыражением @media в CSS. Если условие определяется как ложное, то элемент пропускается. Разница становится видна, если менять размер окна браузера.
Подсказки
💡 Если медиавыражение не сработало, то браузер не загружает для него изображение. Так что можно не экономить и писать столько условий, сколько нужно.
не является полноценным блочным контейнером, как
💡 Старайтесь при вёрстке всегда готовить несколько версий одной и той же картинки для отображения на разных устройствах. Пользователи мобильных телефонов будут вам очень благодарны, если для них вы будете готовить картинки с меньшим разрешением. В то же время пользователям десктопов с экранами высокой чёткости можно показывать картинки с увеличенным разрешением:
В этом примере пользователи с обычными экранами увидят картинку с надписью 750×300. Пользователи, у которых ретиновые дисплеи, увидят картинку с надписью 1500×600.
На практике
Денис Ежков
🛠 Одна из частых ошибок при работе с тегом
Егор Левченко
🛠 Используйте все доступные вам медиавыражения по полной.
Не обязательно останавливаться только на размерах картинок для мобильных и ПК. Можно использовать медиавыражения для определения тёмной темы на устройстве пользователя и подменять картинку, делая интерфейс более приятным для глаз.
Использование тэга HTML5 picture для адаптивных изображений
Дата публикации: 2014-07-17
От автора: Изображения давно известны как самые трудоемкие аспекты адаптивного веб-дизайна. Сегодня, мы увидим как можно использовать элемент picture в качестве решения проблемы адаптивных изображений прямо сейчас.
 |
Во-первых, сама проблема
Времена дизайна сайтов с фиксированной шириной и полным соответствием макету давно позади. В нынешнее время широкоформатных мониторов, интернет-телевидения, планшетов и смартфонов различных размеров наш дизайн должен принимать в расчет любые разрешения – от 320 пикселей и до 7680.
Все эти разрешения предъявляют требования к изображениям – они должны растягиваться и уменьшаться, чтобы соответствовать всему разнообразию требований. Это может оказаться проблемой, т.к. за исключением векторной графики, большинство изображений имеет фиксированную ширину в пикселях, которая не изменяется.
Нынешнее, самое распространенное решение
Как правило, вы найдете следующее в CSS коде практически любого адаптивного сайта:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Этот код использует настройку max-width: 100%; для того, чтобы убедиться в том, что изображение не будет выдаваться за пределы родительского контейнера. Если родительский контейнер станет меньше ширины изображения, изображение будет уменьшаться вместе с ним. Настройка height: auto; присутствует для того, чтобы при уменьшении сохранялись пропорции изображения.
Одно «резиновое» изображение для всех устройств
Это решает проблему в одном ключе, позволяя нам показывать одно изображение при разных обстоятельствах. Но, оно не позволяет нам показывать разные изображения для различных обстоятельств.
Новое решение: тэг picture
picture — это новый элемент, который должен стать частью HTML5. Он значительно ускорит процесс размещения адаптивных изображений аналогично принципам работы элементов audio и video. Он позволит задавать несколько элементов source, каждый из которых будет указывать на различные файлы изображений вместе с условиями, при которых они должны загружаться.
Он позволит вам загружать различные изображения в зависимости от:
Результатов медиа-запроса, например, высота окна просмотра, ширина, ориентация
Что означает, что вы можете:
Загружать изображения соответствующих размеров, с максимальной отдачей используя имеющуюся ширину канала.
Загружать изображения с различной обрезкой и пропорциями в соответствии с изменением разметки для экранов разной ширины.
Загружать изображения с высоким разрешением для экранов с высокой плотностью пикселей.
Разные изображения загружаются в зависимости от обстоятельств
Как работает элемент picture?
Основные шаги для работы с элементом picture это:
Создание открывающих и закрывающих тэгов picture.
Внутри этих тэгов создайте элемент source для каждого запроса, который вы хотите произвести.
Добавьте атрибут media вашему запросу для таких вещей как высота окна просмотра, ширина, ориентация, и т.д.
Добавьте атрибут srcset с соответствующим именем файла изображения для загрузки.
Добавьте дополнительные имена файлов вашему srcset атрибуту, если вы хотите поддерживать экраны с высокой плотностью пикселей, например Ретина.
Добавьте элемент img в качестве запасного варианта.
Вот несложный пример, который проверяет, если окно просмотра меньше 768 пикселей, и в случае соответствия загружает изображение меньшего размера:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Вы заметите, что синтаксис, использованный в атрибуте media точно такой же, как и тот, к которому вы привыкли, составляя медиа запросы на CSS. Вы можете использовать такие же проверки, значит, вы можете создать запросы для max-width, min-width, max-height, min-height, orientationи так далее.
Вы можете использовать эти проверки для того, чтобы загружать альбомную или портретную версии изображения в зависимости от ориентации устройства, и вы также можете добавить запросы размеров. Например:
Код выше загружает уменьшенную, обрезанную для альбомной ориентации версию изображения для устройства с соответствующей ориентацией. Он загружает увеличенную версию того же изображения для устройств с большим экраном.
Если устройство имеет портретную ориентацию, он загружает изображение, обрезанное соответствующим образом: в меньшем размере – для небольших устройств и увеличенное изображение для устройств с более высоким разрешением.
Если вы хотите предоставлять версии изображений с различным разрешением для экранов с более высокой плотность, вы можете это сделать с помощью добавления дополнительных имен файлов атрибуту srcset. Например, давайте посмотрим на первый пример кода выше с добавлением поддержки разрешения экрана «Ретина 2х»:
Медиа запрос обрабатывается в первую очередь, таким образом, вы можете контролировать размеры изображения на экране. Затем, проверяется плотность пикселей экрана и если высокая плотность поддерживается и разрешена настройками пользователя, будет загружена версия изображения с более высоким разрешением.
Использование picture сегодняшний день
Сейчас родная имплементация picture находится в разработке для браузеров Chrome, Firefox и Opera.В будущем, мы скорее всего, увидим более широкую поддержку и в остальных браузерах. Но, на сегодняшний день поддержка только ожидается.
Пока что, вам не нужно ждать, если вы хотите начать использовать picture прямо сейчас. Вам всего лишь нужно использовать Picturefill 2.0 — полизаполнение предоставляемое разработчиками из Filament Group.
После того, как вы скачаете файл picturefill.js в свой проект, он может применяться всего лишь загрузкой его в секцию head вашего сайта:
Также есть возможность загружать скрипт асинхронно для большей эффективности, о чем вы можете прочитать в документации Picturefill. Вместе с загрузкой этого скрипта, элемент picture будет работать так, как я описал, с небольшими ограничениями.
Ограничения Picturefill
Picturefill отлично работает в других версиях IE, однако IE9 не распознает элементы source, которые завернуты в тэги picture. Чтобы обойти это, условно оберните элементы source в тэги video, что сделает их видимыми для IE9, например:
Android 2.3
Также как IE9, Android 2.3 не видит элементы source внутри тэгов picture. Однако, он распознает атрибут srcset, когда тот присваивается обычному тэгу img. Убедитесь в том, что вы включаете запасной элемент img с дефолтным именем файла в атрибуте srcset для Android 2.3 или любого другого браузера со схожей проблемой.
Требуется JavaScript и родная поддержка медиа запросов
Так как это решение реализовано на JavaScript, соответственно, оно нуждается в JavaScript для корректной работы в браузере. Picturefill 2.0 не предоставляет решений для “no-js”, потому что в противном случае, множество изображений стало бы появляться на страницах, когда родная поддержка
будет реализована. Однако, вы можете использовать Picturefill 1.2 если возможность “no-js” важна для вас.
Следующим требованием Picturefill является родная поддержка медиа запросов, для того чтобы запросы в атрибуте media работали. Все современные браузеры поддерживают медиа запросы, в то время как IE8 и ниже является единственным не поддерживающим браузером с небольшой остаточной базой пользователей.
Возможны дополнительные HTTP запросы
Для браузеров, имеющих родную поддержку srcset, но не поддерживающих picture, возможно заданное имя файла в запасном элементе img может быть запрошено до того, как более подходящее изображение будет определено в элементе img. Эта проблема временная и она решится тогда, когда родная поддержка picture будет реализована.
Автор: Kezz Bracey
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3