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

Что такое Retina диспдей? Или, какое определение является точным для дисплеев с таким названием?

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

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

Retina — это собственность Apple. Другие компании могут производить экраны с такими же техническими характеристиками, но назвать их Retina, они не смогут. Это товарный знак.

Какое разрешение у Retina дисплея?

Разрешения экранов приводятся в формате «число пикселей» Х «число пикселей». Но ключевым моментом для Retina дисплеев является плотность пикселей (количество пикселей на дюйм). При одинаковых разрешениях экранов (в пикселях) но разных размерах (в дюймах) плотность пикселей будет разной.

Но, даже с точки зрения плотности пикселей, нет единой цифры, котороя квалифицировала экран как Retina, так как при определении Retina дисплеев учитывается, внимание, расстояние экрана от глаз.

На деле, чаще можно встретить следующие показатели плотности пикселей для различных типов устройств:

• 326ppi — смартфоны
• 264ppi — планшеты
• 220ppi — ноутбуки

Есть ли экраны с характеристиками лучшими, чем у Retina дисплеев?

Есть. Есть экраны, которые обладают большей плотностью пикселей. Сама компания Apple, с момента запуска iPhone 6, предлагает использовать улучшенный экран Retina HD. Но многие Android устройства превосходят по данному показателю устройства Apple, например LG G3 — 534 пикселя на дюйм.

Но, если вспомнить наше предыдущее определение Retina, то увеличение плотности пикселей — довольно спорное предприятие, ведь человеческий глаз уже не видит разницы при таких высоких показателях ppi. Об этом говорили сами Apple. Но выпуск iPhone 6 можно расценивать как признание того, что все-таки разницу ощутить можно.

Разница между Retina и Retina HD.

Термин Retina HD — относится только к экранам новых смартофонов Apple. Так чем же превосходит Retina HD своего предшественника:

• Более высокое разрешение
• Больший контраст
• Более широкий угол обзора благодаря технологии dual domain pixels
• Еще, если смотреть на экран в очках, то изображение на экране будет ярче, чем на предыдущих моделях.

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

Я не буду углубляться в теорию, а расскажу лишь про практическое применение некоторых приемов.

Основная причина размытости изображений на retina экранах — это недостаточность информации.

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

Решение 1 средствами html

используйте изображение в 2 раза больше, жестко указав параметры width и height

<img src=»https://steptosleep.ru/wp-content/uploads/2018/06/36403.png» width=»100″ height=»200″ alt=»» />

изображение example2x.png должен иметь размер 200×400

Решение 1 средствами JavaScript

Способ аналогичен первому, но немного автоматизирован

$(window).load(function() { var images = $(‘img’); images.each(function(i) { $(this).width($(this).width() / 2); }); });

Решение 1 средствами CSS

Если необходимо прописать размеры для фона, а не изображения, то это можно сделать следующим образом:

.image { background-image: url(example2x.png); background-size: 100px 200px; /* Alternatively background-size: contain; */ width: 100px; height: 200px; }

Но параметр background-size не поддерживается в IE 7 и 8.

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

Поэтому следует использовать 2 изображения, одно — для простых экранов, а второе — для retina-экранов.

Решение 2 средствами CSS

Это относится, в первую очередь, к фоновым изображениям

.icon { background-image: url(example.png); width: 100px; height: 200px; } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min—moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx){ .icon { background-image: url(example2x.png); } }

где изображение example.png имеет размеры 100х200, а изображение example2x.png — 200х400

Решение 2 средствами JavaSctipt

Подменяем картинки на большие, если это нужно:

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

Обои «retina» 13 фото

12Вперед