Главная » Статьи » Планирование адаптивных изображений

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

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

От автора: эта статья направлена на предоставление простых, но эффективных рекомендаций по настройке адаптивных изображений и макетов с учетом множества — и потенциально запутанных — доступных вариантов.

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

img { max-width: 100%; height auto; /* default */
}

Хотя это помогло мне как разработчику, это не было лучшим вариантом для аудитории. Что произойдет, если изображение в атрибуте src будет тяжелым? На устройствах высокого класса для разработчиков (например, у меня с 16 ГБ ОЗУ) проблем с производительностью практически нет. А на бюджетных устройствах? Это другая история.

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

Приведенная выше иллюстрация недостаточно информативна. Я из Нигерии, и если ваш продукт работает в Африке, то вам не стоит на это смотреть. Вместо этого посмотрите на эту диаграмму:

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

В настоящее время самый дешевый iPhone стоит в среднем 300 долларов. Средний африканец не может себе этого позволить, хотя iPhone — это порог для измерения быстрых устройств.

Это все, что нужно для бизнес-анализа, чтобы понять, что ширина CSS не влияет на адаптивные изображения. А что влияет, спросите вы? Позвольте мне сначала кое-что объяснить.

Нюансы изображений

Изображения привлекательны для пользователей, но являются трудной задачей для нас, разработчиков, которые должны учитывать следующие факторы:

Формат

Размер на диске

Размер рендера (ширина и высота макета в браузере)

Исходный размер (исходная ширина и высота)

Соотношение сторон

Итак, как мы можем выбрать правильные параметры и ловко смешать и сопоставить их, чтобы обеспечить оптимальную работу для вашей аудитории? Ответ, в свою очередь, зависит от ответов на эти вопросы:

Изображения создаются динамически пользователем или статически командой разработчиков?

Если ширина и высота изображения изменяются непропорционально, это повлияет на качество?

Все ли изображения отображаются с одинаковой шириной и высотой? Должны ли они иметь конкретное соотношение сторон при визуализации или совсем другое?

Что необходимо учитывать при представлении изображений в разных окнах просмотра?

Запишите свои ответы. Они не только помогут вам понять свои изображения — их источники, технические требования и тому подобное — но также позволят вам сделать правильный выбор при доставке.

Стратегии предварительной доставки изображений

Доставка изображений прошла путь от простого добавления URL-адресов в атрибут src до сложных сценариев. Прежде чем углубляться в них, давайте поговорим о нескольких вариантах предоставления изображений, чтобы вы могли разработать стратегию того, как и когда доставлять и отображать свои.

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

Динамическими: динамические изображения загружаются аудиторией, создаются другими событиями в системе, либо.

Статическими: фотограф, дизайнер или вы (разработчик) создаете изображения для веб-сайта.

Давайте рассмотрим стратегию для каждого из этих типов изображений.

Стратегия для динамических изображений

Со статическими изображениями довольно легко работать. С другой стороны, динамические изображения сложны и подвержены проблемам. Что можно сделать, чтобы частично нейтрализовать это и сделать их более предсказуемыми, как статические изображения? Две вещи: валидация и интеллектуальное кадрирование.

Валидация

Изложите несколько правил для аудитории относительно того, что приемлемо, а что нет. В настоящее время мы можем проверить все свойства изображения, а именно:

Формат

Размер на диске

Разрешение

Соотношение сторон

Примечание: размер рендера изображения определяется во время рендеринга, следовательно, мы не проверяем его.
После валидации появится предсказуемый набор изображений, которые легче использовать.

Интеллектуальное кадрирование

Другая стратегия обработки динамических изображений заключается в том, чтобы разумно их обрезать, избегая удаления важного контента и перефокусировки (или перецентрирования) основного контента. Это сложно сделать. Однако вы можете воспользоваться искусственным интеллектом, предлагаемым инструментами с открытым исходным кодом или компаниями SaaS, которые специализируются на управлении изображениями. Пример в следующих разделах.

После того, как для динамических изображений была разработана стратегия, создайте таблицу правил со всеми параметрами макета для изображений. Ниже приведен пример. Стоит даже изучить аналитику, чтобы определить наиболее важные устройства и размеры области просмотра.

Чистый (неоптимальный) минимум

Теперь оставьте в стороне сложности адаптивности и просто делайте то, что у нас получается лучше всего — простую разметку HTML с CSS для максимальной ширины. Следующий код отображает несколько изображений:

<main> <figure> <img src="https://res.cloudinary.com/...w700/ps4-slim.jpg" alt="PS4 Slim"> </figure> <figure> <img src="https://res.cloudinary.com/...w700/x-box-one-s.jpg" alt="X Box One S"> </figure> <!-- More images --> <figure> <img src="https://res.cloudinary.com/...w700/tv.jpg" alt="Tv"> </figure>
</main>

Примечание. Многоточие (…) в URL-адресе изображения задает стратегию папки, размерности и обрезки, которые слишком подробны, чтобы их включать в этот код, и они усечены, чтобы сосредоточиться на том, что сейчас важно. Полную версию вы можете увидеть в примере CodePen ниже.

Это самый короткий пример CSS в Интернете, который делает изображения адаптивными:

/* The parent container */
main { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
} img { max-width: 100%;
}

Если изображения не имеют одинаковую ширину и высоту, измените значение max-width с object-fit на cover.

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

Однако пример выше это не то, что нам нужно, потому что …

размер и вес изображения одинаковы как на устройствах с высоким, так и низким разрешением, и

нам может быть необходимо быть более строгими с шириной изображения вместо того, чтобы установить для нее 250 и позволить растягиваться.

Ну, этот раздел охватывает только «минимум», вот и все.

Варианты макета

Худшее, что может случиться с макетом изображения — это неправильное управление ожиданиями. Поскольку изображения могут иметь различные размеры (ширину и высоту), мы должны указать способ визуализации изображений.

Должны ли мы разумно обрезать все изображения до единого размера? Должны ли мы сохранять соотношение сторон для одного окна просмотра и изменять соотношение для другого? Решение за нами.

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

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

Рассмотрим пример кода ниже.

<main> <figure> <img src="https://res.cloudinary.com/...w700/ps4-slim.jpg" alt="PS4 Slim"> </figure> <figure> <img src="https://res.cloudinary.com/...w700/x-box-one-s.jpg" alt="X Box One S"> </figure> <!-- More images --> <figure> <img src="https://res.cloudinary.com/...w700/tv.jpg" alt="Tv"> </figure>
</main>

Вместо рендеринга только одного изображения шириной 700px, мы отображаем 700px x 700px, только если ширина области просмотра не превышает 700px. Если область просмотра больше, происходит следующий рендеринг:

Изображение объектива камеры отображается как портретное изображение шириной 700 пикселей и высотой 1000 пикселей (700 х 1000 пикселей).

Изображение PS4 Pro отображается в размере 1000 х 1000 пикселей.

Художественное руководство

Обрезая изображения, чтобы сделать их адаптивными, мы можем случайно удалить основной контент, например лицо субъекта. Как упоминалось ранее, AI-инструменты с открытым исходным кодом могут помочь с интеллектуальной обрезкой и сохранением в фокусе основного объекта изображения.

Строгая сетка и охват

Первый пример адаптивных изображений в этом посте является гибким. При ширине не менее 300 пикселей элементы сетки автоматически перемещаются в соответствии с шириной области просмотра. Потрясающе.

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

В качестве альтернативы, мы можем использовать возможность grid-span создавать элементы сетки различной ширины и длины:

@media(min-width: 700px) { main { display: grid; grid-template-columns: repeat(2, 1fr); }
} @media(min-width: 900px) { main { display: grid; grid-template-columns: repeat(3, 1fr) } figure:nth-child(3) { grid-row: span 2; } figure:nth-child(4) { grid-column: span 2; grid-row: span 2; }
}

Для изображения размером 1000px x 1000px в широком окне просмотра мы можем разбить его на две ячейки сетки как в ряду, так и в колонке. Изображение, переключающееся на портретную ориентацию (700 × 1000 пикселей) в более широком окне просмотра, может занимать две ячейки в ряду.

Прогрессивная оптимизация

Слепая оптимизация так же чревата, как и отсутствие оптимизации вовсе. Не сосредотачивайтесь на оптимизации без предварительного определения соответствующих метрик. И не приступайте к оптимизации, если оптимизация не подкреплена данными.

Тем не менее, в приведенных выше примерах оптимизация приемлема. Мы начали с минимума, показали вам несколько интересных трюков, и теперь у нас есть рабочая, адаптивная сетка. Следующий вопрос, который нужно задать: «Если страница содержит 20-100 изображений, насколько хорошо будет работать пользователю?»

Вот ответ: мы должны убедиться, что в случае множества изображений для рендеринга их размер соответствует устройству, которое их отображает. Для этого нам нужно указать URL-адрес нескольких изображений вместо одного. Браузер выберет правильный (самый оптимальный) вариант в соответствии с критериями. Этот метод называется переключением разрешения в адаптивных изображениях. Посмотрите этот пример кода:

<img srcset="https://res.cloudinary.com/.../h_300,w_300/v1548054527/ps4.jpg 300w, https://res.cloudinary.com/.../h_700,w_700/v1548054527/ps4.jpg 700w, https://res.cloudinary.com/.../h_1000,w_1000/v1548054527/ps4.jpg 1000w" sizes="(max-width: 700px) 100vw, (max-width: 900px) 50vw, 33vw" src="https://res.cloudinary.com/.../h_700,w_700/v1548054527/ps4.jpg 700w" alt="PS4 Slim">

Благодаря переключению разрешения, если размер окна браузера изменяется, то он загружает правильное изображение для нужного окна просмотра; отсюда маленькие картинки для небольших телефонов (оптимально для процессора и оперативной памяти) и большие картинки для больших окон просмотра.

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

Приведенная выше таблица показывает, что браузер загружает одно и то же изображение (синий прямоугольник) с разными размерами на диске (красный прямоугольник).

Бесплатный и гибкий Responsive Image Generator с открытым исходным кодом от Cloudinary чрезвычайно полезен для адаптации изображений к различным размерам экрана. Однако во многих случаях будет достаточно только настройки srcset и sizes.

Автор: Chris Nwamba

Источник: https://css-tricks.com

Редакция: Команда webformyself.