6.1 Використання атрибута srcset і sizes
Екрани з високою щільністю пікселів, такі як Retina-дисплеї від Apple, стали стандартом для багатьох сучасних пристроїв. Ці дисплеї мають набагато більше пікселів на дюйм (PPI), що забезпечує чіткіше та деталізоване зображення. Для веброзробників важливо оптимізувати графіку для таких екранів, щоб враження користувача були на найвищому рівні. Давайте розглянемо, як це зробити.
Проблеми, пов’язані з екранами високої щільності
На екранах високої щільності стандартні зображення можуть виглядати розмитими або пікселізованими, оскільки один піксель зображення розтягується на кілька пікселів екрана. Для вирішення цієї проблеми потрібно використовувати зображення з вищою роздільною здатністю, які потім можуть бути масштабовані браузером для відображення на екрані високої щільності.
Атрибути srcset і sizes дозволяють вказувати різні версії зображень для різної щільності пікселів. Це допомагає браузеру обрати найбільш відповідне зображення для конкретного пристрою.
Приклад використання srcset і sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Оптимізація для Retina-дисплеїв</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Приклад зображення для Retina-дисплеїв">
</body>
</html>
Пояснення коду:
srcset: вказує три версії зображення для різної щільності пікселів (1x,2x,3x)-
sizes: визначає ширину зображення для різних умов відображення:- До
600px— зображення займає100%ширини вьюпорту - До
1200px— зображення займає50%ширини вьюпорту - У всіх інших випадках — зображення займає
33%ширини вьюпорту
- До
6.2 Використання векторної графіки (SVG)
Векторна графіка (SVG) є чудовим рішенням для екранів високої щільності, оскільки SVG-файли масштабуються без втрати якості. Вони ідеально підходять для логотипів, іконок та інших елементів інтерфейсу.
Приклад використання SVG:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Використання SVG для Retina-дисплеїв</title>
</head>
<body>
<img src="images/logo.svg" alt="Логотип">
</body>
</html>
Пояснення коду:
src="images/logo.svg": вказує шлях до SVG-файлу, який буде масштабуватись до будь-якого розміру без втрати якості
6.3 Використання CSS
Для фонового зображення можна використовувати медіа-запити та властивості CSS, щоб завантажувати різні версії зображень залежно від щільності пікселів пристрою.
Приклад використання CSS для фонового зображення:
.background {
background-image: url('images/background-1x.jpg');
}
@media only screen and (min-resolution: 2dppx) {
.background {
background-image: url('images/background-2x.jpg');
}
}
@media only screen and (min-resolution: 3dppx) {
.background {
background-image: url('images/background-3x.jpg');
}
}
Пояснення коду:
.background: визначає базове фонове зображення@media only screen and (min-resolution: 2dppx): замінює фонове зображення на версію для екранів із щільністю2x@media only screen and (min-resolution: 3dppx): замінює фонове зображення на версію для екранів із щільністю3x
6.4 Елемент picture
Тег <picture> дозволяє вказати кілька джерел зображення з різними умовами відображення. Це корисно для більш складних випадків адаптації зображень.
Приклад використання <picture>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Використання <picture> для Retina-дисплеїв</title>
</head>
<body>
<picture>
<source srcset="images/image-3x.jpg" media="(min-resolution: 3dppx)">
<source srcset="images/image-2x.jpg" media="(min-resolution: 2dppx)">
<img src="images/image-1x.jpg" alt="Приклад зображення для Retina-дисплеїв">
</picture>
</body>
</html>
Пояснення коду:
<source>: вказує різні джерела зображення з умовами відображення<img>: задає зображення за замовчуванням для пристроїв, які не підтримують<picture>
6.5 Приклади оптимізації зображень
Приклад 1: Адаптивне зображення з високою роздільною здатністю
Створимо приклад, у якому зображення оптимізоване для екранів високої щільності з використанням атрибутів srcset та sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивне зображення для Retina-дисплеїв</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Приклад зображення для Retina-дисплеїв">
</body>
</html>
Пояснення коду:
srcset: визначає три версії зображення для різної щільності пікселів (1x,2x,3x)-
sizes: визначає ширину зображення для різних умов відображення:- До
600px— зображення займає100%ширини вьюпорту - До
1200px— зображення займає50%ширини вьюпорту - У всіх інших випадках — зображення займає
33%ширини вьюпорту
- До
Приклад 2: Використання SVG для масштабованих зображень
Створимо приклад, у якому використовується SVG для забезпечення якісного відображення на будь-яких пристроях:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Використання SVG для Retina-дисплеїв</title>
</head>
<body>
<img src="images/logo.svg" alt="Логотип">
</body>
</html>
Пояснення коду:
src="images/logo.svg": вказує шлях до SVG-файлу, який буде масштабуватись до будь-якого розміру без втрати якості
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ