Встроенный браузер для поддержки адаптивных изображений

  1. Представляем элемент <picture>
  2. Используйте для художественного руководства
  3. Посмотреть демо
  4. Синтаксис <picture>
  5. Использовать с элементами <source>
  6. Добавьте последний элемент <img>
  7. Объединить с дескрипторами плотности пикселей
  8. Объединить с дескрипторами ширины
  9. Загрузить альтернативные форматы файлов изображений
  10. Дополнительные примеры кода
  11. Попробуйте сегодня

Представляем элемент <picture>

Элемент <picture> предлагает декларативный подход к загрузке ресурсов изображения. Веб-разработчикам больше не понадобятся хаки CSS или JavaScript для обработки изображений в адаптивных проектах. Кроме того, пользователи получают выгоду от оптимизированной загрузки графических ресурсов, что особенно важно для пользователей, использующих медленные интернет-соединения.

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

Выбор по художественному направлению Это мобильное устройство в портретной ориентации или широкоэкранный монитор? Загрузите изображение, оптимизированное для заданных размеров экрана. Выбор на основе отношения пикселей к устройству Имеет ли устройство дисплей с высоким разрешением? Загрузите изображение с более высоким разрешением. Выбор на основе области просмотра. Предполагается ли, что изображение всегда заполняет фиксированную пропорцию области просмотра? Загрузите изображения относительно области просмотра. Выбор на основе формата изображения Может ли браузер поддерживать дополнительные типы файлов изображений, обеспечивающие повышение производительности, например файлы меньшего размера? Загрузите альтернативный файл изображения, такой как WebP.

Используйте для художественного руководства

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

При использовании <picture> или <img> с атрибутом srcset и sizes браузер загружает только изображение, явно указанное для соответствующего сценария. Эта нативная реализация совместима с анализаторами HTML и может использовать возможности кэширования и предварительной загрузки изображений в браузере.

Посмотреть демо

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

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

Иллюстрации кошек от @itsJonQ

Откройте демо в новой вкладке с Chrome 38 или выше. Измените размер окна просмотра, чтобы увидеть кота в действии.

В качестве отправной точки эта демонстрация демонстрирует только минимум функций, которые может предложить <picture>. Давайте углубимся в синтаксис сейчас.

Синтаксис <picture>

Следующий фрагмент HTML и CSS - это все, что использовалось для реализации демо:

<style> img {display: block; margin: 0 auto;} </ style> <picture> <source media = "(min-width: 650px)" srcset = "images / kitten-stretching.png"> <source media = "(min-width: 465px) "srcset =" images / kitten-Sitting.png "> <img src =" images / kitten-curled.png "alt =" милый котенок "> </ picture>

Обратите внимание, что здесь нет JavaScript и сторонних библиотек. Блок CSS <style> используется только для стилизации элемента изображения и не содержит медиазапросов. Нативная реализация элемента <picture> означает, что вы можете объявить свои адаптивные изображения, используя только HTML.

Использовать с элементами <source>

Элемент <picture> не имеет собственных уникальных атрибутов. Волшебство происходит, когда <picture> используется в качестве контейнера для <source>.

Элемент <source>, который используется для загрузки медиафайлов, таких как видео и аудио, был обновлен для загрузки изображений, и были добавлены следующие новые атрибуты:

srcset (обязательно)

Принимает один путь к файлу изображения (например, srcset = "kitten.png").

Или разделенный запятыми список путей к файлам изображений с дескрипторами плотности пикселей (например, srcset = "kitten.png, [email protected] 2x"), где дескриптор 1x предполагается, когда он выключен.

Ссылаться на Объединить с дескрипторами плотности пикселей для этого в использовании.

медиа (необязательно)

Принимает любой допустимый медиа-запрос, который вы обычно находите в селекторе CSS @media (например, media = "(max-width: 30em)").

Обратитесь к предыдущему Синтаксис <picture> пример для этого в использовании.

размеры (опционально)

Принимает один дескриптор ширины (например, sizes = "100vw") или один медиа-запрос с дескриптором ширины (например, sizes = "(max-width: 30em) 100vw").

Или разделенный запятыми список медиазапросов с дескриптором ширины (например, size = "(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc (33vw - 100px)"), в котором последний элемент в список используется по умолчанию.

Ссылаться на Объединить с дескрипторами ширины для этого в использовании.

тип (необязательно)

Принимает поддерживаемый тип MIME (например, type = "image / webp" или type = "image / vnd.ms-photo").

Ссылаться на Загрузить альтернативные форматы файлов изображений для этого в использовании.

Браузер будет использовать подсказки, переданные в качестве значений атрибутов, для загрузки наиболее подходящего ресурса изображения. Порядок перечисления тегов имеет значение! Браузер будет использовать первый элемент <source> с соответствующей подсказкой и игнорировать любые следующие теги <source>.

Добавьте последний элемент <img>

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

Используйте <img>, чтобы объявить изображение по умолчанию для использования в блоке <picture>. Поместите <img> в качестве последнего потомка <picture>, так как браузер будет игнорировать любые объявления <source>, которые появляются после обнаружения тега <img>. Тег тега также используется для добавления альтернативного текста с помощью атрибута alt элемента изображения.

Объединить с дескрипторами плотности пикселей

Добавьте поддержку дисплеев с высоким разрешением, используя дескрипторы плотности пикселей, такие как 1x, 1,5x, 2x и 3x. Новый атрибут srcset применяется к элементам <img> и <source>.

В приведенном ниже примере поддерживаются экраны с разрешением 1x, 1,5x и 2x:

<picture> <source media = "(min-width: 650px)" srcset = "images / kitten-stretching.png, images/[email protected] 1.5x, images/[email protected] 2x "> <source media =" (min-width: 465px) "srcset =" images / kitten-Sitting.png, images/[email protected] 1.5x images/[email protected] 2x "> <img src = "images / kitten-curled.png" srcset = "images/[email protected] 1.5x, images/[email protected] 2x" alt = "милый котенок"> </ фото>

Объединить с дескрипторами ширины

Веб-основы охватывает новые атрибут размеров для элемента <img> undepth:

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

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

Вот пример использования атрибута размеров, чтобы установить пропорцию изображения, чтобы всегда заполнять 80% области просмотра. Он объединяется с атрибутом srcset для предоставления четырех версий одной и той же фотографии маяка шириной 160 пикселей, 320 пикселей, 640 пикселей и 1280 пикселей шириной:

<img src = "lighthouse-160.jpg" alt = "маяк" размеры = "80vw" srcset = "lighthouse-160.jpg 160 Вт, lighthouse-320.jpg 320 Вт, lighthouse-640.jpg 640 Вт, lighthouse-1280.jpg 1280w ">

Браузер будет использовать эти подсказки для выбора наиболее подходящего ресурса изображения для обслуживания на основе ширины области просмотра и аппаратного разрешения экрана:

Например, окно просмотра слева составляет ок. 800 пикселей в ширину. Браузер будет загружать lighthouse-640.jpg, если только отношение пикселей устройства не будет 2x - в этом случае будет загружен lighthouse-1280.jpg.

С добавлением <picture> атрибут размеров может быть применен к элементам <img> и <source>:

<picture> <source media = "(min-width: 800px)" sizes = "80vw" srcset = "lighthouse-landscape-640.jpg 640w, lighthouse-landscape-1280.jpg 1280w, lighthouse-landscape-2560.jpg 2560w "> <img src =" lighthouse-160.jpg "alt =" маяк "размеры =" 80vw "srcset =" lighthouse-160.jpg 160 Вт, маяк-320.jpg 320 Вт, маяк-640.jpg 640 Вт, маяк-1280 .jpg 1280w "> </ picture>

Основываясь на предыдущем примере, когда область просмотра составляет 800px и выше, браузер будет отображать альбомную версию версии маяка:

Область просмотра слева имеет ширину более 800 пикселей, поэтому будет показана альбомная версия фотографии маяка.

Загрузить альтернативные форматы файлов изображений

Атрибут type <source> может использоваться для загрузки альтернативных форматов файлов изображений, которые могут поддерживаться не во всех браузерах. Например, вы можете подать изображение в Формат WebP в браузеры, которые его поддерживают, при этом обращаясь к JPEG в других браузерах:

<picture> <source type = "image / webp" srcset = "images / butterfly.webp"> <img src = "images / butterfly.jpg" alt = "бабочка"> </ picture>

Дополнительные примеры кода

Ссылаться на Адаптивные изображения: используйте примеры и документированные фрагменты кода для начала работы в блоге Dev.Opera для исчерпывающего списка примеров, сочетающих <picture> и <img> с атрибутами srcset, media, sizes и type.

Попробуйте сегодня

Элемент <picture> в настоящее время доступен Chrome 38 , Попробуйте это с эмуляция экрана в Chrome DevTools.

Если у вас есть отзывы об этой новой функции, напишите нам на Chrome bug tracker ,

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

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