CodeGym /Kursy /Frontend SELF PL /Obrazy responsywne

Obrazy responsywne

Frontend SELF PL

Poziom 25 , Lekcja 4

Dostępny

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ślnego
srcset: zawiera listę obrazów i ich charakterystyki, oddzielone przecinkami
1x, 2x: wskazują współczynnik skalowania (np. 1x dla standardowej rozdzielczości i 2x dla urządzeń z wysoką gęstością pikseli)

Przykład użycia srcset:

HTML

    
      <!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:

HTML

    
      <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ówna 600px, użyj obrazu o szerokości 480px
800px: we wszystkich innych przypadkach użyj obrazu o szerokości 800px

Przykład użycia sizes:

HTML

    
      <!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ści 480px
Jeśli szerokość okna przeglądarki jest mniejsza lub równa 900px, użyj obrazu o szerokości 800px
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:

HTML

    
      <!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ślny
srcset: 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ści 480px
- do 900px — użyj obrazu o szerokości 800px
- powyżej 900px — użyj obrazu o szerokości 1200px
.responsive-img: klasa CSS, która ustawia obrazowi szerokość 100% i automatyczną wysokość, aby zajmował dostępne miejsce i zachowywał proporcje

Poprzednia Poprzednia lekcja

Następny Następna lekcja

Komentarze

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION