13. Czym jest element `<picture>` w HTML i jak się go używa?

Czym jest element <picture> w HTML i jak się go używa?

Element <picture> w HTML służy do dostarczania wielu wersji obrazu dla różnych warunków wyświetlania. Jest to szczególnie przydatne w projektowaniu responsywnym, gdzie chcesz podać różne obrazy w zależności od rozmiaru ekranu urządzenia, rozdzielczości wyświetlacza lub innych czynników.

Struktura elementu <picture>

Element <picture> jest kontenerem dla zero lub więcej elementów <source> oraz jednego elementu <img>. Elementy <source> definiują różne obrazy do załadowania w określonych warunkach, podczas gdy element <img> zapewnia obraz domyślny, jeśli żaden z warunków nie zostanie spełniony.

Oto podstawowy przykład użycia elementu <picture>:

<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg">
  <source media="(min-width: 500px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="Piękny krajobraz">
</picture>

Wyjaśnienie

1. Elementy <source>: Zawierają atrybut media, który jest zapytaniem medialnym określającym, kiedy dany obraz powinien być użyty. Atrybut srcset określa URL obrazu.
2. Element <img>: Działa jako obraz zapasowy. Jeśli żadne z zapytań medialnych <source> nie pasuje, ten obraz zostanie wyświetlony.

Korzyści z używania <picture>

• Responsywne obrazy: Różne obrazy mogą być ładowane w zależności od rozmiaru ekranu lub rozdzielczości, optymalizując czas ładowania i zużycie danych.
• Kierunek artystyczny: Możesz dostarczać różne wersje obrazu dla różnych urządzeń, zapewniając najlepszą prezentację.

Podsumowując, element <picture> jest potężnym narzędziem do tworzenia responsywnych projektów internetowych, które dostosowują się do różnych kontekstów użytkowników, poprawiając zarówno wydajność, jak i doświadczenie użytkownika.