6.1 Użycie atrybutu srcset i sizes
Ekrany o wysokiej gęstości pikseli, takie jak wyświetlacze Retina od Apple, stały się standardem dla wielu nowoczesnych urządzeń. Te wyświetlacze mają znacznie więcej pikseli na cal (PPI), co zapewnia wyraźniejszy i bardziej szczegółowy obraz. Dla twórców stron internetowych ważne jest, aby zoptymalizować grafikę dla takich ekranów, żeby użytkownik miał jak najlepsze wrażenia. Zobaczmy, jak to robić.
Problemy związane z ekranami o wysokiej gęstości
Na ekranach o wysokiej gęstości standardowe obrazy mogą wyglądać na rozmazane lub pikselowate, ponieważ jeden piksel obrazu jest rozciągany na kilka pikseli ekranu. Aby rozwiązać ten problem, należy użyć obrazów o wyższej rozdzielczości, które mogą być następnie skalowane przez przeglądarkę dla wyświetlaczy o wysokiej gęstości.
Atrybuty srcset i sizes pozwalają określić różne wersje obrazów dla różnych gęstości pikseli. Pomaga to przeglądarce wybrać najodpowiedniejszy obraz dla konkretnego urządzenia.
Przykład użycia srcset i sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optymalizacja dla wyświetlaczy 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="Przykład obrazu dla wyświetlaczy Retina">
</body>
</html>
Wyjaśnienie kodu:
srcset: określa trzy wersje obrazu dla różnych gęstości pikseli (1x,2x,3x)-
sizes: definiuje szerokość obrazu dla różnych warunków wyświetlania:- Do
600px— obraz zajmuje100%szerokości viewportu - Do
1200px— obraz zajmuje50%szerokości viewportu - We wszystkich innych przypadkach — obraz zajmuje
33%szerokości viewportu
- Do
6.2 Użycie grafiki wektorowej (SVG)
Grafika wektorowa (SVG) jest świetnym rozwiązaniem dla ekranów o wysokiej gęstości, ponieważ pliki SVG skalują się bez utraty jakości. Są idealne do logo, ikon i innych elementów interfejsu.
Przykład użycia SVG:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Użycie SVG dla wyświetlaczy Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Wyjaśnienie kodu:
src="images/logo.svg": określa ścieżkę do pliku SVG, który będzie skalowany do dowolnego rozmiaru bez utraty jakości
6.3 Użycie CSS
Dla obrazów tła można użyć zapytania mediów i właściwości CSS, aby załadować różne wersje obrazów w zależności od gęstości pikseli urządzenia.
Przykład użycia CSS dla obrazów tła:
.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');
}
}
Wyjaśnienie kodu:
.background: definiuje bazowy obraz tła@media only screen and (min-resolution: 2dppx): zamienia obraz tła na wersję dla ekranów o gęstości2x@media only screen and (min-resolution: 3dppx): zamienia obraz tła na wersję dla ekranów o gęstości3x
6.4 Element picture
Tag <picture> pozwala określić kilka źródeł obrazu z różnymi warunkami wyświetlania. Jest to przydatne w bardziej złożonych przypadkach adaptacji obrazów.
Przykład użycia <picture>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Użycie <picture> dla wyświetlaczy 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="Przykład obrazu dla wyświetlaczy Retina">
</picture>
</body>
</html>
Wyjaśnienie kodu:
<source>: określa różne źródła obrazu z warunkami wyświetlania<img>: ustawia obraz domyślny dla urządzeń, które nie wspierają<picture>
6.5 Przykłady optymalizacji obrazów
Przykład 1: Adaptacyjny obraz o wysokiej rozdzielczości
Stworzymy przykład, w którym obraz jest zoptymalizowany dla ekranów o wysokiej gęstości z użyciem atrybutów srcset i sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adaptacyjne obraz dla wyświetlaczy 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="Przykład obrazu dla wyświetlaczy Retina">
</body>
</html>
Wyjaśnienie kodu:
srcset: określa trzy wersje obrazu dla różnych gęstości pikseli (1x,2x,3x)-
sizes: definiuje szerokość obrazu dla różnych warunków wyświetlania:- Do
600px— obraz zajmuje100%szerokości viewportu - Do
1200px— obraz zajmuje50%szerokości viewportu - We wszystkich innych przypadkach — obraz zajmuje
33%szerokości viewportu
- Do
Przykład 2: Użycie SVG dla skalowalnych obrazów
Stworzymy przykład, w którym używane jest SVG dla zapewnienia wysokiej jakości wyświetlania na każdym urządzeniu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Użycie SVG dla wyświetlaczy Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Wyjaśnienie kodu:
src="images/logo.svg": określa ścieżkę do pliku SVG, który będzie skalowany do dowolnego rozmiaru bez utraty jakości
GO TO FULL VERSION