6.1 srcset və sizes atributlarından istifadə
Yüksək piksel sıxlığına malik ekranlar, məsələn Apple şirkətinin Retina-displeyləri müasir cihazlar üçün standart olub. Bu displeylər bir düym üçün daha çox piksel (PPI) ilə təmin olunur ki, bu da daha aydın və detallı görüntü verir. Veb-tərtibatçılar üçün bu cür ekranlar üçün qrafikanın optimallaşdırılması vacibdir ki, istifadəçi təcrübəsi yüksək səviyyədə olsun. Gəlin baxaq, bunu necə edək.
Yüksək sıxlıqlı ekranlarla bağlı problemlər
Yüksək sıxlıqlı ekranlarda standart görüntülər bulanıq və ya piksel-piksel görünə bilər, çünki bir görüntü pikseli bir neçə displey pikselinə uzadılır. Bu problemin həlli üçün daha yüksək həlli şəkillərdən istifadə etmək lazımdır ki, bunlar sonra brauzer tərəfindən yüksək sıxlıqlı ekran üçün miqyaslanır.
srcset və sizes atributları, müxtəlif piksel sıxlıqları üçün müxtəlif şəkil versiyalarını göstərməyə imkan verir. Bu, brauzerin müəyyən cihaz üçün ən uyğun təsviri seçməyə kömək edir.
srcset və sizes istifadə nümunəsi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retina-displeylər üçün optimizasiya</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-displeylər üçün şəkil nümunəsi">
</body>
</html>
Kodun izahı:
srcset: müxtəlif piksel sıxlıqları üçün üç versiya şəkil göstərir (1x,2x,3x)-
sizes: görüntünün müxtəlif göstərmə şərtləri üçün enini müəyyən edir:600pxqədər — görüntü viewport genişliyinin100%-ni tutur1200pxqədər — görüntü viewport genişliyinin50%-ni tutur- Digər bütün hallarda — görüntü viewport genişliyinin
33%-ni tutur
6.2 Vektor qrafikasından istifadə (SVG)
Vektor qrafikası (SVG) yüksək sıxlıqlı ekranlar üçün əla bir həlldir, çünki SVG faylları miqyaslandıqda keyfiyyət itirmir. Onlar loqolar, ikonalar və interfeys elementləri üçün idealdır.
SVG-dən istifadə nümunəsi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retina-dispileylər üçün SVG istifadəsi</title>
</head>
<body>
<img src="images/logo.svg" alt="Loqo">
</body>
</html>
Kod izahı:
src="images/logo.svg": SVG faylının yolunu göstərir, hansı ki, hər hansı ölçüyə miqyaslanır və keyfiyyət itirmir
6.3 CSS-dən istifadə
Fon şəkilləri üçün media-sorğular və CSS xüsusiyyətlərindən istifadə edərək, cihazın pixel sıxlığından asılı olaraq müxtəlif versiya şəkilləri yükləyə bilərsiniz.
Fon şəkilləri üçün CSS istifadə nümunəsi:
.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');
}
}
Kod izahı:
.background: baza fon şəklini müəyyən edir@media only screen and (min-resolution: 2dppx): fon şəklini sıxlıq2xolan ekranlar üçün versiya ilə dəyişir@media only screen and (min-resolution: 3dppx): fon şəklini sıxlıq3xolan ekranlar üçün versiya ilə dəyişir
6.4 picture elementi
<picture> tagı bir neçə təsvir mənbəyini müxtəlif nümayiş şərtləri ilə göstərməyə imkan verir. Bu, şəkillərin daha mürəkkəb uyğunlaşdırılması hallarında faydalıdır.
<picture>-dən istifadə nümunəsi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retina ekranlar üçün <picture>-dən istifadə</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 ekranlar üçün nümunə şəkil">
</picture>
</body>
</html>
Kodun izahı:
<source>: müxtəlif təsvir mənbələrini nümayiş şərtləri ilə göstərir<img>:<picture>-i dəstəkləməyən cihazlar üçün standart təsviri təyin edir
6.5 Şəkillərin optimallaşdırılması nümunələri
Nümunə 1: Yüksək həllolunma qabiliyyətinə malik uyğunlaşan şəkil
Srcset və sizes atributlarından istifadə edərək yüksək sıxlıq ekranlar üçün optimallaşdırılmış bir şəkil nümunəsi yaradaq:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retina-ekranlar üçün uyğunlaşan şəkil</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-ekranlar üçün şəkil nümunəsi">
</body>
</html>
Kodun izahı:
srcset: fərqli piksel sıxlıqları üçün (1x,2x,3x) üç şəkil versiyasını təyin edir-
sizes: müxtəlif görüntü şərtləri üçün şəkil genişliyini təyin edir:600px-ə qədər — şəkil viewport-un100%-ni tutur1200px-ə qədər — şəkil viewport-un50%-ni tutur- Bütün digər hallarda — şəkil viewport-un
33%-ni tutur
Nümunə 2: Miqyaslı şəkillər üçün SVG istifadə etmək
Hər hansı bir cihazda keyfiyyətli görüntünü təmin etmək üçün SVG-dən istifadə edilən bir nümunə yaradaq:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retina-ekranlar üçün SVG istifadə edilməsi</title>
</head>
<body>
<img src="images/logo.svg" alt="Loqo">
</body>
</html>
Kodun izahı:
src="images/logo.svg": SVG faylına yol göstərir, hansı ki istənilən ölçüyə miqyaslana bilər və keyfiyyətini itirmir
GO TO FULL VERSION