—»     —»   Экраны Retina: отображение высококачественной графики на сайте
  Раздел: Руководства   Нет комментариев  

Экраны Retina: отображение высококачественной графики на сайте



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

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

Экраны Retina: отображение высококачественной графики на сайте

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

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

Чтобы вы лучше понимали то, как работают экраны Retina, взгляните на следующие примеры Retina-fy веб-сайтов. Не пугайтесь! Мы объясним вам этот процесс от корки до корки!

Ресурсы, необходимые для прохождения данного руководства:

* Изображение в высоком разрешении (на протяжении всего руководства мы будем использовать лишь одно изображение, и оно бесплатно).
* Opera Mobile Emulator
* Retina.js
* Время и терпение

Оптимизируем стандартный экран Retina

Этап 1:

Создайте новую папку в предполагаемом месте и назовите ее retina. Затем, внутри папки retina, создайте еще одну папку и назовите ее img.

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

Этап 2:

Откройте файл countryside_trail_landscape.jpg в Photoshop и сохраните его под названием retina_image@2x.jpg в папке img.

Далее, измените его размер до 50%. Чтобы сделать это, пройдите в меню Image -> Image size и укажите 50%. Это даст нам новый файл, уменьшенный вдвое. Сохраните его в папке img под названием retina_image.jpg.

Этап 3:

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

<img alt="" src="img/retina_image[AT]2x.jpg" width="778" height="519" />
<img alt="" src="img/retina_image.jpg" width="778" height="519" />

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

<img class="imgRetina" alt="" src="img/retina_image@2x.jpg<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>" />
<img class="imgRetina" alt="" src="img/retina_image.jpg" />

<style>
.imgRetina { width: 778px; height: 519px; }
</style>

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

Тестируем Retina при помощи Opera Mobile Emulator

Скачайте Opera Mobile Emulator и установите этот инструмент на компьютер, а затем запустите его.

Экраны Retina: отображение высококачественной графики на сайте

Так как разрешение iPad составляет 1536х2048px, давайте добавим это разрешение в Opera Mobile Emulator. Чтобы сделать это, нажмите кнопку Add под ярлыком Resolution, и задайте имя iPad Retina, установив разрешение 1536х2048px. После чего нажмите ОК.

Экраны Retina: отображение высококачественной графики на сайте

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

Экраны Retina: отображение высококачественной графики на сайте

Экраны Retina: отображение высококачественной графики на сайте

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

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

Применение SVG и CSS3-эффектов

Экраны Retina: отображение высококачественной графики на сайте

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

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

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

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

Применение веб-шрифтов

Экраны Retina: отображение высококачественной графики на сайте

Веб-шрифты очень удобны потому, что предлагают возможность адаптировать и видоизменять их. Сегодня в интернете можно видеть множество разных шрифтов. Их можно встраивать в HTML-разметку при помощи тэга link. Вдобавок, @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'; }

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

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

Вы можете воспользоваться услугами следующих сервисов:

* Google Fonts
* Fonts.com
* Typekit
* Fontdeck

Применение спрайт-изображений

Экраны Retina: отображение высококачественной графики на сайте

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

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

Другие способы оптимизации сайтов под экраны Retina

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

CSS Media Queries

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

Media Queries – это техника замены изображений, которая позволяет вам предоставлять пользователям именно ту версию картинки, которая нужна для его устройства. Давайте применим ее к нашему предыдущему примеру.

Этап 1:

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

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

Этап 2:

А затем внутрь нашего внутреннего или внешнего CSS-документа, поместите код для изображений не в формате Retina.

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

Этап 3:

Теперь, давайте добавим CSS-код для Retina-изображений. Мы заменим обычное изображение на изображение для экрана Retina, если пользователь использует соответствующее устройство.

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.imgRetina { background: (‘../img/retina_image@2x.jpg<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>)no-repeat; width: 778px; height: 519px; margin: 0 auto; }
}

Наш media query начинается с выражения < @media query, после которого следует only, что означает, что этот код будут считывать только устройства с Retina. Затем мы добавили min-device-pixel-ratio, что значит, что разрешении экрана должно быть равно или вдвое больше.

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

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

jQuery-оптимизация под экраны Retina

Экраны Retina: отображение высококачественной графики на сайте

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

Этап 1:

Создайте новый HTML-документ и назовите его jqueryRetina.html. В заголовочную часть поместите ссылку на jQurty-библиотеку от Google.

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

Этап 2:

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

<script type="text/javascript" src="js/retina.js.js"></script>

Этап 3:

Поместите следующий код в тело документа. Сюда включена разметка для retina-изображений с классом imgRetina.

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

Этап 4:

После чего, внутрь внешнего или внутреннего CSS-документа нужно поместить код для простых изображений. Сюда включен источник изображения с указанием ширины и высоты. Затем, в самом конце, нам нужно просто центрировать изображение при помощи margin: 0 auto.

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

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

Если вы помните, название изображения, предназначенного не для Retina, retina_image.jpg, а значит адаптированное под Retina изображение должно иметь название retina_image@2x.jpg.

В завершение

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

В данном руководстве мы представили вам и иные ресурсы, которые позволяет вам улучшить уровень взаимодействия с экранами Retina. Мы также рассказали вам о том, как оптимизировать ваши веб-изображения для Retina-устройства. Вы можете использовать все эти подходы для улучшения собственного сайта и для того, чтобы избежать жалоб посетителей о возможном ухудшении качества отображения вашего дизайна на экранах с поддержкой технологии Retina.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, Media Query, jQuery, Opera
Опубликовал Design FactoRy   Прочитано (раз): 6522   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031