Від автора: щодо екранів з високим DPI звичайні зображення досить добре працюють в HTML5 та CSS. Підтримка тегу picture і атрибутів srcset і sizes також досить обширна. Однак фонових зображень для ретина дисплеїв прогрес не торкнувся. Такі фонові зображення часто дуже великі (як в пікселях, так і по вазі), і це негативно на них позначається. Протягом досить довгого часу нам був доступний проміжний метод вирішення даної проблеми, але зараз з’явився спосіб набагато краще.
@media рішення
Візьмемо звичайне зображення з роздільною здатністю 72DPI automobile.jpg і його версію з високою роздільною здатністю automobile-2x.jpg. Між двома зображеннями можна перемикатися в рамках одного елемента body:
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 браузерах, для нього необхідно прописувати вендорные префікси:
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() і прописати фолбэк, який буде відповідати за показ зображень з звичайним дозволом в браузерах без підтримки даної функції.
