Адаптивные изображения: разные методы и тактики

Адаптивные изображения: разные методы и тактики

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

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

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

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

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

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

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

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

Так как вы осознаете подходы и ситуации, в каких они более подступают, давайте поглядим, как мы можем воплотить эти методы.

READ
Глубокое погружение в WebSockets

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

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

По дефлоту, есть несколько хороших тегов и атрибутов, такие как img, picture, size и srcset использующихся в HTML для рендеринга изображений в интернет — разработке. Сейчас я покажу для вас, как в кратчайшие сроки воплотить описанные выше методы с внедрением этих тегов и атрибутов.

Способ на базе пикселей устройства

До этого чем углубиться в подробности, разрешите мне поведать для вас о мониторах высочайшей плотности. Современные флагманские мобильные устройства, такие как Самсунг Galaxy S10, имеют мониторы с 4-кратной плотностью, тогда как некие экономные модели могут иметь мониторы с низкой плотностью.

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

В приведенном ниже примере мы разглядим два изображения: small-kitten.jpg с 320×240 пикселями и large-kitten.jpg с 640×480 пикселями, в итоге что крайний подступает для мониторов с высочайшим разрешением. ( дескриптор x указывает ожидаемое соотношение пикселей устройства).

12345<img    srcset=”small-kitten.jpg 1x, large-kitten.jpg 2x”   src=”small-kitten.jpg”    alt=”A cute kitten” />

Если разрешение устройства юзера превосходит 640×480 пикселей, будет отображаться large-kitten.jpg, а в неприятном случае — изображение small-kitten.jpg. Самое основное, юзеры с устройствами с низким разрешением не ощутят задержки во времени загрузки изображения, а юзеры с устройствами с высочайшим разрешением не ощутят никаких заморочек с качеством изображения.

Способ гибкого изображения

Этот способ нацелен на внедрение 1-го и такого же изображения с различными размерами, а не на внедрение различных изображений.

К примеру, мы можем воплотить способ гибкого изображения, указав размер изображения в относительных соотношениях, а не указав четкие значения пикселей. Почаще всего употребляется способ max-width:100%.

READ
CSS Clamp(): адаптивная комбинация, которую мы все ждали
123456<img    src=”black-dog.jpg”    style=”max-width: 100%;    height: auto;”   alt=”Black dog image”>

Адаптивные изображения: разные методы и тактики

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

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

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

1ширина изображения = ширина изображения / ширина странички(500/1200) x 100 = 41,66%

Потом мы можем применять это значение, как показано в приведенном ниже фрагменте кода. Это дозволит изображению постоянно масштабироваться в согласовании с размером интернет-страницы.

123456<img    src=”black-dog.jpg”    style=”float: right;    width: 41.66%;”   alt=”Black dog image”>

Адаптивные изображения: разные методы и тактики

Но этот расчет может вызвать некие задачи, если область просмотра очень велика либо очень мала.

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

123456<img    src=”black-dog.jpg”    style=”width: 41.66%;    max-width: 500px;”   alt=”Black dog image”>

Способ Art Direction

Основная мысль Art Direction — показывать разные изображения зависимо от размеров экрана устройства. Мы можем решить эту делему, переключившись на тег picture заместо использования тега img , так как он дозволяет предоставлять изображения в нескольких соотношениях либо нескольких точках фокусировки во время просмотра на различных устройствах.

Адаптивные изображения: разные методы и тактики

Именитый опыт с кошкой и способом художественного направления — Гугл Chrome

Обычной фрагмент кода, схожий приведенному ниже, может получить вышеуказанный итог. Тут мы предоставляем значения для 2-ух различных атрибутов снутри элемента source; media и srcset определение размера изображения и источника соответственно.

123456<picture> <source media=”(min-width: 650px)” srcset=”kitten-stretching.png”> <source media=”(min-width: 465px)” srcset=”kitten-sitting.png”> <img src=”kitten-curled.png” alt=”A cute kitten”></picture>

В приведенном выше примере, если размер экрана больше 560 пикселей, браузер будет демонстрировать изображения из первого изображения, а если размер экрана больше 465 пикселей и ниже 650 пикселей, браузер будет применять 2-ое изображение.

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

Способ переключения типа изображения

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

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

К примеру, приведенный ниже код содержит 2 обыденных изображения и изображение типа gif. Поначалу браузер попробует выполнить avif форматирование, а если это не получится, попробует выполнить webp форматирование. Если браузер не поддерживает оба из их, он будет применять изображение png.

12345<picture>   <source type=”image/avif” srcset=”avif-kitten.svg” />   <source type=”image/webp” srcset=”webp-kitten.webp” />   <img src=”kitten.gif” alt=”A cute kitten” /></picture>

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

Адаптивные изображения: разные методы и тактики

Заключение

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

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

Создатель: Lahiruka Wijesinghe

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

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий