Фонові зображення для екранів Retina за допомогою властивості завдання зображення

27 травня 2017 Опубліковано в css 1 Коментар »

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

Спосіб з використанням @media

Зображення високої роздільної здатності може бути показане на відповідних екранах за допомогою @media query, як ми розповідали раніше, за необхідності, перегляньте подробиці в цій статті. Скористаємося наступним кодом для перемикання між двома зображеннями, застосованими до тега body, - зображенням з роздільною здатністю 72DPI, що називається automobile.jpg, і версією високої роздільної здатності під назвою automobile-2x:

Використання функції завдання зображення

Більш коротким та ефективним способом може бути використання функції завдання зображення. Оскільки поки що вона підтримується тільки в браузерах на движку Webkit і в браузері Chrome, для її використання потрібна відповідна приставка виробника:

Можливо, Ви звернули увагу, що синтаксис вище дуже схожий на синтаксис x вказівника в srcset, який використовується для звичайних адаптивних зображень.

Висновок

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

---