Хотя это помогло мне как разработчику, это не было лучшим для аудитории. Что произойдет, если изображение в атрибуте src будет тяжелым? На устройствах высокого класса для разработчиков (например, у меня с 16 ГБ ОЗУ) проблем с производительностью практически нет. Но на бюджетных устройствах? Это другая история.
Приведенная выше иллюстрация недостаточно детализирована. Я из Нигерии, и если ваш продукт работает в Африке, вы не должны смотреть на это. Вместо этого посмотрите на этот график:
В настоящее время самый дешевый iPhone продается в среднем за 300 долларов. Среднестатистический африканец не может себе этого позволить, хотя iPhone является порогом для измерения быстрых устройств.
Это все, что нужно для бизнес-анализа, чтобы понять, что ширина CSS не влияет на адаптивные изображения. Что бы вы спросили? Позвольте мне сначала объяснить, о чем изображения.
Изображения привлекательны для пользователей, но являются трудной задачей для нас, разработчиков, которые должны учитывать следующие факторы:
Формат
Размер диска
Размер рендера (ширина и высота макета в браузере)
Исходный размер (исходная ширина и высота)
Соотношение сторон
Итак, как мы выбираем правильные параметры и ловко смешиваем и подбираем их для обеспечения оптимального опыта для вашей аудитории? Ответ, в свою очередь, зависит от ответов на эти вопросы:
Изображения создаются динамически пользователем или статически командой разработчиков?
Если ширина и высота изображения изменяются непропорционально, это повлияет на качество?
Все ли изображения отображаются с одинаковой шириной и высотой? Должны ли они иметь конкретное соотношение сторон при визуализации или совсем другое?
Что необходимо учитывать при представлении изображений в разных видовых экранах?
Запишите ваши ответы. Они не только помогут вам понять ваши изображения — их источники, технические требования и тому подобное — но также позволят вам сделать правильный выбор при доставке.
Предварительные стратегии доставки изображений
Доставка изображений произошла от простого добавления URL-адресов к атрибуту src в сложных сценариях. Прежде чем углубляться в них, давайте поговорим о множестве вариантов представления изображений, чтобы вы могли разработать стратегию как и когда доставлять и визуализировать ваши.
Во-первых, определите источники изображений. Таким образом, число случаев неясных краев может быть уменьшено, и изображения могут обрабатываться настолько эффективно, насколько это возможно.
В общем, изображения либо:
Динамический : динамические изображения загружаются аудиторией, созданной другими событиями в системе.
Статический : фотограф, дизайнер или вы (разработчик) создаете изображения для веб-сайта.
Давайте углубимся в стратегию для каждого из этих типов изображений.
Стратегия для динамических изображений
С статическими изображениями довольно легко работать. С другой стороны, динамические изображения сложны и подвержены проблемам. Что можно сделать, чтобы смягчить их динамическую природу и сделать их более предсказуемыми, как статические изображения? Две вещи: проверка и интеллектуальная обрезка .
Проверка
Изложите несколько правил для аудитории о том, что приемлемо, а что нет. В настоящее время мы можем проверить все свойства изображения, а именно:
Формат
Размер диска
Размеры
Соотношение сторон
Примечание: Размер рендеринга изображения определяется во время рендеринга, поэтому с нашей стороны нет проверки.
После проверки появится предсказуемый набор изображений, которые легче использовать.
Интеллектуальная обрезка
Еще одна стратегия обработки динамических изображений заключается в том, чтобы разумно их обрезать, чтобы избежать удаления важного содержимого и перефокусировки (или повторного центрирования) основного содержимого. Это трудно сделать. Однако вы можете воспользоваться искусственным интеллектом, предлагаемым инструментами с открытым исходным кодом или компаниями SaaS, которые специализируются на управлении изображениями. Пример приведен в следующих разделах.
После того, как стратегия была разработана для динамических изображений, создайте таблицу правил со всеми параметрами макета для изображений. Ниже приведен пример. Стоит даже изучить аналитику, чтобы определить наиболее важные устройства и размеры области просмотра.
Окно просмотра браузера
HP Ноутбук
PS4 Slim
Объектив камеры / соотношение сторон
<300
100 VW
100 VW
100 по объему / 1: 2
300-699
100 VW
100 VW
100 мас. / 1: 1
700 — 999
50 VW
50 VW
50 мас. / 1: 1
> 999
33 VW
33 VW
100 по объему / 1: 2
Голый (неоптимальный) минимум
Теперь оставьте в стороне сложности реагирования и просто делайте то, что у нас получается лучше всего — простую разметку HTML с CSS максимальной ширины.
Следующий код отображает несколько изображений:
Примечание: Многоточие (…) в URL-адресе изображения указывает папку, размер и стратегию обрезки, которые слишком подробны, чтобы включать их, поэтому отсечение позволяет сосредоточиться на том, что сейчас важно. Для полной версии см. Пример CodePen внизу.
Это самый короткий пример CSS в Интернете, который делает изображения отзывчивыми:
Если изображения не имеют одинаковой ширины и высоты, замените max-width на object-fit и установите значение cover .
В блоге Джо Франкетти о распространенных адаптивных макетах с помощью CSS Grid объясняется, как значение grid-template-columns делает весь макет адаптивным (отзывчивым).
См. Перо Grid Gallery Криса Нвамбы (@codebeast) на CodePen.
Однако вышесказанное — не то, что мы ищем, потому что …
Размер и вес изображения одинаковы как для устройств высокого, так и для низкого уровня, а также
мы могли бы хотеть быть более строгими с шириной изображения вместо того, чтобы установить его на 250 и позволить ему расти.
Ну, этот раздел охватывает «минимум», вот и все.
Варианты макета
Худшее, что может случиться с макетом изображения, — это неправильное управление ожиданиями. Поскольку изображения могут иметь различные размеры (ширину и высоту), мы должны указать способ визуализации изображений.
Должны ли мы разумно обрезать все изображения до одного размера? Должны ли мы сохранить соотношение сторон для окна просмотра и изменить соотношение для другого? Мяч на нашей площадке.
В случае изображений в сетке, таких как изображения в примере выше, с различными пропорциями, мы можем применить технику художественного направления для визуализации изображений. Художественное руководство может помочь достичь чего-то вроде этого:
Подробнее о переключении разрешения и художественном направлении в адаптивных изображениях читайте в серии Джейсона Григсби. Другим информативным справочником является Руководство по адаптивным изображениям Эрика Портиса, части 1, 2 и 3.
См. Пример кода ниже.
Вместо рендеринга только одного изображения шириной 700px, мы отображаем 700px x 700px, только если ширина области просмотра превышает 700px. Если область просмотра больше, происходит следующий рендеринг:
Изображения объектива камеры отображаются как портретное изображение шириной 700 пикселей и 1000 пикселей. в высоту (700 х 1000 пикселей).
Изображения PS4 Pro отображаются с разрешением 1000 x 1000 пикселей.
Художественное направление
Обрезая изображения, чтобы сделать их отзывчивыми, мы могли бы случайно удалить основной контент, например лицо субъекта. Как упоминалось ранее, инструменты с открытым исходным кодом AI могут помочь разумно обрезать и переориентировать на первичные объекты изображений. Кроме того, пост Надава Софермана об умном обрезании является полезным руководством для начала.
Строгая сетка и остов
Первый пример адаптивных изображений в этом посте является гибким. При ширине не менее 300 пикселей элементы сетки автоматически перемещаются в соответствии с шириной области просмотра. Потрясающе.
С другой стороны, мы могли бы применить более строгое правило к элементам сетки на основе спецификаций проекта. В этом случае медиазапросы пригодятся.
В качестве альтернативы, мы можем использовать возможность grid-span для создания элементов сетки различной ширины и длины:
Для изображения с квадратом 1000px x 1000px в широком окне просмотра мы можем разбить его на две ячейки сетки как в строке, так и в столбце. Изображение, изменяющееся в портретную ориентацию (700 × 1000 пикселей) в более широком окне просмотра, может занимать две ячейки в строке.
См. Pen Grid Gallery [Art Direction] Криса Нвамбы (@codebeast) на CodePen.
Прогрессивная оптимизация
Оптимизация вслепую столь же неудачна, как и оптимизация. Не сосредотачивайтесь на оптимизации без предварительного определения соответствующих измерений. И не оптимизируйте, если оптимизация не подкреплена данными.
Тем не менее, в приведенных выше примерах достаточно места для оптимизации. Мы начали с минимума, показали вам несколько интересных трюков, и теперь у нас есть рабочая, отзывчивая сетка. Следующий вопрос, который нужно задать: «Если страница содержит 20-100 изображений, насколько хорошо будет работать пользователь?»
Вот ответ: мы должны убедиться, что в случае множества изображений для рендеринга их размер соответствует устройству, которое их рендерит. Для этого нам нужно указать URL нескольких изображений вместо одного. Браузер выберет правильный (самый оптимальный) вариант в соответствии с критериями. Этот метод называется переключением разрешения в адаптивных изображениях. Смотрите этот пример кода:
Твиттер Гарри Робертса интуитивно объясняет, что происходит:
Самый простой способ, который я нашел (на данный момент), отогнать / объяснить `srcset` и` размеры`: pic.twitter.com/I6YW0AqKfM
— Гарри Робертс (@csswizardry) 1 марта 2017 г.
Когда я впервые попробовал переключение разрешения, я запутался и написал в Твиттере:
Я знаю, что дескрипторы ширины в атрибутах img srcset представляют ширину источника изображения (ширину исходного файла).
Чего я не знаю, так это зачем это нужно? Что браузер делает с этим значением? cc @grigs 🤓
— Кристиан Нвамба (@codebeast) 5 октября 2018 года
Снимаю шляпу перед Джейсоном Григсби за разъяснения в своих ответах.
Благодаря переключению разрешения, если размер браузера изменяется, то он загружает правильное изображение для правильного окна просмотра; отсюда маленькие картинки для маленьких телефонов (хорошо для процессора и оперативной памяти) и большие картинки для больших областей просмотра.
В приведенной выше таблице показано, что браузер загружает одно и то же изображение (синий прямоугольник) с разными размерами диска (красный прямоугольник).
См. Перо Grid Gallery [Optimized] Криса Нвамбы (@codebeast) на CodePen.
Бесплатный и гибкий Responsive Image Breakpoint генератор с открытым исходным кодом Cloudinary чрезвычайно полезен для адаптации изображений веб-сайтов к различным размерам экрана. Однако во многих случаях достаточно установить только размеры srcset и .
Заключение
Цель этой статьи — предоставить простые, но эффективные рекомендации по настройке адаптивных изображений и макетов в свете множества (и потенциально запутанных) доступных вариантов. Ознакомьтесь с CSS сеткой, художественным направлением и переключением разрешения, и в скором времени вы станете ниндзя. Продолжайте практиковать!
Загрузка...
