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 проект необходимо принимать в каждом конкретном случае и с учетом перспективной аудитории сайта. Без подобного прогноза такая фишка может только навредить.
Удачной вам верстки!