#6 Multimedia HTML

Wstawiaj grafikę (img), dźwięk (MP3, WAV) i wideo (embed) na swoje strony WWW. Odkryj najlepsze formaty (GIF, JPG, PNG) oraz uniwersalne metody osadzania i pobierania plików (a, object). Zadbaj o dostępność i wydajność multimediów na stronie.

Zobacz więcej...

Wszystkie odcinki podcastu HTML:

Wstawianie grafiki

Element <img src="..." alt="..."> służy do wstawiania obrazków, grafik, zdjęć lub ilustracji na stronę WWW. Kluczowe atrybuty to:

src: wskazuje ścieżkę dostępu do lokalizacji, w której znajduje się obrazek.
alt (tekst alternatywny): krótka informacja, która pojawia się, jeśli grafika nie zostanie wyświetlona (np. gdy użytkownik wyłączył wyświetlanie grafiki) lub jest odczytywana przez syntezatory mowy.
width i height: określają szerokość i wysokość obrazka w pikselach ("x") lub w procentach ekranu ("x%"). Jest to dobry nawyk, ponieważ jeśli nie wstawimy rozmiarów, treść może się "rozjeżdżać" podczas wczytywania.

Formaty graficzne

Obrazki powinny być zapisane w jednym z trzech zalecanych formatów:

GIF: używany dla rysunków składających się z mniej niż 256 kolorów (np. przyciski menu). Obsługuje przezroczystość. Animowane bannery to specjalne pliki GIF, ale pamiętajmy, że im więcej klatek, tym większy rozmiar pliku.
JPG: przeznaczony dla zdjęć wielokolorowych. Nie obsługuje przezroczystości.
PNG: pozwala zapisywać grafiki i zdjęcia z bardzo dobrą jakością. Obsługuje kompresję oraz pełną i półprzezroczystość.

Należy unikać formatu BMP, który jest słabo skompresowany, co może kilkukrotnie zwiększyć rozmiar pliku. Multimedia znacząco zwiększają objętość strony, dlatego warto stosować kompresję.

Osadzanie multimediów innych niż grafika

Znacznik <embed> pozwala osadzić na stronie WWW pliki takie jak animacje, filmy lub muzyka. Wtyczka (plug-in) to niewielki program, który jest doinstalowywany do przeglądarki, aby umożliwić odtwarzanie danego pliku.

Znacznik <embed src="ścieżka" width="x" height="y"> współpracuje z różnymi plikami multimedialnymi:

Pliki dźwiękowe: *.wav, *.mid, *.mp3 (MPEG Layer-3).
Pliki wideo/animacje: *.avi, *.ra, *.mpeg, *.mov, *.asf.
Dokumenty PDF: element <embed> może służyć do bezpośredniego wyświetlenia pliku PDF w oknie przeglądarki, pod warunkiem, że użytkownik ma zainstalowany program Adobe Reader.

Ostrzeżenia dotyczące <embed>: polecenie <embed> sprawia wiele kłopotów, a jego użycie jest niezalecane dla plików audio-wideo, ponieważ mają one swoje dedykowane elementy (AUDIO, VIDEO). Ponadto, pliki multimedialne mają duże rozmiary, co może potwornie wydłużyć czas wczytywania strony.

Odsyłacz do pliku

Najbardziej uniwersalną metodą odtwarzania plików multimedialnych, która działa w każdej przeglądarce i z każdym formatem plików (np. JPG, AVI, WAV, TXT, DOC, PDF), jest użycie zwykłego odsyłacza.

Przykład użycia odsyłacza: <a href="ścieżka dostępu do pliku">opis</a>.

Odsyłacz do pliku posiada liczne zalety:

Nie powoduje opóźnienia w wczytywaniu strony, ponieważ plik nie jest umieszczony bezpośrednio na niej.
Działa z wszystkimi rodzajami plików.
Użytkownik może zdecydować, czy chce plik otworzyć, czy zapisać go na dysku.

W przypadku odsyłaczy do plików o większej objętości (np. większej niż 100 KB) dobrze jest podać ich rozmiar, aby użytkownik mógł zdecydować, czy chce uruchomić odnośnik.

Zagnieżdżanie plików multimedialnych

Element <object> działa podobnie jak <embed>, ale jest w założeniu bardziej uniwersalny. Jest przeznaczony do osadzania:

Różnorodnych plików multimedialnych (np. dokumenty MS Word, Excel, prezentacje PowerPoint).
Interaktywnych aplikacji, np. gier wideo, działających bezpośrednio wewnątrz strony.

Kluczową zaletą <object> jest to, że w jego wnętrzu można umieścić treść zastępczą (np. odsyłacz do pobrania pliku), która wyświetli się w przeglądarce, jeśli dany typ pliku nie jest przez nią obsługiwany.