Блог WP01

Разрешение фото для retina

Компания Apple первая начала внедрять высококачественные дисплеи (начиная с iPhone4 в 2010 году), графика на которых не имела видимых глазу пикселей. Данная маркетинговая технология была инновационной и получила название «Retina». На сегодняшний день большинство смартфонов отображают отличную картинку, а дорогие модели и вовсе вполне могут соперничать с айфонами.

Прежде чем поговорить более детально о тонкостях уточним:
Retina — маркетинговый Apple термин, под которым будем считать такую плотность пикселей, при которой человеческий глаз при обычном (принятом за норму) удалении экрана устройства не может различить отдельно взятый пиксель. В среднем это значение составляет 300 ppi. Пользователи изучают информацию с сотового на расстоянии 30 см.
PPI — количество пикселей/дюйм на экране.

Количество пикселей при PPI 10/20:
(фото поддерживается плагином «WP Retina 2x»)

У моего смартфона retina монитор?

Кроме Apple не один производитель не имеет права, в связи с патентом, именовать дисплей как Retina. В прочем, определение стало повсеместным в it сфере — поэтому давайте разбираться в способах определения качества экрана:

1 способ: ручной
С помощью не хитрых математических расчетов определим пиксельную плотность в Ginzuu RS9602, производитель которого не счел необходимым указать данный параметр.

Телефон имеет следующие характеристики:
18:9 — соотношение сторон
5,7″ — диагональ в дюймах
1440×720 — размер экрана в пикселях

Из школьного курса мы знаем, что квадрат гипотенузы равен сумме квадратов катетов: c²=a²+b². Примем диагональ за гипотенузу: c²=1440²+720². Из уравнения с=1609,97 px. Не охота высчитывать вручную? Поможет онлайн-сервис, который без труда можно найти по запросу «высчитать гипотенузу треугольника»
Теперь найдём PPI по формуле: диагональ в пикселях разделим на диагональ в дюймах. Расчеты: 1609,97/5,7=282,45
Теперь мы знаем, что PPI для Ginzuu RS9602 составляет 282px/дюйм.

2 способ: скриптовой
Мы не нашли программ для определения плотности пикселей на экране, но есть скрипт который может определить является ли экран retina: https://arm1.ru/retina/.

Поддержка retina изображений на сайте

Существует несколько возможностей «подружить» ваш проект с увеличенными в 2 раза изображениями — рассмотрим основные, не требующие модификаций кода. Безусловно, можно предоставлять графику и в 3 и в 4 кратном увеличении, но на наш взгляд в этом нет резкой необходимости.

1 способ: плагинный
Для WordPress, а именно с данной платформой мы и работаем, есть несколько решений, но обновляемое и наиболее стабильное — лишь одно: WP Retina 2x , которое предоставляет несколько вариантов работы:
PictureFill: переписывает HTML на лету, используется HTML-тег srcset.
Responsive Images: Src-set создается автоматически для изображений. Работает только с WordPress от 4.4.
Retina.js: HTML отображает обычное изображение, а затем, если устройство retina обнаружено, загружает изображения retina.
HTML Rewrite: Перезаписываются SRC-теги изображений на лету при обнаружении устройства retina. Не работает с кэшированием.
Retina-Images: изменяет htaccess для обработки запросов. Может работать не стабильно.

2 способ: ручной
Скрипт Retina.js от imulus хорошо зарекомендовал себя, имеет простое управление и не большой вес. Суть его работы заключается в следующем: при загрузке страницы на retina дисплее идёт проверка на наличие у изображения модификатора (например, @2x) — если таковой имеется, то загружается более качественная графика. Минусы: загружается JS файл + сначала отображаются стандартные изображения а затем, при наличии их retina версии, загружаются уже увеличенные.

3 способ: HTML
Если создать вручную несколько версий изображения (например, обычное и увеличенное в 2 раза), а затем прописать при добавлении модификатор с размерами, то мы получим указание использования соответствующего файла. Код выглядит следующим образом (работа примера по атрибутам SRCSET представлена на фотографии с цветовыми обозначениями ниже):

вариант 1

<img src="/images/photo.jpg" srcset="/images/photo@2x.jpg 2x" 
alt="название картинки" width="400" height="225" />

вариант 2

<img srcset="/images/photo.jpg, /images/photo@2x.jpg 2x" 
alt="название картинки" width="400" height="225" />

Определение срабатывания retina графики

Существует несколько способов проверки сработки retina графики:

1 способ: браузерное расширение
Наиболее простой — с помощью приложения Retina Check Extension (доступно для браузеров на платформе Chromium: Yandex, Opera, Chrome и т.д.). После установки кликните на соответствующую иконку в браузере, после этого произойдёт сканирование страницы с последующим отображением данных по изображениям: маленькие (не для ретины), retina пригодные, большие. При этом картинки будут подсвечиваться соответствующим цветом. При нажатии на «DOWNLOAD REPORT» сохранится отчет в csv формате с информацией о графики и используемых увеличениях.

2 способ: ручной
В браузере откройте «панель разработчика» (нажмите F12) и в графе выбора отображения укажите смартфон (например, iPhone 6/7/8 Plus) для отображения мобильной версии или планшет (например, iPad Pro) для отображения верстки близкой к ПК с высокой плотностью пикселей. Далее перейдите в раздел «Network» и подраздел «Img». Нажмите F5 для обновления данных. Информация в таблице снизу будет отображать всю графику, которая загружена для страницы — увеличенная версия картинок должна иметь имя со значением @2x перед расширением. Если вы видите данный модификатор — значит всё отлично!

Попробуем объединить всё на одном фото:
(отображается с использованием HTML примера №2, имеется увеличение x1.5)

Цветовые обозначения:
Синий — работа плагина «Retina Check Extension»: иконка запуска, информационное окно, подсветка графики
Красный — выбор пиксельного предоставления окна с отображением основных устройств
Фиолетовый — отображение загруженной графики на сайте в 2-x кратной размерности для retina мониторов

Итог:
Технологии довольно быстро развиваются и на данный момент подавляющая часть дисплеев смартфонов приближена к retina качеству. Экраны мониторов ПК, к сожалению, всё ещё отстают (лишь топовые модели имеют хорошее PPI). Поэтому, если графика на мобильных устройствах первостепенна для посетителей вашего сайта — запланируйте внедрение улучшенной версии изображений. Специалисты WP01 готовы, в рамках улучшения №14, внедрить поддержку Retina.