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

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

Способы, которыми мы можем воспользоваться, различаются в зависимости от цели изображения. Font Icon и SVG теперь являются лучшим способом отображения значков или логотипа, а Media Queries – способом отображения изображений из CSS.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Но если вы хотите, чтобы изображение в высоком разрешении содержалось в теле, Retina.js – это то, что вам нужно. Retina.jsбиблиотека JavaScript, которая делает обслуживание изображений с высоким разрешением на одном дыхании. Вам даже не нужно изменять большую часть своего кода. Давайте проверим это.

Начиная

Retina.js не зависит от каких-либо сторонних библиотек. Все, что вам нужно, это скачать retina.js файл и свяжите это в своем документе. Кроме того, вы можете связать файл с CDNJS.com, вот так.

Retina.js предлагает два метода для работы с изображениями высокого разрешения.
Способ 1
В своем первоначальном выпуске Retina.js использует тот же метод, что и Apple, в своих устройствах, который прикрепляет изображение высокого разрешения с суффиксом @ 2x. Поэтому, если у вас есть изображение с именем autumn.jpg, вы называете версию в высоком разрешении как autumn@2x.jpg. В версии 1.3.0 Retina.js вводит новый суффикс _2x. Таким образом, помимо @ 2x вы можете назвать изображение как autumn_2x.jpg.

Retina.js проверит ваш сервер на наличие изображений с этими суффиксами при просмотре веб-сайта на экране с высоким разрешением и заменит им обычное изображение. Чтобы Retina.js успешно подобрал изображение, вы должны сохранить изображение с высоким разрешением в том же каталоге, в котором сохранена ваша обычная версия.
Способ 2
Другой способ – использовать data-at2x внутри тега img, вот так.

Используя этот атрибут данных, вы можете установить имя папки или изображения по-другому, и Retina.js не будет выполнять проверку сервера; это ускорит процесс.

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

Меньше Mixins
Retina.js также предоставляет LESS Mixins, .at2x, для обслуживания изображений через CSS. Этот пример:

.social-icons {
.at2x ( ‘изображение / icons.jpg’);
}

… Превратится в следующее при компиляции в обычный CSS.

.social-icons {
background-image: url (‘image / icons.jpg’);
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min – moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), ( минимальное разрешение: 1.5dppx) {
.social-icons {
background-image: url (“image/icons@2x.jpg”);
размер фона: авто авто;
}
}

Довольно удобно, правда?

Использование Retina.js в WordPress

Пользователи WordPress могут использовать плагин под названием WP Retina 2x использовать Retina.js на своем сайте. Предполагая, что вы установили плагин, а также загрузили изображения, вы можете перейти в меню Media> WP Retina 2x. Вы должны увидеть список изображений, которые вы загрузили, следующим образом.

Нажмите кнопку «Создать». Он будет генерировать изображения с суффиксом @ 2x для миниатюр, средних, больших и других пользовательских размеров изображений, которые вы указали.

Последняя мысль

Видя растущее число устройств с высоким разрешением, веб-разработчики не могут избежать его поддержки. Retina.js – это универсальная библиотека для обслуживания изображений с высоким разрешением. Вы можете использовать изображения с атрибутом @ 2x или data- * в контенте вашего тела, использовать .at2x Mixins для показа изображения вашего сайта через CSS, и для WordPress есть плагин.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *