Як створити легкі шпалери для екранів Retina з допомогою функції image-set

17

Від автора: щодо екранів з високим 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() і прописати фолбэк, який буде відповідати за показ зображень з звичайним дозволом в браузерах без підтримки даної функції.