Element <source> to jedno z najbardziej praktycznych narzędzi dewelopera webowego, służące do definiowania alternatywnych źródeł mediów w elementach takich jak <audio>, <video> czy <picture>. Pozwala przeglądarce automatycznie wybrać najlepsze źródło pliku na podstawie formatu, rozdzielczości ekranu czy warunków medialnych, co realnie przyspiesza ładowanie i poprawia UX.
W tym wpisie o HTML, CSS i JavaScript omówimy składnię, atrybuty, praktyczne przykłady, zgodność z przeglądarkami oraz zaawansowane zastosowania w responsywnych layoutach. Jeśli tworzysz nowoczesne strony, <source> to must‑have w Twoim kodzie.
Czym dokładnie jest element <source>?
Element <source> nie renderuje treści – działa jako propozycja źródła dla nadrzędnego kontenera multimedialnego. Przeglądarka parsuje listę <source> kolejno, aż znajdzie pierwszy pasujący plik, ignorując resztę. To zapewnia zgodność między przeglądarkami i optymalizację ładowania zasobów.
Główne zastosowania: w <audio> i <video> dostarczasz pliki w różnych formatach (np. MP3, OGG, WebM); w <picture> serwujesz obrazy w zależności od rozdzielczości lub gęstości pikseli (np. Retina) i warunków medialnych.
Dla <audio>/<video> używaj atrybutu src, a dla <picture> – srcset i opcjonalnie sizes. Wszystkie współczesne przeglądarki obsługują ten element w pełni.
Atrybuty elementu <source> – pełna lista i opis
Element <source> wspiera atrybuty globalne HTML oraz dedykowane atrybuty specyficzne dla mediów. Oto kluczowe atrybuty z opisem i przykładami:
| Atrybut | Opis | Przykładowa wartość |
|---|---|---|
| src | Adres URL pliku audio/wideo (obowiązkowy w <audio> i <video>). |
src="audio.ogg" |
| type | Typ MIME pliku, opcjonalnie z parametrem codecs (pozwala pominąć nieobsługiwane formaty). |
type="audio/ogg; codecs=vorbis" |
| srcset | Lista adresów obrazów z deskryptorami (np. gęstość/rozmiar) – używane w <picture>. |
srcset="img-1x.jpg 1x, img-2x.jpg 2x" |
| sizes | Oczekiwany rozmiar obrazu w różnych layoutach (w połączeniu z CSS media queries). | sizes="(max-width: 600px) 100vw, 50vw" |
| media | Warunek medialny (jak media query w CSS) – wybiera źródło na podstawie cech urządzenia. | media="(min-width: 768px)" |
Te atrybuty precyzyjnie sterują doborem zasobów i ograniczają zbędne transfery danych.
Podstawowe przykłady użycia <source>
Zacznijmy od prostych przypadków. Pamiętaj: zawsze dodawaj fallback dla starszych przeglądarek i nieobsługiwanych formatów.
1. Audio z wieloma formatami
Przeglądarka wybierze pierwszy wspierany format (np. OGG dla Firefox, MP3 dla wielu innych). Oto przykładowy kod:
<audio controls>
<source src="audio.ogg" type="audio/ogg; codecs=vorbis">
<source src="audio.mp3" type="audio/mpeg">
Twoja przeglądarka nie obsługuje elementu audio.
</audio>
Efekt – użytkownik widzi kontrolki odtwarzacza, a ładuje się tylko natywnie wspierany plik.
2. Wideo z alternatywnymi źródłami
Dostarcz pliki WebM oraz MP4, aby zwiększyć kompatybilność. Przykład:
<video controls width="640" height="360">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
Twoja przeglądarka nie obsługuje elementu wideo.
</video>
Zaawansowane przykłady: responsywne obrazy z <picture>
Tu <source> błyszczy w połączeniu z media queries! Serwuj różne obrazy w zależności od szerokości ekranu lub gęstości pikseli. Przykład dla różnych szerokości:
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<source srcset="small.jpg">
<img src="fallback.jpg" alt="Responsywny krajobraz">
</picture>
Na desktopie (1200px+) załaduje się large.jpg, na tablecie medium.jpg, a na telefonie small.jpg.
Obsługa ekranów Retina z srcset i sizes
W przypadku wysokiej gęstości pikseli dostarczaj kilka wariantów jednego obrazu. Oto kod:
<picture>
<source
srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
type="image/jpeg">
<img src="photo-fallback.jpg" alt="Zdjęcie z srcset">
</picture>
W skrócie: sizes – określa przewidywaną szerokość obrazu w układzie (np. 100% viewportu na mobile); srcset – lista plików z deskryptorami szerokości (np. 400w), z których przeglądarka wybierze optymalny wariant.
To potrafi zmniejszyć zużycie danych nawet o 70% na urządzeniach mobilnych.
Integracja z CSS i JavaScript
CSS – osadź <picture>, wideo lub obraz w elastycznym kontenerze, aby skalowały się wraz z layoutem. Przykładowa klasa:
.responsive-media {
max-width: 100%;
height: auto;
}
JavaScript – możesz dynamicznie wstrzykiwać źródła w zależności od urządzenia lub widoczności elementu (np. z Intersection Observer). Przykład dodania źródła mobilnego:
const video = document.querySelector('video');
if (/Mobi/i.test(navigator.userAgent)) {
const mobileSource = document.createElement('source');
mobileSource.src = 'mobile-optimized.mp4';
mobileSource.type = 'video/mp4';
video.prepend(mobileSource);
video.load();
}
Obsługa przeglądarek i dobre praktyki
Element <source> jest wspierany we wszystkich współczesnych przeglądarkach (Chrome, Firefox, Safari, Edge), a dobór typu/formatu decyduje o ostatecznie wczytanym pliku.
Stosuj poniższe rekomendacje, aby maksymalnie wykorzystać potencjał <source>:
- dodawaj fallback – zawsze umieszczaj tekst zastępczy w
<audio>/<video>i element<img>w<picture>z poprawnymalt; - określaj type i codecs – używaj
type(np.image/avif,image/webp,video/mp4) oraz parametrucodecs, by uniknąć pobierania nieobsługiwanych plików; - testuj z Lighthouse – monitoruj wpływ na Core Web Vitals (LCP, CLS, INP) i eliminuj wąskie gardła;
- serwuj nowoczesne formaty najpierw – umieszczaj
<source type="image/avif">lub<source type="image/webp">przed JPEG/PNG, a przeglądarka wybierze najlepszy wariant; - ogranicz liczbę źródeł – zbyt wiele alternatyw spowalnia parsowanie i komplikuje utrzymanie.