Прошло довольно много времени с тех пор, как дисплеи Retina на устройствах iOS были впервые выпущены, но все еще есть много сайтов, которые не готовы к Retina, даже несмотря на то, что дизайнеры и разработчики поняли факты полностью отзывчивого, мобильного мир
Вот что вам нужно знать о том, как сделать вашу работу наилучшим образом на все более распространенных дисплеях Retina. Хорошая новость заключается в том, что, как ни страшно, на самом деле все не так сложно.
$config[code] not foundПодготовка вашего сайта к изображениям, готовым к ретине
Удвоить веселье
На самом деле существует несколько способов, с помощью которых можно снять кожу с этого кота. Во-первых, вам нужно немного обострить ваш CSS и включить версии ваших изображений в два раза по сравнению с их обычным разрешением. CSS будет определять, какое изображение отображать на основе устройства, на котором просматривается ваш сайт.
Обновления CSS, которые вам понадобятся, будут варьироваться в зависимости от ваших целевых браузеров, но хорошая новость заключается в том, что теперь это не так уж сложно и становится проще. Мы оставим фактическое кодирование на другой день.
Следует помнить одну вещь: вы можете разработать соглашение об именах для изображений сетчатки, чтобы можно было легко связать две версии изображения на случай, если их нужно будет отредактировать позже.
SVG
Другой подход - SVG или Scalable Vector Graphics. Как следует из названия, они ограничены векторной графикой и не будут работать с фотографическими изображениями, но SVG-графика устраняет необходимость в двух файлах изображений для каждой графики на вашем сайте. Опять же, существуют разные варианты от браузера к браузеру, поэтому вы захотите провести дополнительное исследование в зависимости от ваших потребностей.
И, как отмечалось выше, SVG, вероятно, не будет работать в качестве единственного решения на большинстве сайтов, если только на сайте нет изображений типа фотографий.
Грубая сила
Конечно, вы также можете просто сбросить файлы с низким разрешением и просто подавать изображения, готовые к Retina. Мы рекомендуем это только для пользователей с очень ограниченной аудиторией. Если вы знаете, что пропускная способность не будет проблемой, это может быть правильный путь, но это, безусловно, не лучшая практика
Другие решения для кодирования
На другом конце спектра усилий и элегантности находятся методы кодирования, которые основаны на некоторых изменениях на стороне сервера (таких как записи файла.htaccess) наряду с кодированием PHP и Javascript.
Это может быть вашим лучшим подходом, хотя приложенные усилия могут не стоить того для небольших проектов.
В целом, подход, который вы выберете, будет зависеть от вашей аудитории, характера визуальных образов вашего сайта и уровня технических знаний вашей команды разработчиков. Существует хорошее решение практически для любой ситуации. Единственное плохое решение - полностью игнорировать дисплеи Retina.
NASDAQ Фото через Shutterstock
