W HTML <source> to specjalny tag służący do definiowania alternatywnych źródeł plików multimedialnych dla elementów takich jak <audio>, <video> oraz <picture>. Pozwala on przeglądarce na wybór najbardziej odpowiedniego pliku w zależności od obsługiwanych formatów lub warunków wyświetlania.
Czym jest znacznik <source>?
- Znacznik
<source>– umożliwia zdefiniowanie wielu wersji tego samego pliku multimedialnego (np. różne formaty wideo lub audio), z których przeglądarka wybiera ten najlepiej obsługiwany; - obowiązkowo używany jest wewnątrz elementów:
<audio>,<video>,<picture>; - to tzw. element pusty (void element) – nie zawiera własnej treści i zawsze występuje jako samodzielny tag (bez tagu zamykającego).
Najważniejsze atrybuty <source>
- src – adres pliku źródłowego (np. ścieżka do pliku .mp3, .mp4, .webp);
- type – typ MIME pliku (np. „audio/mpeg”, „video/mp4”, „image/webp”), co ułatwia przeglądarkom prawidłową interpretację danych;
- media – warunek mediowy (media query), pozwala określić, kiedy dane źródło powinno być użyte (najczęściej z
<picture>dla responsywnych obrazów); - srcset – zestaw adresów obrazów o różnych rozdzielczościach lub wariantach, wykorzystywany z
<picture>.
Przykłady zastosowań
Wideo z alternatywnymi formatami
Pozwala to na lepszą kompatybilność z różnymi przeglądarkami:
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Twoja przeglądarka nie obsługuje wideo.
</video>
Przeglądarka wybierze pierwszą obsługiwaną wersję pliku.
Dźwięk – różne formaty audio
<audio controls>
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Twoja przeglądarka nie obsługuje audio.
</audio>
W tym przypadku, jeśli przeglądarka nie obsługuje formatu OGG, skorzysta z MP3.
Obrazy responsywne z <picture>
Idealne do serwowania np. innego rozmiaru lub formatu obrazu na komputerach i urządzeniach mobilnych:
<picture>
<source srcset="image-800.webp" type="image/webp" media="(min-width: 800px)">
<source srcset="image-400.webp" type="image/webp" media="(max-width: 799px)">
<img src="image-fallback.jpg" alt="Opis obrazka">
</picture>
Przeglądarka wybiera odpowiedni wariant na podstawie szerokości ekranu i obsługi WebP.
Charakterystyka i dobre praktyki
- Brak zawartości – tag
<source>nie zawiera żadnego tekstu czy innych elementów, same atrybuty decydują o jego działaniu; - Kolejność ma znaczenie – przeglądarka analizuje tagi
<source>od góry i wybiera pierwszy obsługiwany format; - Współpraca z fallbackiem – warto umieszczać domyślne treści (np. tradycyjny
<img>, tekst informujący o braku wsparcia elementu) jako ostatni element wewnątrz<audio>,<video>,<picture>.
Typowe zastosowania
- przygotowanie pluriformatycznych plików audio i wideo, tak by każdy użytkownik, niezależnie od przeglądarki, mógł odtworzyć multimedia,
- serwowanie obrazków responsywnych lub o różnej jakości w zależności od urządzenia i warunków wyświetlania,
- zwiększenie wydajności strony i komfortu użytkownika – obrazy czy filmy są ładowane wyłącznie wtedy, gdy są faktycznie potrzebne w danym środowisku.
Podsumowując – tag <source> w HTML to uniwersalne narzędzie pozwalające programiście zadbać o kompatybilność i optymalizację serwowania multimediów na stronie WWW. Efektywne użycie tego znacznika, wraz z odpowiednimi atrybutami, pozwala na stworzenie serwisów nowoczesnych, dostępnych i przyjaznych dla każdego użytkownika, niezależnie od konfiguracji przeglądarki czy urządzenia.
