Retina Ready - что это такое и зачем оно нужно?

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

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

смартфоны iPhone 4S
линейки планшетов iPad
линейки ноутбуков Macbook Pro (MBP) Retina

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

HTML-разметка и CSS-стили
чистый CSS
JavaScript
SVG
шрифты с иконками

Надо сказать, что ни одно из этих решений не является на 100% продуктивным. Cтрадают как LowRes, так и HiDPI платформы, семантика, кроссбраузерность, мобильные платформы. Думается, что решение на Retina Ready проект необходимо принимать в каждом конкретном случае и с учетом перспективной аудитории сайта. Без подобного прогноза такая фишка может только навредить.

Удачной вам верстки!