Отзывчивые изображения: примеры использования и документированные снипеты, чтобы вы могли начать их использовать
Вступление
Наконец-то по-настоящему отзывчивые изображения стают реальностью веба – в чистом HTML, без всяких замысловатых хаков. Элемент <picture> и парочка новых атрибутов элемента <img> уже поддерживаются в Chromium 37 и идут в комплекте в Chromium 38 (скоро ожидается то же в Opera), в Firefox Nightly и имплементируются в WebKit (нужно будет ещё посмотреть, добавит ли их Apple в следующую версию Safari).
Новый элемент <picture> может быть длинным и запутанным потому что он решает множество случаев использования. Для того, чтобы помочь удовлетворить ваши нужды в синтаксисе отзывчивых изображений, мы подготовили эту полную примеров статью.
Четыре вопроса
Прежде чем вы начали использовать отзывчивые изображения в вашей разработке, вам нужно ответить на следующие четыре вопроса:
Хочу ли я, чтобы размеры моих изображений изменялись в зависимости от правил моего отзывчивого дизайна?
Хочу ли я оптимизироваться под экраны с высоким dpi?
Хочу ли я отдавать изображения с различными mime типами для поддерживающих их браузеров?
Хочу ли я отдавать различное содержимое в зависимости от определённых контекстовых факторов?
В приведенных ниже примерах мы осветим эти вопросы используя ключевые слова размер, dpi, mime и содержимое соответственно и далее для каждой комбинации ответов мы покажем кусок примерного кода с коротким описанием. При создании этих примеров, я держал в голове
этот ночной снимок оперного зала Осло —- он может оказаться полезным для вас.
Перед тем, как вы взглянете на различные примеры ниже, нужно запомнить несколько следующих вещей:
<picture>требует<img> в качестве своего последнего потомка. Без этого ничего не выведется. Это хорошо для совместимости, так как есть только одно традиционное место для вашего альтернативного текста и это хорошо для поддержки содержимого в старых браузерах, которые показывают только <img> элемент.
Думайте об атрибутах sizes и srcset элемента <picture>, как о перезаписи
src в <img>. Проверяйте currentSrc в JavaScript для того, чтобы узнать что выбирает браузер. Старые браузеры конечно же будут использовать только <img src>, поэтому вам нужно будет использовать что-то наподобие image. currentSrc || image.src, чтобы обработать все случаи.
В srcset и sizes список – это подсказка для браузеров, а не команда. Например, устройство с device-pixel-ratio в 1.5 будет свободно использовать 1x или 2x изображение в зависимости от того, что оно знает о своих возможностях, сети и т.д.
<img> сообщает: если это медиавыражение верно, показать изображение с 100vw шириной. Первое медиавыражение выигрывает, поэтому порядок источников важен.
Выдача разного содержимого
размеры dpi mime содержимое
<picture>
<source
media="(min-width: 1024px)"
srcset="opera-fullshot.jpg">
<img
src="opera-closeup.jpg" alt="The Oslo Opera House">
</picture>
Для браузеров с шириной окна в 1024 CSS пиксела и шире используется полноэкранное фото, меньшие окна браузера получат приближенное фото.
Использование различных типов изображений
размеры dpi mime содержимое
<picture>
<source
srcset="opera.
webp"
type="image/webp">
<img
src="opera.jpg" alt="The Oslo Opera House">
</picture>
Браузеры, которые поддерживают WebP получают WebP изображения; остальные получают JPG.
Различные типы изображений и разное содержимое
размеры dpi mimeсодержимое
<picture>
<source
media="(min-width: 1024px)"
srcset="opera-fullshot.webp"
type="image/webp">
<source
media="(min-width: 1024px)"
srcset="opera-fullshot.jpg">
<source
srcset="opera-closeup.webp"
type="image/webp">
<img
src="opera-closeup.jpg" alt="The Oslo Opera House">
</picture>
Для окон браузеров с шириной в 1024 CSS пиксела и шире будет использоваться полноэкранное фото; меньшие окна браузера получат приближённое фото. Это фото будет выдаваться в WebP формате для браузеров, которые его поддерживают; другие будут получать в формате JPG.
Изображения с высоким разрешением
размеры dpi mime содержимое
<img
src="opera-1x. jpg" alt="The Oslo Opera House"
srcset="opera-2x.jpg 2x, opera-3x.jpg 3x">
Браузеры на устройствах с высоким разрешением получают изображения высокого разрешения; другие браузеры получают обычное изображение.
Изображения с высоким разрешением и разным содержимым
Для окон браузеров с шириной 1024 CSS пикселов и шире используется полноэкранное изображение; меньшие окна браузера используют приближенные фото. В дополнение, эти фото поставляются как изображения с высоким разрешением для браузеров на устройствах с экранами высокого разрешения; другие браузеры получат обычное изображение.
Изображения высокого разрешения и различные типы изображений
Браузеры на устройствах с высоким разрешением получают в два или даже в три раза большее количество пикселей; другие браузеры получают обычное изображения. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.
Изображения с высоким разрешением, различные типы изображений и различное содержимое
webp 2x,
opera-closeup-3x.webp 3x"
type="image/webp">
<img
src="opera-closeup-1x.jpg" alt="The Oslo Opera House"
srcset="opera-closeup-2x.jpg 2x,
opera-closeup-3x.jpg 3x">
</picture>
Для окон браузеров с шириной в 1024 CSS пиксела и шире используется полноэкранное изображение; меньшие окна браузера получают приближенное фото. В дополнение, эти фото выдаются в высоком разрешении для браузеров на устройствах с экранами высокого разрешения; остальные браузеры получают обычное изображение. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.
Смена размеров изображений
размеры dpi mime содержимое
<img
src="opera-fallback.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.jpg 200w,
opera-400.jpg 400w,
opera-800.jpg 800w,
opera-1200.jpg 1200w">
Для окон браузеров с шириной в 640 CSS пикселов и шире используется фото с шириной 60% области просмотра; для браузеров с меньшей шириной окна используется фото равное полной ширине области просмотра. Браузер выбирает оптимальное изображение из выборки изображений с шириной в 200px, 400px, 800px и 1200px, принимая во внимание ширину изображения и разрешение экрана.
Для окон браузеров с шириной в 1280 CSS пикселов и шире используется полноэкранное изображение с шириной просмотра в 50%; для браузеров с шириной в 640-1279 CSS пикселов используется фото с 60% ширины области просмотра; для меньших окон браузера используется фото равное полной ширине области просмотра.
В каждом случае браузер берёт оптимальное изображение из выборки с шириной в 200px, 400px, 800px и 1200px, принимая во внимание ширину и разрешение экрана устройства.
Смена размеров изображения и различные типы изображения
Для окон браузеров с шириной в 640 CSS пикселов и шире используется полноэкранное изображение с шириной 60% от ширины области просмотра; для меньших окон браузера используется фото равное полной ширине области просмотра. Браузер берёт оптимальное изображение из выборки изображений с шириной 200px, 400px, 800px and 1200px, принимая во внимание ширину и разрешение экрана устройства. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.
Смена размеров изображения, различные типы изображения и разное содержимое
Для окон браузеров с шириной в 1280 CSS пикселов и шире используется полноэкранное фото с шириной 50% области просмотра; для окон браузеров с шириной в 640-1279 CSS пикселов используется фото с шириной в 60% области просмотра; для менее широких окон браузеров используется фото с шириной равной полной области просмотра. В каждом случае браузер выбирает оптимальное изображение из набора изображений с шириной в 200px, 400px, 800px и 1200px, принимая во внимание ширину и разрешение экрана. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.
Смена размеров изображения и изображения высокого разрешения
Для окон браузеров с шириной в 640 CSS пикселов и шире используется полноэкранное фото с шириной 60% области просмотра; для менее широких окон браузеров используется фото с шириной равной полной области просмотра. Браузер выбирает оптимальное изображение из набора изображений с шириной в 200px, 400px, 800px, 1200px, 1600px и 2000px, принимая во внимание ширину и разрешение экрана.
Смена размеров изображения, изображения высокого разрешения и разное содержимое
Для окон браузеров с шириной в 1280 CSS пикселов и шире используется полноэкранное фото с шириной 50% области просмотра; для окон браузеров с шириной в 640-1279 CSS пикселов используется фото с шириной в 60% области просмотра; для менее широких окон браузеров используется фото с шириной равной полной области просмотра. В каждом случае браузер выбирает оптимальное изображение из набора изображений с шириной в 200px, 400px, 800px, 1200px, 1600px и 2000px, принимая во внимание ширину и разрешение экрана.
Смена размеров изображения, изображения высокого разрешения и различные типы изображения
Для окон браузеров с шириной в 640 CSS пикселов и шире используется полноэкранное фото с шириной 60% области просмотра; для менее широких окон браузеров используется фото с шириной равной полной области просмотра. В каждом случае браузер выбирает оптимальное изображение из набора изображений с шириной в 200px, 400px, 800px, 1200px, 1600px и 2000px, принимая во внимание ширину и разрешение экрана. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.
Смена размеров изображения, изображения высокого разрешения, различные типы изображения и разное содержимое
Для окон браузеров с шириной в 1280 CSS пикселов и шире используется полноэкранное фото с шириной 50% области просмотра; для окон браузеров с шириной в 640-1279 CSS пикселов используется фото с шириной в 60% области просмотра; для менее широких окон браузеров используется фото с шириной равной полной области просмотра. В каждом случае браузер выбирает оптимальное изображение из набора изображений с шириной в 200px, 400px, 800px, 1200px, 1600px и 2000px, принимая во внимание ширину и разрешение экрана. Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.
Есть о чём задуматься!
Не переживайте, если вы не поняли это полностью! Скоро мы опубликуем полноценный урок по <picture> и отзывчивым изображениям. В это время наслаждайтесь подготовкой к улучшению линии пропуска ваших босса и пользователей и повышением производительности сайта.
Лишнее место под IMG
`;document. write(t),showTopNotification()}}
ARعربي
ENEnglish
ESEspañol
FAفارسی
FRFrançais
IDIndonesia
ITItaliano
JA日本語
KO한국어
RUРусский
TRTürkçe
UKУкраїнська
ZH简体中文
Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.
КупитьEPUB/PDF
June 7, 2022
Иногда под IMG «вдруг» появляется лишнее место. Посмотрим на эти грабли внимательнее, почему такое бывает и как этого избежать.
Посмотрите внимательно! Вы видите расстояние между рамками снизу? Это потому, что браузер резервирует дополнительное место под инлайновым элементом, чтобы туда выносить «хвосты» букв.
Вот так выглядит та же картинка с выступающим вниз символом рядом:
В примере картинка обёрнута в красный TD. Таблица подстраивается под размер содержимого, так что проблема явно видна. Но она касается не только таблицы. Аналогичная ситуация возникнет, если вокруг IMG будет другой элемент с явно указанным размером, «облегающий» картинку по высоте. Браузер постарается зарезервировать место под IMG, хотя оно там не нужно.
Самый лучший способ избежать этого – поставить display: block таким картинкам:
А вот, как браузер отобразит соседние символы в этом случае: p<img src="square.png">p
С другой стороны, сама строка никуда не делась, изображение по-прежнему является её частью, а браузер планирует разместить другое текстовое содержимое рядом, хоть и сверху. Поэтому если изображение маленькое, то произойдёт дополнение пустым местом до высоты строки:
Например, для <img src="square.png">:
Таким образом, требуется уменьшить ещё и line-height контейнера. Окончательное решение для маленьких изображений с vertical-align:
Пробелы под картинками появляются, чтобы оставить место под «хвосты» букв в строке. Строка «подразумевается», т.к. display:inline.
Можно избежать пробела, если изменить display, например, на block.
Альтернатива: vertical-align:top (или bottom), но для маленьких изображений может понадобиться уменьшить line-height, чтобы контейнер не оставлял место под строку.
Краткое руководство Директива img-src Политика безопасности содержимого (CSP) защищает загрузку изображений (например, через HTML-тег.
Пример политики
Предположим, что Content-Security-Policy 9Заголовок 0018 задается следующей политикой:
img-src 'я' https://images.example.com;
Разрешает
С помощью указанной выше политики CSP изображения можно загружать из одного и того же источника (через значение списка источников 'self') или через URL-адреса, начинающиеся с: https://images.example.com
Блокирует
Вышеупомянутая политика будет блокировать любое изображение не того же происхождения или через https://images.example.com , поэтому CSP заблокирует следующее:
Что означает «img-src» не был задан явно?
Если директива img-src CSP не задана, но задана директива default-src CSP, будет применяться эта политика. Вам нужно либо убедиться, что значения атрибута img src соответствуют политике default-src, либо вам нужно добавить директива img-src к вашей политике CSP.
Вот несколько примеров того, что вы можете увидеть в консоли, когда загрузка изображений заблокирована политикой CSP с набором политик default-src :
отказался загрузить изображение, потому что оно нарушает следующую директиву политики безопасности контента: «default-src 'none'». обратите внимание, что img-src не был задан явно, поэтому в качестве запасного варианта используется default-src.
отказался загружать изображение «http://localhost:8080/favicon.ico», поскольку оно нарушает следующую директиву политики безопасности контента: «default-src 'none'». обратите внимание, что img-src не был задан явно, поэтому в качестве запасного варианта используется default-src.
Поддержка браузером
img-src
CSP уровня 1
Поддерживается:
Chrome 25+ (2013)
Firefox 23+ (201 3)
Сафари 7+ (2013)
Edge 12+ (2015)
Не поддерживается в:
Internet Explorer
Директива CSP img-src является частью спецификации политики безопасности содержимого с момента ее первой версии (CSP уровня 1).
Internet Explorer 11 и более ранние версии не поддерживают CSP директива img-src . Это означает, что IE11 просто проигнорирует политику и разрешит загрузку изображений из любого места (как если бы политика вообще не была установлена).
Полевое руководство для разработчиков CSP
Хотите узнать все тонкости CSP? Возьмите копию CSP Developer Field Guide . Это краткое и приятное руководство, которое поможет разработчикам быстро освоиться.
Получить копию
Пытаетесь быть в курсе рекомендаций по безопасности?
Advisory Week — это еженедельный обзор всех рекомендаций по безопасности, публикуемых основными поставщиками программного обеспечения.
Эрик работает евангелистом в Cloudinary и живет на прекрасном острове Оркас. Он любит визуальную коммуникацию, обучение через преподавание и строительство, а также…
Больше о
Эрик ↬
Несколько дней назад мы опубликовали статью о Picturefill 2.0, идеальном полифилле для адаптивных изображений. Сегодняшняя статья дополняет статью Тима Райта и объясняет, как именно мы можем использовать грядущие 9 лет.0017 Элемент и srcset с простыми запасными вариантами для устаревших браузеров. [Нет причин ждать адаптивных изображений; на самом деле мы можем получить их очень скоро.
Изображения являются одними из самых важных элементов информации в Интернете, но за 25-летнюю историю Интернета они вообще не были очень адаптируемыми. Все в них было упрямо исправлено: их размер, формат и обрезка, все высечено в камне одним src .
«Все, что я сказал до сих пор, можно резюмировать следующим образом: создавайте адаптируемые страницы… Разработка адаптируемых страниц — это разработка доступных страниц. трудности, к информации».
— Джон Оллсопп, Дао веб-дизайна
HTML-авторы начали ощущать эти ограничения, когда экраны с высоким разрешением и адаптивные макеты поразили Интернет, как раз-два удара. Авторы, желая, чтобы их изображения выглядели четкими в огромных макетах и на экранах с высоким разрешением, начали рассылать всем источники все большего и большего размера; средний размер файла изображения увеличился; очень умные люди назвали адаптивный веб-дизайн «невероятно медленным».
Изображения были препятствием номер один к реализации действительно адаптируемых и производительных адаптивных страниц — страниц, которые масштабируются как вверх, так и вниз, эффективно адаптируясь как к ограничениям, так и к возможностям текущего контекста просмотра.
Это скоро изменится.
Последняя спецификация элемента является результатом многолетних споров о том, как сделать так, чтобы изображения адаптировались. Это дает авторам семантические способы группировать несколько версий одного и того же изображения, причем каждая версия имеет технические характеристики, которые делают ее более или менее подходящей для конкретного пользователя. Новая спецификация достигла широкого консенсуса и внедряется в Chrome, Opera, Firefox и Edge (ссылка) по мере того, как я печатаю.
Самое время начать изучать этот материал сейчас !
Больше после прыжка! Продолжить чтение ниже ↓
Прежде чем мы перейдем к какой-либо разметке ( блестящий! новый! ), давайте рассмотрим соответствующие способы изменения среды просмотра, то есть способы, которыми мы хотим, чтобы наши изображения адаптировались.
Наши изображения должны иметь возможность четко отображать устройство-пиксельное соотношение с. Мы хотим, чтобы экраны с высоким разрешением получали изображения с высоким разрешением, но мы не хотим отправлять эти изображения пользователям, которые не увидят все эти лишние пиксели. Назовем это 9Вариант использования 0017 device-pixel-ratio .
Если наш макет гибкий (т. е. адаптивный), то наши изображения должны будут сжаться и растянуться, чтобы соответствовать ему. Мы назовем этот вариант использования плавного изображения.
Обратите внимание, что эти два варианта использования тесно связаны: для решения обоих нам нужно, чтобы наши изображения были доступны в нескольких разрешениях, чтобы они эффективно масштабировались. Мы будем называть решение обеих проблем одновременно вариантом использования изображения переменного размера
Иногда нам нужно адаптировать наши изображения способами, выходящим за рамки простого масштабирования. Мы можем захотеть обрезать изображения или даже слегка изменить их содержимое. Мы назовем это вариантом использования арт-директора.
Наконец, разные браузеры поддерживают разные форматы изображений. Мы могли бы захотеть отправить модный новый формат, такой как WebP, в браузеры, которые могут его отображать, и вернуться к проверенным старым JPEG в браузерах, которые этого не делают. Мы назовем это вариантом использования с переключением типов.
Новая спецификация включает функции для всех этих случаев. Давайте посмотрим на них один за другим.
Переупорядочивать изображения для разных разрешений относительно легко, однако загружать разные изображения (и только их) в зависимости от разрешения пользователя довольно сложно. Ну, не больше. (Изображение предоставлено) Отношение устройств к пикселям Вариант использования
Начнем просто с изображения фиксированной ширины, которое мы хотим адаптировать к различным отношениям устройств к пикселям с. Для этого воспользуемся первым инструментом, который дает нам новая спецификация для группировки и описания источников изображений: атрибутом srcset .
Допустим, у нас есть две версии изображения:
small.jpg (320 × 240 пикселей)
large.jpg (640 × 480 пикселей)
Мы хотим отправить large.jpg только пользователям с экранами высокого разрешения. Используя srcset , мы разметили бы наше изображение следующим образом:
Атрибут srcset принимает список URL-адресов изображений, разделенных запятыми, каждый из которых имеет дескриптор x , указывающий отношение устройств к пикселям , для которого предназначен этот файл.
src предназначен для браузеров, которые не понимают исходный набор . alt , конечно же, включен для браузеров, которые вообще не отображают изображения. Один элемент и три атрибута дают нам изображение, которое выглядит четким на устройствах с высоким разрешением и эффективно ухудшается вплоть до текста. Не слишком потертый!
Сценарии использования гибких изображений и изображений переменного размера
Чего эта разметка не сделает, так это эффективно сожмет и растянет наше изображение в гибком макете. Прежде чем перейти к этому варианту использования изменчивого изображения, нам нужно немного узнать о том, как работают браузеры.
Предварительная загрузка изображений — это, по словам Стива Содерса, «самое большое улучшение производительности, которое когда-либо делали браузеры». Изображения часто являются самыми тяжелыми элементами на странице; загрузка их как можно скорее отвечает интересам каждого. Таким образом, первое, что браузер сделает со страницей, — просканирует HTML в поисках URL-адресов изображений и начнет их загрузку. Браузер делает это задолго до того, как сконструирует DOM, загрузит внешний CSS или нарисует макет. Таким образом, решить вариант использования плавного изображения сложно; нам нужно, чтобы браузер выбрал источник, прежде чем он узнает размер отображаемого изображения.
То, что браузер всегда знает, так это среду, которую он отображает в : размер области просмотра, разрешение экрана пользователя и тому подобное. Мы используем эту информацию, когда используем медиа-запросы, которые адаптируют наши макеты к конкретным средам просмотра.
Таким образом, чтобы обойти проблему с предварительной загрузкой, в первых предложениях по функциям гибкого изображения предлагалось присоединять медиа-запросы к источникам. Мы бы основывали наш механизм выбора источника на размере окна просмотра, который браузер знает во время выбора, а не на окончательном отрендеренном размере изображения, которого он не знает.
Работа с адаптивными изображениями оказалась настоящим кошмаром. Лучший способ предоставить браузеру сведения о его окружении — просто сообщить браузеру отображаемый размер изображения. Вроде очевидно, правда. (Изображение предоставлено)
Как оказалось, это плохая идея. Хотя это технически выполнимо, вычисление необходимых медиа-запросов утомительно и подвержено ошибкам. Лучшая идея — просто сообщить браузеру отображаемый размер изображения !
Как только мы сообщаем браузеру, сколько у него пикселей требуется (с помощью нового атрибута размеров ) и сколько пикселей имеет каждый из источников (через дескрипторы w в srcset ), выбор источника становится тривиальным. Браузер выбирает наименьший источник, который все еще будет выглядеть достаточно четким в своем контейнере.
Давайте сделаем это конкретным, развивая наш предыдущий пример. Предположим, теперь у нас есть три версии нашего изображения:
large.jpg (1024 × 768 пикселей)
medium.jpg (640 × 480 пикселей)
small.jpg (320 × 240 пикселей)
И мы хотим поместить их в гибкую сетку — сетку, которая начинается как один столбец, но переключается между ними. до трех столбцов в больших окнах просмотра, например:
Пример адаптивной сетки. (см. демонстрацию)
Вот как мы его разметим:
Мы снова используем srcset , но вместо дескрипторов x мы присоединяем к нашим источникам дескрипторы w . Они описывают фактическую ширину в пикселях файла, на который делается ссылка. Итак, если вы «Сохранить для Интернета…» с разрешением 1024 × 768 пикселей, то разметьте этот источник в srcset как 1024w .
Обратите внимание, что мы указываем только ширину изображения . А почему не высоты? Изображения в нашем макете ограничены по ширине; их ширина явно задается CSS, а высота — нет. Подавляющее большинство адаптивных изображений в дикой природе также ограничены по ширине, поэтому спецификация упрощает работу, имея дело только с шириной. Есть несколько веских причин для включения высоты, но не сейчас.
Итак, это w в srcset , который описывает, сколько пикселей имеет каждый из наших источников . Далее, атрибут размеров . Атрибут размеры сообщает браузеру, сколько пикселей ему нужно , описывая окончательную визуализируемую ширину нашего изображения. Думайте о размерах как о способе немного заблаговременно дать браузеру немного информации о макете страницы, чтобы он мог выбрать источник до того, как он проанализирует или отобразит какой-либо CSS страницы.
Мы делаем это, передавая браузеру длину CSS, которая описывает визуализируемую ширину изображения. Длина CSS может быть либо абсолютной (например, 99px или 16em ), либо относительно области просмотра ( 33.3vw , как в нашем примере). Эта часть «относительно области просмотра» позволяет изображениям изгибаться.
Если наше изображение занимает треть области просмотра, то наш атрибут размеры должен выглядеть так:
размеры = "33.3vw"
Наш пример не так прост. Наш макет имеет точку останова на 36 ems. Когда окно просмотра уже, чем 36 ems, макет меняется. Ниже этой точки останова изображение будет занимать 100% ширины области просмотра. Как мы закодируем эту информацию в нашем размеры атрибут?
Мы делаем это, соединяя медиазапросы с длинами:
размеры="(мин-ширина: 36em) 33.3vw,
100vw"
Это его формат:
размеры="[медиа-запрос] [длина],
[медиа-запрос] [длина],
и т. д…
[длина по умолчанию]"
Браузер просматривает каждый медиа-запрос, пока не найдет подходящий, а затем использует длину пары соответствующего запроса. Если нет совпадений медиа-запросов, браузер использует длину «по умолчанию», т. е. любую длину, с которой он сталкивается, не имеющую парного запроса.
Имея на выбор размеров длины и набор источников с w дескрипторами в srcset , у браузера есть все необходимое для эффективной загрузки изображения в гибком, адаптивном макете.
Замечательно, размеров и w в srcset также дают браузеру достаточно информации, чтобы адаптировать изображение к различным соотношениям пикселей устройства s. Преобразовав длину CSS, мы даем размеров в пиксели CSS; и, умножив это на 9 пользователей0017 device-pixel-ratio , браузер знает количество пикселей устройства, которое ему нужно заполнить — независимо от того, какое у пользователя значение device-pixel-ratio .
Таким образом, в то время как пример в нашем сценарии использования device-pixel-ratio работает только для изображений с фиксированной шириной и охватывает только экраны 1x и 2x, этот пример srcset и размеров охватывает не только использование гибких изображений. случае, но и адаптируется к произвольной плотности экрана.
Мы решили обе проблемы сразу. Говоря языком, изложенным в начале этой статьи, w в srcset и размеры охватывают вариант использования изображения переменного размера.
Что еще более удивительно, эта разметка также дает браузеру некоторое пространство для маневра . Прикрепление определенных условий просмотра к источникам означает, что браузер делает выбор на основе строгого набора условий. «Если экран высокого разрешения, — говорим мы браузеру, — то вы должны использовать этот источник». Просто описав размеры ресурсов с помощью w в srcset и область, которую они будут занимать с размерами , мы позволяем браузеру применять свои дополнительные знания о среде данного пользователя для решения проблемы выбора источника. Спецификация позволяет браузерам, скажем, опционально загружать источники меньшего размера, когда полоса пропускания медленная или дорогая.
Еще кое-что. В нашем примере размер изображения всегда представляет собой простой процент от ширины области просмотра. Что, если бы наш макет объединил как абсолютную, так и относительную длину, скажем, добавив фиксированную боковую панель размером 12 em к макету из трех столбцов, как здесь?
Макет сочетает в себе абсолютную и относительную длину. (См. демонстрацию)
Мы использовали бы удивительно хорошо поддерживаемую функцию calc() в нашем атрибуте размеров .
Теперь мы готовим на газу! Мы научились размечать изображения переменного размера, которые эффективно увеличиваются и уменьшаются, обеспечивая четкое отображение на любых макетах, окнах просмотра и экранах.
Но что, если мы хотим пойти дальше? Что, если бы мы хотели адаптироваться больше?
Когда в прошлом году Apple представила iPad Air, на ее веб-сайте было размещено огромное изображение устройства. Это может показаться довольно непримечательным, если только вы — как обычно делают гики веб-дизайна — навязчиво не изменили размер окна браузера. Когда область просмотра была достаточно короткой, iPad делал замечательную вещь: он поворачивался, чтобы лучше соответствовать области просмотра!
Мы называем такие вещи «художественным направлением».
Apple управляла своим изображением, злоупотребляя HTML и CSS: размечая свое изображение — которое явно содержало — как пустую div и переключение его background-image с помощью CSS. Новая спецификация позволяет авторам делать такое художественное направление на основе точек останова полностью в HTML.
Спецификация облегчает это, накладывая другой метод группировки источников поверх srcset : и source .
Вернемся к нашему примеру. Предположим, что вместо того, чтобы позволить нашему изображению заполнять всю ширину окна просмотра на маленьких экранах, мы обрезаем квадрат изображения, увеличивая наиболее важную часть объекта, и представляем этот маленький квадрат фиксированного размера, смещенный влево. , оставив много места для описательного текста, например:
Пример с изображениями в сочетании с описательным текстом. (см. демонстрацию)
Для этого нам понадобится несколько дополнительных источников изображений:
croped-small.jpg (96 × 96 пикселей)
croped-large.jpg (192 × 192) пикселей)
small.jpg (320 × 240 пикселей)
medium.jpg (640 × 480 пикселей)
large.jpg (1024 × 768 пикселей) 9000 4
Как мы их наценим ? Вот так:
<картинка>
Этот пример настолько сложен, насколько это возможно, в нем используются все функции, которые мы рассмотрели до сих пор. Давайте сломаем это.
Элемент содержит два источник s и img . Исходники представляют собой две отдельные художественные версии изображения (квадратная обрезка и полная обрезка). (Обязательный) img служит нашим запасным вариантом. Как мы скоро обнаружим, большую часть фактической работы он выполняет за кулисами.
Во-первых, давайте внимательно посмотрим на этот первый источник :
Этот источник представляет полную необрезанную версию нашего изображения. Мы хотим показывать полное изображение только в трехколоночной раскладке — то есть, когда окно просмотра шире 36 ems. Первый атрибут здесь, media=“(min-width: 36em)” , делает это возможным. Если запрос в атрибуте media оценивается как true , тогда браузер должен использовать этот источник ; в противном случае оно пропускается.
Источник Два других атрибута — srcset и размеры — в основном скопированы из нашего предыдущего примера с изображением переменного размера. Одно отличие: поскольку этот источник будет выбран только для макета с тремя столбцами, нашему атрибуту размеры нужна только одна длина, 33.3vw .
Когда область просмотра уже 36 ems, медиа-запрос первого источника будет оцениваться как false , и мы перейдем ко второму:
Представляет наш небольшой квадратный урожай. Эта версия отображается с фиксированной шириной, но мы по-прежнему хотим, чтобы она отображалась четко на экранах с высоким разрешением. Таким образом, мы предоставили версии 1x и 2x и разметили их простыми дескрипторами x .
Наконец, мы подошли к удивительно важному ( действительно требуется! ) img .
Любой дочерний элемент audio или video , который не является источником , рассматривается как запасной контент и скрывается в поддерживающих браузерах. Следовательно, вы могли бы предположить то же самое о img здесь. Неправильный! Пользователи на самом деле видят элемент img , когда мы используем . Без img изображения нет; и все его source просто существуют, чтобы кормить его источником.
Почему? Одна из основных жалоб на первую спецификацию заключалась в том, что она заново изобрела колесо, предложив совершенно новый мультимедийный элемент HTML, аналогичный аудио и видео 9.0018 , который в основном дублировал функциональность img . Дублированная функциональность означает дублирование работы по внедрению и обслуживанию — работу, которую производители браузеров не стремились выполнять.
Таким образом, повторное использование новой спецификации img . Сам невидим, немного похож на волшебный span . Его исходные s предназначены только для того, чтобы браузер мог рисовать альтернативные версии изображения. Как только исходный URL-адрес выбран, этот URL-адрес передается в изображение . На практике это означает, что любые стили, которые вы хотите применить к визуализируемому изображению (например, max-width: 100% ), должны применяться к img , а не к .
Итак, переходим к нашей последней функции.
Вариант использования с переключением типов
Предположим, что вместо того, чтобы делать все это сжатие, растяжение и адаптацию к бесчисленным условиям области просмотра, мы просто хотим дать новый формат файла и предоставить запасной вариант для неподдерживающих браузеров. . Для этого мы следуем схеме, установленной аудио и видео : тип источника .
<картинка>
Если браузер не понимает тип мультимедиа image/svg , он пропускает первый источник ; если он не может сделать орёл или решка image/png , то он возвращается к img и GIF.
Во время чрезвычайно болезненного периода перехода от GIF к PNG веб-дизайнеры убили бы за такую возможность. Элемент дает нам это, готовя почву для легкого внедрения новых форматов изображений в ближайшие годы.
Вот оно!
Вот и все: каждая функция в новой спецификации и ее обоснование. Всего srcset , x , w , размеры , , source , media и type дают нам богатый набор инструментов, с помощью которых можно сделать изображения действительно адаптируемыми — изображения, которые могут ( наконец! ) эффективно перемещаться в гибких макетах и широкий выбор устройств.
При создании этих примеров, я держал в голове
этот ночной снимок оперного зала Осло —- он может оказаться полезным для вас.
currentSrc || image.src
currentSrc || image.src
jpg" alt="The Oslo Opera House"
srcset="opera-2x.jpg 2x, opera-3x.jpg 3x">
webp 1x,
opera-2x.webp 2x,
opera-3x.webp 3x"
type="image/webp">
<img
src="opera-1x.jpg" alt="The Oslo Opera House"
srcset="opera-2x.jpg 2x,
opera-3x.jpg 3x">
</picture>
Браузер выбирает оптимальное изображение из выборки изображений с шириной в 200px, 400px, 800px и 1200px, принимая во внимание ширину изображения и разрешение экрана.
Эти фото выдаются в WebP формате для поддерживающих его браузеров; остальные браузеры получают JPG.
jpg 200w,
opera-closeup-400.jpg 400w,
opera-closeup-800.jpg 800w,
opera-closeup-1200.jpg 1200w">
</picture>
jpg 400w,
opera-800.jpg 800w,
opera-1200.jpg 1200w,
opera-1600.jpg 1600w,
opera-2000.jpg 2000w">
jpg 200w,
opera-closeup-400.jpg 400w,
opera-closeup-800.jpg 800w,
opera-closeup-1200.jpg 1200w,
opera-closeup-1600.jpg 1600w,
opera-closeup-2000.jpg 2000w">
</picture>
webp 800w,
opera-1200.webp 1200w,
opera-1600.webp 1600w,
opera-2000.webp 2000w"
type="image/webp">
<img
src="opera-fallback.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.jpg 200w,
opera-400.jpg 400w,
opera-800.jpg 800w,
opera-1200.jpg 1200w,
opera-1600.jpg 1600w,
opera-2000.jpg 2000w">
</picture>
webp 200w,
opera-fullshot-400.webp 400w,
opera-fullshot-800.webp 800w,
opera-fullshot-1200.webp 1200w,
opera-fullshot-1600.webp 1600w,
opera-fullshot-2000.webp 2000w"
type="image/webp">
<source
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-closeup-200.webp 200w,
opera-closeup-400.webp 400w,
opera-closeup-800.webp 800w,
opera-closeup-1200.webp 1200w,
opera-closeup-1600.webp 1600w,
opera-closeup-2000.webp 2000w"
type="image/webp">
<source
media="(min-width: 1280px)"
sizes="50vw"
srcset="opera-fullshot-200.jpg 200w,
opera-fullshot-400.jpg 400w,
opera-fullshot-800.jpg 800w,
opera-fullshot-1200.jpg 1200w,
opera-fullshot-1600.jpg 1800w,
opera-fullshot-2000.jpg 2000w">
<img
src="opera-fallback.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-closeup-200.jpg 200w,
opera-closeup-400.jpg 400w,
opera-closeup-800.jpg 800w,
opera-closeup-1200.jpg 1200w,
opera-closeup-1600.
jpg 1600w,
opera-closeup-2000.jpg 2000w">
</picture>
write(t),showTopNotification()}}
Окончательное решение для маленьких изображений с 
Он любит визуальную коммуникацию, обучение через преподавание и строительство, а также…
Больше о
Эрик ↬
Авторы, желая, чтобы их изображения выглядели четкими в огромных макетах и на экранах с высоким разрешением, начали рассылать всем источники все большего и большего размера; средний размер файла изображения увеличился; очень умные люди назвали адаптивный веб-дизайн «невероятно медленным».
Мы назовем этот вариант использования плавного изображения.
Давайте сломаем это.
