Multimedia w HTML

Multimedia w HTML pozwalają na osadzanie w stronach obrazów, dźwięków, filmów oraz treści interaktywnych. Do tego celu służą różne znaczniki: <img>, <audio>, <video>, <iframe>, a także elementy canvas i SVG.

1. Obrazy – <img>

Podstawowa składnia:

• src – ścieżka do pliku
• alt – tekst alternatywny (ważny dla dostępności i SEO)
• width, height – wymiary obrazka

Obsługa wielu rozdzielczości – <picture>

Wynik: przeglądarka wybiera odpowiedni obrazek w zależności od rozdzielczości ekranu.

2. Audio – <audio>

Podstawowa składnia:

• controls – wyświetla przyciski (play, pauza, głośność)
• autoplay – automatyczne odtwarzanie (uwaga: często blokowane przez przeglądarki)
• loop – powtarzanie utworu w pętli

3. Wideo – <video>

Podstawowa składnia:

Atrybuty:

• controls – wyświetla przyciski sterujące
• autoplay – automatyczne odtwarzanie
• muted – dźwięk wyciszony
• loop – powtarzanie filmu
• poster="miniatura.jpg" – obrazek miniatury przed odtworzeniem

4. Osadzanie treści zewnętrznych – <iframe>

Przykład z YouTube:

Użycie <iframe> pozwala także na osadzanie map, prezentacji czy innych stron internetowych.

5. Canvas – <canvas>

Służy do rysowania grafik i animacji za pomocą JavaScript.

6. Atrybuty dostępności i wydajności

• alt (dla obrazów) – opis treści dla osób niewidomych i SEO
• preload="auto/metadata/none" – ładowanie danych audio/wideo z wyprzedzeniem
• loading="lazy" – leniwe ładowanie obrazów (tylko gdy użytkownik do nich dotrze)
• crossorigin – obsługa multimediów z innych domen

7. Przykładowa sekcja multimedialna na stronie

8. Dobre praktyki

• Dodawaj alt do obrazów.
• Używaj formatów zoptymalizowanych:
  • obrazy → WebP, AVIF (zamiast JPG/PNG),
  • audio → MP3, OGG,
  • wideo → MP4 (H.264).
• Stosuj responsywne obrazki (<picture>, srcset).
• Nie nadużywaj autoplay – może denerwować użytkowników.
• Stosuj lazy loading dla dużej ilości multimediów.