От создателя: создание адаптивного изображения — это не ракетостроение. Я уверен, что вы уже много их делали, используя CSS. Но гибкий размер — это лишь один из причин, когда идет речь о адаптивных изображениях.
Время от времени, зависимо от типа устройства, нам необходимо настроить качество отображения и даже тип изображения для наилучшего взаимодействия с юзером.
Сейчас мы можем отыскать разные техники для поддержания подходящего свойства и размера. В данной нам статье мы разглядим эти подходы и поможем для вас отыскать тот, который идеальнее всего подступает для вашего проекта.
Разные подходы к реализации адаптивных изображений
Способ на базе пикселей устройства: этот подход дозволяет применять несколько версий 1-го и такого же изображения с различным разрешением и выбирать более подходящее для рендеринга зависимо от разрешения экрана юзера. Этот способ больше подступает для устройств, которые не показывают изображения с высочайшим разрешением.
Способ гибкого изображения: по дефлоту изображения не являются гибкими. Они, обычно, обрезаются либо остаются в фиксированном размере при изменении размера экрана. При помощи способа плавного изображения вы сможете вставить изображение в адаптивный макет и отдать возможность растягивать либо сжимать при необходимости.
Способ художественного направления: художественное направление — это рядовая неувязка, с которой мы сталкиваемся при работе с экранами различных размеров. Мы можем решить эту делему, изменив содержимое изображения, обрезав изображение либо используя другое изображение зависимо от размера экрана юзера.
Способ переключения типов: есть некие браузеры и устройства, которые не поддерживают современные типы изображений, такие как WebP. Способ переключения типов может употребляться для переключения меж типами изображений, что дозволяет предоставлять юзеру наилучший контент зависимо от сопоставимости устройства и браузера.
Так как вы осознаете подходы и ситуации, в каких они более подступают, давайте поглядим, как мы можем воплотить эти методы.
Глубокое погружение в WebSockets
Реализация адаптивных изображений
Как упоминалось ранее, существует несколько методов реализации адаптивных изображений, и принципиально знать, как идеальнее всего их воплотить, чтоб получить наивысшую отдачу от ваших усилий.
По дефлоту, есть несколько хороших тегов и атрибутов, такие как img, picture, size и srcset использующихся в HTML для рендеринга изображений в интернет — разработке. Сейчас я покажу для вас, как в кратчайшие сроки воплотить описанные выше методы с внедрением этих тегов и атрибутов.
Способ на базе пикселей устройства
До этого чем углубиться в подробности, разрешите мне поведать для вас о мониторах высочайшей плотности. Современные флагманские мобильные устройства, такие как Самсунг Galaxy S10, имеют мониторы с 4-кратной плотностью, тогда как некие экономные модели могут иметь мониторы с низкой плотностью.
Если мы будем загружать изображение с высочайшей плотностью на экран с низкой плотностью, это приведет к весьма нехорошему взаимодействию с юзером и пустой растрате ресурсов. Итак, мы будем применять разные изображения для различных соотношений пикселей устройства.
В приведенном ниже примере мы разглядим два изображения: small-kitten.jpg с 320×240 пикселями и large-kitten.jpg с 640×480 пикселями, в итоге что крайний подступает для мониторов с высочайшим разрешением. ( дескриптор x указывает ожидаемое соотношение пикселей устройства).
| 12345 | |
Если разрешение устройства юзера превосходит 640×480 пикселей, будет отображаться large-kitten.jpg, а в неприятном случае — изображение small-kitten.jpg. Самое основное, юзеры с устройствами с низким разрешением не ощутят задержки во времени загрузки изображения, а юзеры с устройствами с высочайшим разрешением не ощутят никаких заморочек с качеством изображения.
Способ гибкого изображения
Этот способ нацелен на внедрение 1-го и такого же изображения с различными размерами, а не на внедрение различных изображений.
К примеру, мы можем воплотить способ гибкого изображения, указав размер изображения в относительных соотношениях, а не указав четкие значения пикселей. Почаще всего употребляется способ max-width:100%.
CSS Clamp(): адаптивная комбинация, которую мы все ждали
| 123456 | |
Видите ли, изображение можно свободно масштабировать и подгонять под размер окна браузера. Этот способ совершенно подступает для случаев, когда в заголовках статей употребляются огромные изображения.
Не считая того, существует улучшенный способ с гибкими изображениями для вычисления размеров с внедрением ширины изображения и общей ширины странички.
В качестве примера разглядим интернет-страницу шириной 1200 пикселей и изображение шириной 500 пикселей. Тогда расчет того, сколько изображение займет на страничке, будет последующим:
ширина изображения = ширина изображения / ширина странички(500/1200) x 100 = 41,66%
| 1 | ширина изображения = ширина изображения / ширина странички(500/1200) x 100 = 41,66% |
Потом мы можем применять это значение, как показано в приведенном ниже фрагменте кода. Это дозволит изображению постоянно масштабироваться в согласовании с размером интернет-страницы.
| 123456 | |
Но этот расчет может вызвать некие задачи, если область просмотра очень велика либо очень мала.
Мы можем решить эту делему, добавив наибольшие и малые значения для ширины изображения в пикселях, чтоб отметить верхнюю и нижнюю границы.
| 123456 | |
Способ Art Direction
Основная мысль Art Direction — показывать разные изображения зависимо от размеров экрана устройства. Мы можем решить эту делему, переключившись на тег picture заместо использования тега img , так как он дозволяет предоставлять изображения в нескольких соотношениях либо нескольких точках фокусировки во время просмотра на различных устройствах.
Именитый опыт с кошкой и способом художественного направления — Гугл Chrome
Обычной фрагмент кода, схожий приведенному ниже, может получить вышеуказанный итог. Тут мы предоставляем значения для 2-ух различных атрибутов снутри элемента source; media и srcset определение размера изображения и источника соответственно.
| 123456 | |
В приведенном выше примере, если размер экрана больше 560 пикселей, браузер будет демонстрировать изображения из первого изображения, а если размер экрана больше 465 пикселей и ниже 650 пикселей, браузер будет применять 2-ое изображение.
Заметьте, что обыденный тег img является крайним вложенным тегом элемента picture, который имеет решающее значение для работы этого фрагмента кода. Он будет употребляться в качестве подмены, когда условия в медиа-запросе не совпадают, и в качестве запасной копии в браузерах, которые не поддерживают элемент picture.
Способ переключения типа изображения
С резвым развитием технологий, возникают и разные типы современных типов изображений, таковых как avif, webp и остальные. Хотя эти типы изображений обеспечивают удобство для юзеров, некие браузеры еще не поддерживают их.
Таковым образом, мы можем применять переключение типов для решения таковых ситуаций, изменяя формат изображения.
К примеру, приведенный ниже код содержит 2 обыденных изображения и изображение типа gif. Поначалу браузер попробует выполнить avif форматирование, а если это не получится, попробует выполнить webp форматирование. Если браузер не поддерживает оба из их, он будет применять изображение png.
| 12345 | |
Вы также сможете применять chrome DevTools для эмуляции этого, чтоб узреть, как будет смотреться ваше изображение, когда браузер не поддерживает современные типы изображений.
Заключение
Я считаю, что сейчас вы отлично осознаете методы, которые мы можем применять для реализации адаптивных изображений, и какие ситуации для их больше всего подступают.
Непременно извлеките наивысшую пользу из этих познаний при разработке хоть какого веб-приложения, так как верная реализация адаптивных изображений помогает сделать лучше взаимодействие с юзером. Спасибо за чтение!!!
Создатель: Lahiruka Wijesinghe
Редакция: Команда webformyself.
Источник