5.1 Atrybut srcset
Obrazy responsywne odgrywają ważną rolę w tworzeniu responsywnych i zoptymalizowanych stron internetowych. Pozwalają na ładowanie obrazów o różnych rozmiarach i rozdzielczościach w zależności od urządzenia i warunków przeglądania, co poprawia wydajność i wygodę użytkowania. Główne narzędzia do realizacji obrazów responsywnych w HTML to atrybuty srcset i sizes.
Atrybut srcset służy do wskazania kilku źródeł obrazu w różnych rozmiarach lub rozdzielczościach. Przeglądarka wybiera najbardziej odpowiedni obraz w zależności od urządzenia użytkownika.
Składnia:
<img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Example Image">Gdzie:
src: wskazuje ścieżkę do obrazu domyślnegosrcset: zawiera listę obrazów i ich charakterystyki, oddzielone przecinkami-
1x,2x: wskazują współczynnik skalowania (np.1xdla standardowej rozdzielczości i2xdla urządzeń z wysoką gęstością pikseli)
Przykład użycia srcset:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład użycia srcset</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
alt="Przykład obrazu adaptacyjnego">
</body>
</html>
Wyjaśnienie kodu:
src="images/default.jpg": wskazuje obraz domyślny-
srcset: zawiera listę obrazów z podaniem ich szerokości w pikselach (480w,800w,1200w). Przeglądarka wybiera najbardziej odpowiedni obraz w zależności od szerokości okna przeglądarki
5.2 Atrybut sizes
Atrybut sizes używany jest w połączeniu z srcset do wskazania szerokości obrazu w różnych warunkach wyświetlania. Pozwala to przeglądarce lepiej dopasować odpowiedni obraz.
Składnia:
<img src="default.jpg"
srcset="image1.jpg 480w, image2.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
alt="Example Image">Gdzie:
sizes: zawiera listę warunków wyświetlania i odpowiednich szerokości obrazu(max-width: 600px) 480px: jeśli szerokość okna przeglądarki jest mniejsza lub równa600px, użyj obrazu o szerokości480px800px: we wszystkich innych przypadkach użyj obrazu o szerokości800px
Przykład użycia sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład użycia sizes</title>
<style>
.responsive-img {
width: 100%;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="Przykład obrazu adaptacyjnego">
</body>
</html>Wyjaśnienie kodu:
sizes określa szerokość obrazu dla różnych warunków wyświetlania:
- Jeśli szerokość okna przeglądarki jest mniejsza lub równa
600px, użyj obrazu o szerokości480px - Jeśli szerokość okna przeglądarki jest mniejsza lub równa
900px, użyj obrazu o szerokości800px - We wszystkich innych przypadkach użyj obrazu o szerokości
1200px
5.3 Obrazy responsywne
Obraz responsywny dla różnych rozmiarów ekranu
Stworzymy przykład, w którym obraz dostosowuje się do różnych rozmiarów ekranu z użyciem atrybutów srcset i sizes.
Przykład:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Obraz responsywny</title>
<style>
.responsive-img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="Przykład obrazu adaptacyjnego">
</body>
</html>Wyjaśnienie kodu:
src="images/default.jpg": wskazuje obraz domyślnysrcset: określa trzy wersje obrazu z różnymi szerokościami (480w,800w,1200w)-
sizes: określa szerokość obrazu dla różnych warunków:- do
600px— użyj obrazu o szerokości480px - do
900px— użyj obrazu o szerokości800px - powyżej
900px— użyj obrazu o szerokości1200px
- do
-
.responsive-img: klasa CSS, która ustawia obrazowi szerokość100%i automatyczną wysokość, aby zajmował dostępne miejsce i zachowywał proporcje