|
Адаптивные изображения: атрибут srcset и sizes
|
|
| Kosten | Суббота, 28 Июля 2018 | Сообщение 1 |
| В Интернете есть несколько отличных руководств в которых подробно объясняется как использовать отзывчивые изображения, используя атрибуты srcset и размеры тега и более сложный, как тег picture. Они обычно объясняют технические детали двух методов реализации реагирующих изображений и их соответствующих преимуществ. Но они редко дают вам советы о том, как использовать теги , особенно с точки зрения выбора размеров картинки для фактической вставки в теги.
В революционном продвижение веб дизайна для снимка или картинки, где еще одна вещь, которая, казалось бы отставала. Все происходило до некоторого времени обслуживание разноплановых картинок или изображение на основе реального размера полноценного экрана или просто за плотностью пикселя не было чем-то, что было сделано вообще.
Сайты как это обычно бывает в последнее время, полны больших изображений, где часто используемых в полно страничном режиме, что иногда в качестве фона для текста, а также как преобладающий контент на странице. Изображения могут принимать 100% ширины страницы, но в зависимости от выбора дизайнеров они могут принимать переменный процент экрана, в часто этот процент изменяется в соответствии с текущей точкой останова.
При применении атрибута srcset на многих изображениях на сайтах я не был на 100% удовлетворен моим выбором размеров изображений, которые были сделаны с использованием нескольких советов, доступных в интернете, и путем ручного тестирования на диапазоне браузеров. Я решил, что хочу действовать на основе некоторого анализа эмпирических данных вместо абстрактного понимания проблемы.
Существует несколько факторов, влияющих на управление отзывчивыми изображениями, некоторые из которых:
1. Размер экрана конечного пользователя;
2. Возможности браузера конечного пользователя;
3. Разрешение экрана конечного пользователя;
4. Полоса пропускания конечного пользователя, где какой-то мобильный браузер может учитывать это при запросе изображений, что действительно не знаю, делают они это или нет;
5. Ширина изображения в макете в процентах от экранной недвижимости, занимаемой изображением;
6. Разная ширина изображения в зависимости от точки останова (например, изображение продукта на веб-сайте электронной коммерции может занимать менее 33% экрана при разрешении рабочего стола, если продукты распределены в строках 3 и возможно, 50% или 100% на мобильном телефоне, где они распределены в строках 2 или один под другим;
7. Различная форма изображения в зависимости от точки останова , где изображение полностью отличается в зависимости от компоновки, например показывать фотографию полного человека на рабочем столе и лицо только на мобильном устройстве. Это довольно экстремальный случай и для этого требуется довольно сложная команда разработчиков, так как в общем случае изображения должны быть разрезаны, чтобы соответствовать каждому макету. Обычно они требуют тег picture и по моему опыту работы, имеют более редкий случай, и они не будут рассматриваться.
Элемент picture показывает большое обещание в изменении этого. Но независимо от того, используется ли элемент изображения вообще, есть два атрибута, которые являются ключевыми в предоставлении реагирующих изображений - srcsetи сопровождающих sizes.
Как включить отзывные изображения
Существует несколько способов обеспечения гибкого поведения изображений. Один из старых методов (не рекомендуется) - это простой скриптинг, но это приводит к возникновению нескольких проблем. Один, если скрипт определяет, какое изображение загружаться, но сам сценарий загружается после загрузки изображений, указанных в HTML, вы можете в конечном итоге получить два загруженных изображения. Во-вторых, если вы не укажете какое-либо изображение в HTML и хотите загрузить только изображение, определенное сценарием, у вас не будет никакого изображения для браузеров, у которых отключены сценарии.
Атрибут srcset
Прежде чем мы рассмотрим, как srcsetна самом деле используется, давайте разобраться в нескольких терминах:
При рассмотрение картинки, здесь идет следующее информация на каждое изображение:
1. Это безусловно путь к файлу где находится картинка;
2. Не забываем про плотность пикселей и также основную ширину изображение;
Для того, чтобы узнать плотность пикселей, то здесь добавляем х к числу плотности для изображение.
Например:
Код <img src="Ссылка на изображение" srcset="two.png 2x, three.png 3x, four.png 4x">
Все определяется при при помощи атрибута src, предполагается что имеет глубину 1x.
Для того, чтоб узнать ширину снимка, нужно добавить w к ширине в пикселях для нее.
Например:
Код <img src="one.png" srcset="two.png 100w, three.png 500w, four.png 1000w">
Важно: Так как при указании ширины в атрибуте srcset, мы можем определять атрибут sizes.
Атрибут sizes
Атрибут sizes будет отвечать за определение размер картинки, что должен быть выставлено в соответствии с media условиями.
Код <img src="one.png"
srcset="two.png 100w, three.png 500w, four.png 1000w"
sizes="<media condition> <width>,
<media condition> <width>,
<optional default image width>">
Медиа условия
Media условия не совсем тоже, что media-запросы. Они является частью media-запросов. Они не позволяют нам определить тип носителя, например, screen или printer, но принимают условия, которые мы обычно добавляем к типу носителя.
Ширина
Ширина может содержать практически любое значение длины, например, em, rem, pixels, и viewport width.
Однако, процентные значения не допускаются, "чтобы избежать путаницы в том, что будет относительно". Значение vw рекомендуется в качестве альтернативы, если требуется относительная величина.
Собираем вместе
Добавляем медиа-условия и ширину вместе
Код <img src="one.png"
srcset="two.png 100w, three.png 500w, four.png 1000w"
sizes="(min-width: 900px) 1000px,
(max-width: 900px) and (min-width: 400px) 50em,
( not (orientation: portrait) ) 300px,
( (orientation: landscape) or (min-width: 1000px) ) 50vw,
100vw">
Если медиа-условие истинно, браузер пользователя будет использовать изображение, основываясь на значениях указанных в атрибуте srcset.
Поддержка браузерами
Атрибуты srcset и sizes относительно хорошо поддерживаются.
Для браузеров, которые не поддерживают эти атрибуты, изображение извлекается из обычного атрибута src и отображается одинаково при любых медиа-условиях.
| | Страна: (RU) |
| |
| Kosten | Суббота, 28 Июля 2018 | Сообщение 2 |
|
| Одной из основных проблем с адаптивным дизайном является обработка изображений. Дело не в том, что мы не знаем, что хотим. Дело в том, что способности делать это не хватало. К счастью, ситуация начинает меняться к лучшему.
Как и многие дизайнеры, я сидел на боковой линии, ожидая откликов, чтобы разобраться в себе. В предыдущем обзоре того, как решить проблемы с отзывчивым изображением, я ушел с чувством, что решения обычно были больше проблем, чем они стоили для себя и моих типичных клиентов.
Для более крупных организаций имеет смысл использовать лучшие решения, но для большинства людей выгоды не оправдывают время, усилия и бюджет. Поскольку ни мои клиенты, ни я сами не являются крупными организациями, имеет смысл подождать спецификации и технологии, чтобы увидеть, что они принесут.
Оказывается, было больше обложки, чем я думал, поэтому это будет многонедельная тема. Сегодня я расскажу о поддержке фона, истории и браузера, прежде чем вникать в атрибут srcset и атрибут связанных размеров.
В ближайшие недели мы рассмотрим элемент изображения и какой метод лучше всего использовать, когда. У меня есть демо-план, а также несколько дополнительных тем и общие мысли об откликах.
Немного истории
Если вы не знакомы с какой-либо историей за отзывчивыми изображениями, особенно в отношении новых спецификаций в html для их обработки, я постараюсь изо всех сил подвести итог.
С самого начала было два лагеря с разными подходами к переключению изображений. Производители браузера поддерживают srcset в значительной степени по соображениям производительности. Позволяя браузерам принимать решение, браузер может их оптимизировать.
Дизайнеры и разработчики, с другой стороны, вообще поддержали элемент изображения, потому что синтаксис более естественен и потому, что элемент изображения дает нам контроль вместо того, чтобы оставлять его с разработчиками браузеров. Оба подхода имеют свои достоинства, а также их трудности.
Атрибут srcset чаще всего «выигрывал» эту битву, и какое-то время казалось, что элемент изображения никогда не появится. В итоге мы получаем как srcset, так и картинку, дающие нам инструменты для решения некоторых основных проблем, связанных с работой с отзывчивыми изображениями.
Поддержка браузера и тестирование
В настоящий момент поддержка браузера невелика, но идет поддержка, и, учитывая важность, я не сомневаюсь, что очень скоро будут поддерживаться последние версии всех браузеров. Поскольку я пишу это, вот как все ломается.
Srcset атрибут поддерживается в последних версиях Chrome, Opera, Android Browser и Chrome для Android. Safari предлагает частичную поддержку. Он не поддерживает атрибут size, который может использоваться в сочетании с srcset. Firefox, Internet Explorer и Opera Mini не поддерживают.
Элемент изображения имеет немного меньшую поддержку. Он полностью работает в последних версиях Chrome, Opera и Chrome для Android. В настоящее время ни один другой браузер не предлагает даже частичную поддержку.
Вещи, кажется, движутся быстро, и я ожидаю, что браузеры будут поддерживать как srcset, так и элемент изображения раньше, чем позже. Не допускайте, чтобы текущая нехватка поддержки не позволяла вам использовать srcset и картинку. Скотт Йелл поддерживает полигон заполнения картинки на GitHub. Он поддерживает srcset, элемент изображения и связанные с ним теги и атрибуты.
Одна из проблем, которые могут возникнуть при тестировании изображений с высоким разрешением DPI. Я знаю, что это проблема для меня. Мой планшет и телефон могут обрабатывать изображения @ 2x, но аппаратное обеспечение переходит на @ 3x. Мой ноутбук - только 1x1. Один из методов тестирования - посетить магазины, продающие устройства, на которых вы хотите протестировать, однако есть и другие подходы.
Инструменты разработчика в браузерах получили неплохую, а некоторые можно настроить, чтобы вы могли тестировать изображения с высокой плотностью пикселей. Вот некоторая информация, которую я нашел для тестирования изображений с высокой плотностью.
Я не могу честно сказать, что они работают. Я только пробовал в Chrome и мои инструменты разработчика выглядели иначе, чем эти снимки экрана, которые я видел.
- Хром
- Сафари
- Опера
Тем не менее, мне удалось выполнить тестирование в Chrome. Масштабирование до 200% и уменьшение размера шрифта по умолчанию от 100% до 50% в моей таблице стилей эффективно имитируют разрешение @ 2x. У Matt Zeunert также есть хорошая статья с общим советом по тестированию кросс-кроверов, включая некоторые мысли о плотности пикселей в браузерах.
Я не уверен, что Internet Explorer предлагает аналогичный способ установить плотность пикселей. Лучшее, что я смог найти, - это сброс масштабирования dpi в самой Windows. Если кто-то знает больше, оставьте комментарий, чтобы я мог добавить IE.
Как работает атрибут srcset
Основная идея атрибута srcset - предоставить информацию браузерам, чтобы помочь им определить, какое изображение будет отображаться на основе плотности пикселей как изображения, так и экрана. Предоставление браузерам возможности выбора алгоритмов сделает более быстрым выбор, в котором будут отображаться изображения.
Вы добавляете атрибут srcset в тег img, как вы видите в примере ниже.
Код <img src="default-image.jpg"
srcset="image-1.5.jpg 1.5x, image-2.0.jpg 2x"
width="600" alt="Ключевое слово">
Помимо атрибута srcset, это обычный img с атрибутами src, width и alt. Src устанавливает образ по умолчанию, который будет использоваться не поддерживающими браузерами и могут использоваться для поддержки браузеров в зависимости от условий.
Атрибут srcset содержит список изображений вместе с плотностью отображения этого изображения. Обратите внимание, что это один атрибут с разделенным запятыми списком изображений и плотностей. Если вы создаете изображение @ 3x, вы должны добавить его в конец списка.
Браузеры затем используют небольшую математику, чтобы выяснить, какое изображение использовать . Скажем, устройство, на которое распространяется 320 пикселей, загружает эту страницу. 600 пикселей (ширина изображения), разделенная на 320 пикселей (ширина экрана), дает значение 1,875. В идеале изображение с этой плотностью представлено в списке, но, поскольку его нет, браузер решил бы, будет ли изображение размером 1.5x или 2.0x лучшим изображением для отображения.
| | Страна: (RU) |
| |
| Kosten | Суббота, 28 Июля 2018 | Сообщение 3 |
|
| Атрибут размеров
Атрибут размеров дает вам возможность сообщать обозревателям о выборе разных изображений в зависимости от их размера и размера видового экрана, который они будут занимать.
Идеальным было бы позволить браузерам выбирать, как они делают для различий разрешений, но используемые размеры изображения потребуют сначала знать макет страницы. Браузеры могут это сделать, но если мы дадим им некоторую информацию заранее, мы сможем сохранить их время и не дать им загружать больше изображений, чем это необходимо.
Код <img sizes="100vw"
srcset="width-400.jpg 400w,
width-800.jpg 800w,
width-1600.jpg 1600w"
src="width-400.jpg: alt="ZorNet.Ru: Портал Вебмастера">
Вышеприведенный код отличается от предыдущего. Начиная снизу, изображение по умолчанию имеет атрибут src, а также атрибут alt.
Атрибут scrts (выше src) похож на предыдущий пример, так как это запятая, отдельный список изображений плюс что-то еще. Вместо 1.5x, 2x, 3x мы теперь видим 400w, 800w, 1600w. Значения w говорят браузеру, что это изображение шириной 400 пикселей, шириной 800 пикселей.
Атрибут размеров, где обратите внимание на множественные размеры, который содержит информацию, которую вы предоставляете браузерам, чтобы они могли выбрать изображение. В этом коде размеры имеют одно значение 100vw, что означает, что изображение должно заполнить 100% ширины окна просмотра. Кстати, 100vw - это значение по умолчанию, если значение не задано.
Поскольку размер определяется как 100% окна просмотра, это та же самая математика, что и раньше (ширина изображения - ширина экрана = плотность пикселей). Предположим, что на странице расположено устройство размером 600 пикселей.
400/600 = 0,67
800/600 = 1,25
1600/600 = 3,20
Затем браузер будет выбирать лучшее изображение на основе приведенных выше результатов и плотности пикселей экрана. Атрибут размеров может показаться не таким захватывающим, пока вы не осознаете, что вы не ограничены одним размером в качестве значения атрибута.
Код <img sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw,
33vw"
srcset="width-200.jpg 200w,
width-400.jpg 400w,
width-800.jpg 800w,
width-1600.jpg 1600w"
src="width-400.jpg" alt="My image">
В приведенном выше коде есть три возможных размера вместе с изображениями srcset и значением по умолчанию. Браузер, что открытый до 30 или менее, будет использовать 100vw. Браузер открывается более 30 м, но не более 50 м использует 50 Вт. Браузеры, более широкие, чем 50em, будут использовать 33vw. Оттуда математика такая же.
Предполагая, что 1em = 16px, представьте себе, что область просмотра 800px и 2x плотность отображают страницу. Окно просмотра - 50 м, поэтому оно будет использовать значение второго размера, которое равно 50 вольт. Half 800px - 400px, который используется в вычислениях.
200px / 400px = 0,5
400px / 400px = 1,0
800px / 400px = 2,0
1600px / 400px = 4.0
Так как экран имеет плотность в 2 пикселя, изображение 800px, вероятно, будет выбрано в этом сценарии.
В конечном итоге атрибут размеров обеспечивает большую гибкость в отношении того, какие изображения вы хотите отображать на основе ширины и разрешения видового экрана вместо одного разрешения. Тем не менее, вы все еще позволяете браузерам принимать решение о том, какой образ показывать.
Заключительные мысли
Разработчикам не потребовалось много времени, чтобы понять, что есть проблемы, которые необходимо решить при работе с отзывчивыми изображениями. Большинство решений по этому вопросу были слишком сложными, трудоемкими и дорогостоящими для большинства людей. Они по-прежнему являются областью более крупных организаций с большим количеством ресурсов для большей части.
Многие дизайнеры ждут новых спецификаций, которые облегчают работу с изображениями в гибких макетах. Потребовалось некоторое время и много битв, но спецификация становится яснее, и браузеры начинают поддерживать атрибут srcset и sizes вместе с элементом изображения.
Атрибут srcset - это простой способ предложить разные изображения для браузеров на основе их плотности пикселей . В сочетании с атрибутом размеров он может использоваться для указания того, какое изображение должен использовать браузер в зависимости от размера изображения и видового экрана, а также плотности пикселей.
Однако оба оставляют окончательное решение до браузера. Это хорошо, потому что он позволяет браузерам быстрее находить и загружать лучшее изображение, но иногда мы хотим сделать выбор самостоятельно.
| | Страна: (RU) |
| |
