Хотя отображение изображений, относящихся к содержимому, на экранах высокого разрешения хорошо поддержано в HTML5 и CSS, включая новый элемент для больших изображений, а также атрибуты srcset и sizes, фоновым изображениям для экранов Retina почти не уделялось внимания, и для них не появлялось новых возможностей отображения. Так как фоновые изображения часто довольно большие и по разрешению и по размеру файла, это особенно неприятно. Хотя уже давно существовало посредственное решение, теперь есть и способ лучше. 

Способ с использованием @media

Изображение высокого разрешения может быть показано на подходящих экранах с помощью @media query, как мы рассказывали ранее, при необходимости, посмотрите подробности в этой статье. Воспользуемся следующим кодом для переключения между двумя изображениями, примененными к тегу body, — изображением с разрешением 72DPI, называющимся automobile.jpg, и версией высокого разрешения под названием automobile-2x:

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");
    }
}

Использование функции задания изображения

Более кратким и эффективным способом может быть использование функции задания изображения. Так как пока что она поддерживается только в браузерах на движке Webkit и в браузере Chrome, для ее использования нужна соответствующая приставка производителя:

body {
    background-image: url("automobile.jpg");
    background-image: -webkit-image-set(url("automobile.jpg") 1x, url("automobile-2x.jpg") 2x );
    background-size: cover;
}

Возможно, Вы обратили внимание, что синтаксис выше очень похож на синтаксис у x указателя в srcset, используемый для обычных адаптивных изображений.

Заключение

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование множественных фоновых изображений в CSS3
• Затемнение изображений простым и быстрым способом на чистом CSS
• Создание анимированных раздвигающихся изображений, закрывающих фон