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-файлу, который будет масштабироваться до любого размера без потери качества
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ