Планирование адаптивных изображений | CSS-Tricks

          
                    
                    
          

Когда я впервые сделал изображение адаптивным, это было так же просто, как написать следующие четыре строки:

  img {
  максимальная ширина: 100%;
  высота авто; /* дефолт */
}  

Хотя это помогло мне как разработчику, это не было лучшим для аудитории. Что произойдет, если изображение в атрибуте 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 в Интернете, который делает изображения отзывчивыми:

  / * Родительский контейнер * /
главный {
  дисплей: сетка;
  grid-template-columns: repeat (автозаполнение, minmax (300px, 1fr));
}

img {
  максимальная ширина: 100%;
}  

Если изображения не имеют одинаковой ширины и высоты, замените 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 для создания элементов сетки различной ширины и длины:

  @media (минимальная ширина: 700 пикселей) {
  главный {
    дисплей: сетка;
    grid-template-columns: repeat (2, 1fr);
  }
}

@media (min-width: 900px) {
  главный {
    дисплей: сетка;
    grid-template-columns: repeat (3, 1fr)
  }
  рисунок: nth-child (3) {
    сетка-ряд: пролет 2;
  }
  рисунок: nth-child (4) {
    сетка-столбец: промежуток 2;
    сетка-ряд: пролет 2;
  }
}  

Для изображения с квадратом 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 сеткой, художественным направлением и переключением разрешения, и в скором времени вы станете ниндзя. Продолжайте практиковать!