18. Czym jest atrybut `srcset` w tagu `<img>` i jak się go używa?

Czym jest atrybut srcset w tagu <img> i jak się go używa?

Atrybut srcset w tagu <img> służy do określenia wielu źródeł obrazów, co pozwala przeglądarce wybrać najlepszą opcję w zależności od rozmiaru ekranu i rozdzielczości. Jest to szczególnie przydatne w responsywnym projektowaniu, gdzie potrzebujesz serwować różne obrazy dla różnych urządzeń w celu optymalizacji czasu ładowania i wydajności.

Kluczowe Koncepcje:

• Przełączanie rozdzielczości: Pozwala przeglądarce na wybór między obrazami o różnych rozdzielczościach. Jeśli projektujesz dla urządzeń o różnych gęstościach ekranów, srcset pomaga poprzez serwowanie odpowiedniego obrazu w zależności od charakterystyki urządzenia.
• Kierunek artystyczny: Możesz określić różne obrazy dla różnych warunków, takich jak zmiany proporcji obrazu.

Przykładowe użycie:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="Piękny krajobraz">

W tym przykładzie przeglądarka wybierze obraz na podstawie obecnej szerokości widoku:

• small.jpg będzie używany dla widoków do 500 pikseli szerokości.
• medium.jpg będzie używany dla widoków do 1000 pikseli szerokości.
• large.jpg będzie używany dla widoków do 1500 pikseli szerokości.

Jak to działa:

Atrybut srcset działa w połączeniu z atrybutem sizes (opcjonalnym), aby dać przeglądarce wskazówki, jak wybrać najlepszy obraz. Atrybut sizes określa rozmiar układu dla obrazu, pozwalając przeglądarce zdecydować, który obraz wybrać z listy srcset.

Przykład z sizes:

<img src="default.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px" alt="Przykład responsywny">

W tym przypadku przeglądarka używa atrybutu sizes, aby zdecydować, który obraz załadować:

• Dla widoków do 600px szerokości wybiera small.jpg.
• Dla widoków do 1200px szerokości wybiera medium.jpg.
• Dla szerszych widoków ładuje large.jpg.

Wniosek:

Efektywne użycie srcset może poprawić wydajność Twojej strony internetowej na różnych urządzeniach, zapewniając każdemu użytkownikowi najbardziej odpowiedni obraz dla jego urządzenia, co poprawia doświadczenie użytkownika i zmniejsza niepotrzebne zużycie danych.