Java, UX, HTML, CSS, WEB-design

Как создать Retina-дисплеи высокой плотности для вашего веб-сайта

Краткое описание по статье Как создать Retina-дисплеи высокой плотности для вашего веб-сайта

Название: Как создать Retina-дисплеи высокой плотности для вашего веб-сайта . Краткое описание: ⭐ Ключом к созданию сайта на Retina Display является ка . Дата публикации: 19.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


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

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

Чтобы дать вам четкое представление о том, как работает этот дисплей Retina, давайте рассмотрим следующие варианты того, как веб-сайты Retina-fy.

Ваш дизайнерский набор инструментов
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна


Ресурс, который вам понадобится для завершения этого урока:

  • Изображение с высоким разрешением (в этом уроке мы будем использовать только одно изображение, но вы можете использовать свое)
  • Эмулятор оперы для мобильных устройств
  • Retina.js
  • Время и терпение

Оптимизация базового дисплея Retina

Шаг 1:

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

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

Шаг 2:

Открыть сельская местность_тропа_ландшафт.jpg файл в Photoshop и сохраните его как [email protected] под изображение папка.

Затем измените размер изображения до 50%. Для этого перейдите в Изображение -> Размер изображения а затем измените ширину на 50%. Это уменьшит размер файла изображения вдвое. Сохраните его под изображение папка с именем файла retina_image.jpg.

Шаг 3:

Теперь давайте продолжим и отобразим эти изображения на нашей веб-странице. Создайте новый файл HTML и назовите его retinaDisplay.html. Внутри тега body поместите этот код ниже.

<img alt="" src="https://1stwebdesigner.com/high-density-retina-displays/img/retina_image[AT]2x.jpg" width="778" height="519" >
<img alt="" src="https://1stwebdesigner.com/high-density-retina-displays/img/retina_image.jpg" width="778" height="519" >

Вы также можете использовать внутренний и внешний CSS для отображения изображений Retina на вашем сайте. В качестве примера проверьте код ниже.

<img class="imgRetina" alt="" src="https://1stwebdesigner.com/high-density-retina-displays/img/[email protected]" >
<img class="imgRetina" alt="" src="https://1stwebdesigner.com/high-density-retina-displays/img/retina_image.jpg" >
<style>
.imgRetina { width: 778px; height: 519px; }
</style>

Теперь вы можете проверить это на своем устройстве Retina, и вы ясно увидите, что первое изображение более четкое, чем второе. Нет устройства сетчатки? Без проблем!

Тестирование дисплея Retina через эмулятор Opera Mobile

Загрузите эмулятор Opera Mobile, установите его на свой компьютер и запустите.

установить

Поскольку iPad имеет разрешение 1536 на 2048 пикселей, давайте добавим это разрешение в эмулятор Opera Mobile. Для этого нажмите Добавить кнопку под меткой разрешения и дайте ему имя iPad ретина и размером 1536 на 2048 пикселей, а затем нажмите В ПОРЯДКЕ.

эмулятор

После этого нажмите Запуск и поместите URL-адрес вашего HTML-файла. К тому времени вы можете увидеть оба изображения на экране. Обратите внимание, что вы также можете увеличить масштаб, чтобы четко сравнить изображения.

размер экрана

iPad ретина

Вы видели, как пиксели высокого качества могут улучшить работу ваших посетителей на их устройствах Retina. Устройство Retina увидит данные дополнительных пикселей. Он будет использовать эти данные для заполнения дополнительных PPI (пикселей на дюйм), которые содержит экран.

Есть много способов сделать ваши веб-страницы Retina-fy. Ознакомьтесь со следующими примерами того, как они могут помочь вам улучшить ваши веб-сайты Retina.

Использование SVG и эффектов CSS3

большие-SVG-значки-часть-2

Если у вас есть логотип и некоторые векторы, которые вы хотите отобразить на устройствах Retina, настоятельно рекомендуется использовать файлы SVG. SVG (масштабируемая векторная графика) использует масштабируемые 2D-изображения, основанные на формах и линиях.

Это означает, что изображение будет отображаться четко на устройствах Retina. В основном файлы SVG создаются в Adobe Illustrator.

С другой стороны, вы также можете использовать эффекты CSS3 для Retina-fy вашего веб-сайта. Эффекты CSS3 выглядят так же, как те эффекты, которые вы видите и используете в Photoshop, такие как тени и штрихи.

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

Использование веб-шрифтов

гугл-шрифты

Веб-шрифты великолепны, потому что они предлагают доступность шрифтов и креативность для наших современных веб-сайтов. Это шрифты, доступные в Интернете. Их можно встроить в HTML-разметку с помощью тега ссылки, предоставленного хост-сайтом веб-шрифтов. Добавление правила @font-face для CSS3 — великолепная идея для дизайнеров.

@font-face
{
font-family: Sansation Light;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

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

<link href="http://fonts.googleapis.com/css?family=Arbutus" rel="stylesheet" type="text/css" >
body { font-family: 'Arbutus'; }

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

Ресурсы веб-шрифтов

Вы можете использовать следующие сервисы для шрифтов вашего сайта.

  • Гугл шрифты
  • Шрифты.com
  • Типкит

Использование изображений спрайтов

бесплатно

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

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

Другие способы оптимизации дисплеев Retina

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

Медиа-запросы CSS

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

Техника замены изображений медиа-запросов предоставит вашим пользователям легкий доступ к вашим изображениям Retina. Давайте применим это к нашему предыдущему примеру.

Шаг 1:

Создайте новый файл HTML и назовите его mediaRetina.html. Внутри тега body поместите следующий код.

<div class="”imgRetina”"></div>

Шаг 2:

А затем внутри нашего внутреннего/внешнего CSS поместите этот код для нашего изображения без Retina.

.imgRetina { background: (‘../img/retina_image.jpg’)no-repeat;  width: 778px; height: 519px;  margin: 0 auto; }

Шаг 3:

Далее давайте добавим код CSS для нашего изображения Retina. Мы собираемся заменить обычное изображение изображением Retina, если пользователь использует дисплей Retina.

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.imgRetina { background: (‘../img/[email protected])no-repeat;  width: 778px; height: 519px;  margin: 0 auto; }
}

Наш медиа-запрос начинается с & оператор запроса, за которым следует Только, что означает, что только экранное устройство должно выполнять код. Затем мы добавили минимальное соотношение пикселей устройства, что означает, что экран должен быть равен или больше двух.

Мы также добавили -вебкит префикс браузера, чтобы убедиться, что наш код будет работать в старых браузерах Safari. Поздравляем!

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

jQuery Оптимизация дисплея Retina

сетчатки

Мы также можем использовать jQuery для замены изображений, если пользователь использует устройство высокой плотности. В этом уроке мы воспользуемся функциональностью retina.js. Retina.js — это сценарий с открытым исходным кодом, который позволяет легко передавать изображения с высоким разрешением на устройства с дисплеями Retina. Давайте попробуем это.

Шаг 1:

Создайте новый файл HTML и назовите его jqueryRetina.html. В разделе head поместите ссылку на источник библиотеки jQuery из Google.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Шаг 2:

Затем создайте новую папку для нашей папки Retina и назовите ее js. Теперь давайте загрузим retina.js, а затем поместим код ссылки ниже перед закрывающим тегом.

<script type="text/javascript" src="https://1stwebdesigner.com/high-density-retina-displays/js/retina.js.js"></script>

Шаг 3:

Поместите следующий код в наш раздел body. Это будет включать в себя нашу базовую разметку изображения сетчатки с классом imgRetina.

</pre>
<div class="imgRetina"></div>
<pre>

Шаг 4:

После этого внутри нашего внутреннего/внешнего CSS поместите этот код для нашего изображения без Retina. Он содержит источник изображения вместе с его шириной и высотой. Затем, в конце концов, мы просто центрируем изображение, используя margin: 0 auto.

.imgRetina { background: (‘../img/retina_image.jpg’)no-repeat;  width: 778px; height: 519px;  margin: 0 auto; }

И это все! Нет, я не шучу, это действительно так! Сценарий предполагает, что вы используете предписанный Apple модификатор высокого разрешения (@2x) для обозначения вариантов изображения высокой плотности в нашей папке img.

Если вы помните, имя нашего изображения без Retina retina_image.jpg поэтому он будет искать наше изображение Retina [email protected] и заменить его, когда пользователь просматривает на устройстве с дисплеем Retina.

Заключительные слова

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

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

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Как создать Retina-дисплеи высокой плотности для вашего веб-сайта

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Кнопка «Наверх»