От автора: относительно экранов с высоким DPI обычные изображения довольно хорошо работают в HTML5 и CSS. Поддержка тега picture и атрибутов srcset и sizes также довольно обширна. Однако фоновых изображений для ретина дисплеев прогресс не коснулся. Такие фоновые изображения зачастую очень большие (как в пикселях, так и по весу), и это негативно на них сказывается. На протяжении довольно долгого времени нам был доступен промежуточный метод решения данной проблемы, но сейчас появился способ куда лучше.
@media решения
Возьмем обычное изображение с разрешением 72DPI automobile.jpg и его версию с высоким разрешением automobile-2x.jpg. Между двумя изображениями можно переключаться в рамках одного элемента body:
|
1 2 3 4 5 6 7 8 9 10 11 |
body { background-image: url("automobile.jpg"); background-size: cover; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body { background-image: url("automobile-2x.jpg"); } } |
Функция image-set
Есть более краткий и эффективный метод – функция image-set. Значение на данный момент поддерживается только в Webkit браузерах, для него необходимо прописывать вендорные префиксы:
|
1 2 3 4 5 |
body { background-image: url("automobile.jpg"); background-image: -webkit-image-set(url("automobile.jpg") 1x, url("automobile-2x.jpg") 2x ); background-size: cover; } |
Вы могли заметить, что синтаксис очень похож на синтаксис с Х указателем в атрибуте srcset, который используется в обычных адаптивных изображениях.
Заключение
Функция image-set() – перспективный, но требующий тщательной проработки метод установки фоновых изображений для ретина дисплеев. Можно использовать обычные медиа запросы для поддержки во всех браузерах, а можно взять функцию image-set() и прописать фолбэк, который будет отвечать за показ изображений с обычным разрешением в браузерах без поддержки данной функции.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
