picture

HTML5 wprowadził wiele nowych elementów i atrybutów, które umożliwiają twórcom stron internetowych większą kontrolę nad prezentacją treści na różnych urządzeniach i rozdzielczościach ekranu. Jednym z takich elementów jest tag <picture>, który pozwala na bardziej elastyczne zarządzanie obrazami. Dzięki niemu można określić wiele źródeł dla jednego obrazu, co pozwala przeglądarce wybrać najbardziej odpowiedni obraz w zależności od warunków, takich jak rozmiar ekranu czy typ połączenia internetowego.

Przykład zastosowania tagu <picture>

Poniżej przedstawiono przykład kodu HTML wykorzystującego tag <picture> do wyświetlenia różnych obrazów w zależności od szerokości ekranu urządzenia.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania tagu picture w HTML5</title>
    <style>
        /* Style dla przykładu */
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h3>Przykład wykorzystania tagu <picture></h3>
    <picture>
        <source media="(min-width: 650px)" srcset="large.jpg">
        <source media="(min-width: 465px)" srcset="medium.jpg">
        <img src="small.jpg" alt="Przykładowy obraz">
    </picture>
    <p>Tag <picture> pozwala na określenie różnych źródeł obrazów dla różnych rozdzielczości ekranu.</p>
</body>
</html>

W tym przykładzie:

  • source z atrybutem media określa warunki, przy których dany obraz powinien być wyświetlany. Na przykład, jeśli szerokość ekranu jest większa niż 650px, przeglądarka wybierze obraz large.jpg.
  • srcset w tagu source wskazuje ścieżkę do obrazu, który ma być wyświetlony, gdy warunki określone w atrybucie media są spełnione.
  • Tag <img> jest używany jako fallback dla przeglądarek, które nie obsługują elementu <picture>. Ustawia domyślny obraz (small.jpg) wraz z tekstem alternatywnym.

Zaawansowane zastosowania

Element <picture> może być również używany z atrybutem type, aby określić preferowany format obrazu w zależności od obsługi formatu przez przeglądarkę. Na przykład:

<picture>
    <source type="image/webp" srcset="example.webp">
    <img src="example.jpg" alt="Przykładowy obraz w formacie JPEG jako fallback">
</picture>

Podsumowanie

Tag <picture> w HTML5 stanowi potężne narzędzie do tworzenia responsywnych stron internetowych, umożliwiając twórcom treści elastyczne dostosowanie obrazów do różnych warunków wyświetlania. Dzięki niemu można nie tylko poprawić estetykę strony na różnych urządzeniach, ale również zoptymalizować czas ładowania strony, wybierając obrazy o odpowiednim rozmiarze. Użycie tego tagu jest krokiem w kierunku tworzenia bardziej dostępnych i przyjaznych dla użytkownika stron internetowych.

Poprzedni
Następny

Scroll to Top