Najlepszy format wideo na stronę: MP4, WebM i inne

TL;DR: Najlepszy format wideo na twoją stronę

Ten artykuł jest dość długi i bardzo szczegółowy. Oto krótkie podsumowanie „za długie; nie czytałem". Wybór właściwego formatu wideo zależy od twoich wymagań. MP4 jest uniwersalnie kompatybilny i idealny przy umiarkowanych rozmiarach plików. WEBM oferuje wydajniejszą kompresję i nadaje się do nowoczesnych, wysokowydajnych stron, ale ma ograniczone wsparcie przeglądarek. AVIF świetnie sprawdza się przy animacjach i zapewnia doskonałą jakość obrazu przy małych rozmiarach plików, ale nie jest obsługiwany przez wszystkie starsze urządzenia. Jest jeszcze kilka dodatkowych zalet i wad (patrz niżej). Innych formatów nie należy używać.

W przypadku filmów masz dwie opcje: Self-hosting lub profesjonalny hosting. Self-hosting oznacza samodzielne skonfigurowanie playera i ręczne zarządzanie różnymi jakościami wideo, co wymaga dodatkowego wysiłku i zasobów. Profesjonalne usługi natomiast zapewniają prawdziwy streaming adaptacyjny i znacznie ułatwiają zarządzanie wideo, co przekłada się na lepsze doświadczenie dla twoich odwiedzających.

Nasza wiedza o formatach wideo

W ostatnich latach intensywnie zajmowaliśmy się filmami w internecie i ich integracją zarówno w dużych, jak i małych projektach webowych. Dzięki tej pracy zdobyliśmy ogromne doświadczenie i rozumiemy wyzwania związane z integracją wideo na stronie — od optymalizacji czasu ładowania, przez znalezienie odpowiedniej równowagi między jakością a zużyciem danych, po spełnienie unijnych standardów dostępności wideo. Z niezadowolenia z innych rozwiązań stworzyliśmy Ignite Video Hosting. Ale to nie jest tu tematem.

Ważne kryteria wyboru formatu wideo

Mógłbyś oczywiście od razu przeskoczyć do tabeli, ale cofnijmy się o krok i najpierw przyjrzyjmy się podstawowym kryteriom. Bo jedno na wstępie: nie ma „jednego idealnego rozwiązania".

Dla nas kluczową rolę odgrywają zarówno aspekty techniczne, jak i potrzeby twojej grupy docelowej.

1. Jakość vs. czas ładowania Jakość i długość filmu znacząco wpływają na rozmiar pliku. Wyższa jakość często oznacza większe pliki, co może prowadzić do dłuższego ładowania. Zrównoważony stosunek między rozmiarem pliku a jakością jest kluczowy, aby nie frustrować użytkowników długim czasem oczekiwania.
2. Kompatybilność Format wideo powinien działać na jak największej liczbie urządzeń i przeglądarek. Wsparcie dla starszych przeglądarek i urządzeń mobilnych jest szczególnie ważne, aby dotrzeć do szerokiego grona odbiorców. Jako web developerzy czy designerzy wdrażający rozwiązania, zazwyczaj posiadamy najnowsze urządzenia i korzystamy z nowoczesnego oprogramowania. Niestety rzeczywistość wygląda inaczej. Stare przeglądarki. Stare komputery. Stare smartfony z przestarzałymi przeglądarkami.
3. Wymagania streamingowe Szczególnie w przypadku dłuższych filmów lub dużej liczby jednoczesnych widzów niezbędny jest wydajny streaming. Streaming adaptacyjny zapewnia, że użytkownicy otrzymują najlepszą jakość dostosowaną do prędkości ich internetu.
4. Dostępność Dostępne filmy są niezbędne dla wielu odbiorców. Obejmuje to możliwość dodawania napisów lub audiodeskrypcji oraz zapewnienie, że odtwarzacz wideo jest łatwy w obsłudze. Europejski Akt o Dostępności stanie się obowiązkowy w 2025 roku, co oznacza, że nie możesz go dłużej ignorować. (Szczegóły dotyczące wideo i dostępności znajdziesz tutaj, a dobry przykład dostępnego odtwarzacza wideo tutaj).
5. Zużycie pasma i obciążenie serwera Wydajny format wideo zmniejsza zużycie danych zarówno po stronie użytkowników, jak i serwerów. Jest to szczególnie ważne przy dużym ruchu lub ograniczonej pojemności serwera. W mniejszych projektach webowych często nie ma to znaczenia. Ale gdy masz wielu jednoczesnych odwiedzających, może to stać się problemem — albo po prostu kosztowne, ze względu na generowane duże pasmo.
6. Środowisko techniczne W jakim setupie będą odtwarzane filmy? Czy to „tylko" strona na WordPress, czy większy CMS jak Magnolia? Jak są tam zintegrowane filmy? Czy CMS obsługuje wybrany format? I w końcu: czy w ogóle mam wybór?
7. Przypadki użycia Zazwyczaj zaczynamy od najlepszego możliwego UX dla odwiedzających, więc różne przypadki użycia są kluczowe przy wyborze odpowiedniego formatu. Filmy w tle, odtwarzane za innymi elementami, często wymagają niższej jakości, aby zminimalizować czas ładowania. Filmy osadzone w treści, które mogą być dość długie, wymagają wyższej jakości i wydajnych opcji streamingu, aby zapewnić dobre doświadczenie użytkownika.
8. Self-hosting czy profesjonalny hosting? Jeśli chodzi o osadzanie filmów na stronie, masz w zasadzie dwie opcje: self-hosting lub profesjonalne usługi hostingowe. Przy self-hostingu potrzebujesz różnych komponentów, takich jak wydajny serwer, odpowiedni odtwarzacz wideo oraz wystarczające pasmo i przestrzeń dyskową do obsługi dużego ruchu. Dodatkowo musisz samodzielnie zarządzać kodowaniem filmów, aby udostępniać je w różnych jakościach. Alternatywnie, profesjonalne usługi hostingowe mogą zdjąć z ciebie tę pracę. Takie rozwiązania zapewniają streaming adaptacyjny, zoptymalizowaną jakość wideo i funkcje dostępności, które można łatwo zintegrować. Szczególnie w przypadku stron z wysokiej jakości treściami wideo ta opcja się opłaca, ponieważ eliminuje konieczność kodowania, integracji playera i budowania infrastruktury streamingowej.

Wszystkie formaty wideo na strony – szczegółowy przegląd

Dość gadania, przejdźmy do formatów. Jak widzisz powyżej, wybór odpowiedniego formatu wideo na stronę internetową w dużej mierze zależy od przeznaczenia filmu. Każdy format ma konkretne zalety i wady, które mogą mieć różną wagę w zależności od zastosowania. Przyjrzyjmy się szczegółowo najpopularniejszym formatom wideo, ich zastosowaniom oraz mocnym i słabym stronom.

MP4: Uniwersalny standard

MP4, oparty na standardzie MPEG-4, został opracowany do wydajnego przechowywania i odtwarzania danych wideo i audio. Jest jednym z najczęściej używanych formatów wideo i jest obsługiwany przez niemal wszystkie nowoczesne przeglądarki i urządzenia.

Zalety

• Wysoka kompatybilność: Działa w niemal wszystkich przeglądarkach, systemach operacyjnych i urządzeniach.
• Dobra jakość przy umiarkowanym rozmiarze pliku: Idealny do większości zastosowań.
• Obsługa streamingu: Umożliwia streaming adaptacyjny przez HLS.
• Dostępność: Obsługuje napisy i metadane.

Wady

• Przestarzała technologia kompresji: MP4 używa H.264, który jest mniej wydajny w porównaniu z nowoczesnymi kodekami jak AV1, co skutkuje większymi plikami przy tej samej jakości.
• Brak otwartej licencji: Kodek H.264 jest objęty patentem, a jego użycie może wymagać opłat licencyjnych, szczególnie w zastosowaniach komercyjnych.
• Brak kompresji bezstratnej: MP4 używa kompresji stratnej, co oznacza utratę jakości przy każdej kompresji – nie nadaje się tam, gdzie potrzebna jest najwyższa jakość.
• Brak elastyczności w dynamicznym dostosowywaniu: MP4 bez streamingu adaptacyjnego nie obsługuje dynamicznego dostosowywania jakości, co może być problematyczne przy zmiennych warunkach sieciowych. Owszem, radzi sobie ze streamingiem HLS, ale twój serwer i player muszą to obsługiwać.

Zastosowania MP4 to popularny format do osadzania filmów na stronach internetowych dzięki szerokiej kompatybilności z różnymi urządzeniami i przeglądarkami. Dobrze sprawdza się tam, gdzie wymagane jest odtwarzanie na większości platform, oraz w przypadku filmów o umiarkowanej długości i rozmiarze. Filmy w tle również dobrze działają z MP4, ponieważ format oferuje rozsądną równowagę między jakością a czasem ładowania. Pamiętaj jednak, żeby filmy w tle były jak najmniejsze i najkrótsze.

WEBM: Nowoczesny faworyt

WEBM został opracowany przez Google jako format open-source specjalnie dla internetu. Używa nowoczesnych kodeków jak VP9 lub AV1, które zapewniają wysoką kompresję i dobrą jakość.

Zalety

• Wysoka wydajność: Bardzo dobra jakość przy małych rozmiarach plików.
• Darmowy: Bez opłat licencyjnych dzięki naturze open-source.
• Obsługa streamingu: Obsługuje streaming adaptacyjny przez DASH.
• Dostępność: Obsługuje napisy i inne metadane.

Wady

• Kompatybilność: Ograniczone wsparcie w Safari i starszych urządzeniach. We wrześniu 2024 Safari miało globalny udział w rynku na poziomie ok. 9,2% (Źródło: Statista), co oznacza, że część użytkowników może mieć problem z odtworzeniem tych filmów. W zależności od twojej grupy docelowej, mniej więcej 1 na 10 odwiedzających może nie zobaczyć twojego wideo.
• Słabe wsparcie akceleracji sprzętowej: Brzmi nerdowsko, ale wiele starszych smartfonów i tabletów nie ma natywnej akceleracji sprzętowej dla filmów WebM. To oznacza większe obciążenie procesora urządzenia. Jeśli masz jeszcze inne animacje, dużo CSS, JavaScript itp., to często prowadzi do zacinania się lub słabej wydajności całej strony.

Zastosowania WEBM jest szczególnie odpowiedni dla stron, które stawiają na efektywne wykorzystanie pasma i szybkie ładowanie – zwłaszcza gdy priorytetem jest wydajność i małe rozmiary plików. Jest opłacalny, bo nie wymaga licencji. Dla nas największym problemem zawsze była kompatybilność. Chociaż liczba nieobsługiwanych urządzeń stale maleje, czy naprawdę chcesz potencjalnie wykluczyć 1 na 10 odwiedzających? My często wracaliśmy do MP4.

GIF: Przestarzały i niewydajny

To nie jest tak naprawdę format wideo. Dlaczego się tu pojawia? Bo w praktyce często widzimy GIF-y używane do animowania stron.

Szczerze: jeśli to nie jest animacja graficzna albo mem, to naprawdę zły pomysł.

Zalety

• Eee... no... Retro urok?

Wady

• Słaba jakość: Ograniczona paleta kolorów (256 kolorów) i brak opcji HD.
• Duże zużycie pasma: Bardzo duże pliki przy dłuższych animacjach. Jeśli twoi odwiedzający nie mają najlepszego internetu (np. w podróży), robi się naprawdę źle.
• Brak dostępności: Nie obsługuje napisów ani metadanych. Szczególnie problematyczne, jeśli próbujesz użyć go do osadzenia wideo.

Zastosowania Proste animacje lub drobne efekty wizualne. Jeśli twoja treść wygląda jak wideo – nie używaj GIF-a.

MOV: Przestarzały i niepraktyczny w sieci

MOV został opracowany przez Apple i był kiedyś standardowym formatem dla QuickTime. Oferuje wysoką jakość, ale – delikatnie mówiąc – jest przestarzały do użytku w sieci. Po prostu go nie używaj.

Wady

• Duże pliki: Niepraktyczne w zastosowaniach webowych.
• Ograniczona kompatybilność: Zoptymalizowany głównie pod urządzenia Apple.
• Nie nadaje się do wydajnego streamingu.

Zastosowania Ewentualnie do profesjonalnego montażu lub jako format pośredni w produkcji wideo. Ale jeśli ktoś wyśle ci plik MOV na stronę, nie osadzaj go bezpośrednio. Zerknij na MP4 lub WEBM powyżej.

AVI: Relikt przeszłości

AVI (Audio Video Interleave) został opracowany przez Microsoft i jest jednym z najstarszych formatów wideo. Podobnie jak w przypadku MOV, mamy jasne stanowisko: NIE UŻYWAJ GO! Jest po prostu przestarzały.

Wady

• Duże pliki: Bardzo niewydajne rozmiary plików.
• Ograniczona kompatybilność webowa: Nie nadaje się do nowoczesnych standardów webowych.
• (Wstyd: Inni web developerzy będą na ciebie dziwnie patrzeć, jeśli wrzucisz plik AVI na swoją stronę.)

Zastosowania Po prostu nie.

AVIF: Nowoczesny, ale wyspecjalizowany

AVIF (AV1 Image File Format) bazuje na kodeku AV1 i jest przeznaczony głównie do obrazów. Są przypadki, w których to dobry wybór, szczególnie gdy chodzi o animację. W takich sytuacjach zazwyczaj nie potrzebujesz klasycznego formatu wideo, bo straty jakości mogą często zepsuć animację.

Zalety

• Doskonała kompresja: Bardzo małe pliki przy wysokiej jakości.
• Open Source: Bez licencji i przyszłościowy.

Wady

• Ograniczone zastosowanie: Nie nadaje się do „długich" filmów. W tym przypadku wszystko powyżej 5-10 sekund jest uważane za długie.
• Kompatybilność: Nie wszędzie jeszcze w pełni obsługiwany. Podobnie jak WEBM, ok. 10-15% użytkowników może mieć starszą przeglądarkę i przez to nie zobaczyć wideo. Ten odsetek maleje, ale warto sprawdzić swoje statystyki i samodzielnie rozważyć za i przeciw.
• Brak opcji streamingu: Nie został zaprojektowany do streamingu adaptacyjnego.

Zastosowania Do animacji lub krótkich klipów, które muszą być ekstremalnie lekkie. Jeśli masz taki konkretny przypadek: śmiało. Aktualnie zalecamy dodanie fallbacku dla starszych przeglądarek i smartfonów.

Deep Dive: Streaming adaptacyjny wideo w sieci

Pewnie zauważyłeś, że dość mocno naciskaliśmy na temat „streamingu". To było po prostu jedno z największych wyzwań, z jakimi się zmierzyliśmy przy integracji wideo. Jasne, możesz hostować pliki MP4 lub WebM samodzielnie, ale to po prostu nie jest optymalne i jest skomplikowane.

Dlaczego? Magiczne słowo to „streaming adaptacyjny".

Streaming adaptacyjny plików self-hosted

Z formatem wideo hostowanym samodzielnie, takim jak MP4 czy WebM, technicznie możesz osiągnąć streaming adaptacyjny. Musisz jednak ręcznie stworzyć wideo w kilku poziomach jakości (np. 360p, 720p, 1080p). Następnie potrzebny jest player, który wybierze odpowiedni poziom jakości na podstawie przepustowości i urządzenia użytkownika. Oznacza to, że użytkownik z wolnym łączem dostaje niższą jakość (np. 360p), a szybsze połączenie zapewnia najlepszą jakość.

Streaming adaptacyjny przez serwisy hostingowe

Profesjonalne serwisy oferują „prawdziwy" streaming adaptacyjny, który automatycznie generuje różne poziomy jakości i dostarcza je użytkownikowi — bez konieczności ręcznej interwencji z twojej strony jako operatora strony. Serwisy te wykorzystują specjalne protokoły, takie jak HLS (HTTP Live Streaming) lub DASH, które zapewniają strumieniowanie wideo w małych segmentach. Jakość tych segmentów dynamicznie dostosowuje się do aktualnej przepustowości i urządzenia użytkownika. (Tak, możesz to zrobić z plikami self-hosted, ale musisz to samodzielnie skonfigurować.)

Użytkownicy zawsze otrzymują najlepszą możliwą jakość bez przerw w ładowaniu i długiego czasu startu — wszystko automatycznie.

Dlaczego to ważne?

• Streaming adaptacyjny plików (np. MP4/WebM) jest technicznie możliwy, ale musisz go skonfigurować samodzielnie. Zwykle nie jest to prawdziwy streaming, a raczej wybór spośród różnych wcześniej przygotowanych plików, z których player potem korzysta.
• Prawdziwy streaming adaptacyjny (HLS/DASH) wykracza daleko poza to, co można osiągnąć z wideo hostowanym samodzielnie, dostosowując jakość w czasie rzeczywistym. Streaming adaptacyjny elastycznie reaguje na przepustowość, co znacząco poprawia doświadczenie użytkownika, szczególnie przy zmiennych warunkach sieciowych.

Czy różnica jest naprawdę tak duża, że potrzebny jest osobny rozdział?

Tak, różnica jest nadal istotna, bo w praktyce często unikamy dodatkowego wysiłku. Jeden plik wrzucony do CMS. Jakoś to będzie. Sami to znamy — budujesz stronę z 1000 rzeczami do zrobienia i oczywiście renderowanie wideo w wielu wersjach we właściwych formatach często nie trafia na listę.

W tak konkurencyjnym środowisku jak web, „jakoś to będzie" staje się prawdziwym problemem — szczególnie gdy twoi odwiedzający nie mogą obejrzeć filmów albo mają kiepskie wrażenia.

Jeśli na przykład używasz wideo w tle na banerach lub w podobnych miejscach, powinieneś dobrać odpowiedni rozmiar w zależności od wymiarów i pozycji. To normalne w przypadku obrazów. Nie wrzucasz przecież PNG o wielkości 12 MB do treści — ale w przypadku wideo wielu o tym zapomina w praktyce.

Dawaj dowody: jaka jest realna różnica?

OK, teraz będzie trochę nerdowo. Możesz to przewinąć, jeśli chcesz.

Zróbmy przykład: przy umiarkowanym połączeniu 4G wynoszącym ok. 10 Mbit/s (1,25 MB/s), różnice między samodzielnie hostowanym MP4 a prawdziwym streamingiem adaptacyjnym są wyraźniejsze.

Założenia przykładu:

• Plik wideo: 20 MB, 1 minuta długości
• Prędkość połączenia (umiarkowane 4G): Średnio 10 Mbit/s (1,25 MB/s)

1. Plik MP4 (self-hosted, bez adaptacji)

• Czas pełnego pobrania: 20 MB / 1,25 MB/s ≈ 16 sekund
• Czas buforowania przed odtwarzaniem: Zwykle 25-30% wideo musi zostać wstępnie załadowane, co oznacza, że załadowanie pierwszych 5-6 MB trwa ok. 4-5 sekund.
• Jeśli połączenie stanie się niestabilne i spadnie poniżej 10 Mbit/s, odtwarzanie może się zatrzymać i wymagać ponownego załadowania, ponieważ jakość nie dostosowuje się dynamicznie.

2. Streaming adaptacyjny (HLS/DASH)

• Czas startu wideo: Prawdziwy streaming adaptacyjny dzieli wideo na mniejsze segmenty, zwykle o długości 2-10 sekund. Przy umiarkowanym połączeniu 4G pierwszy segment w niższej jakości jest ładowany, co pozwala na start wideo w ciągu ok. 1 sekundy.
• Ciągłe dostosowywanie: Streaming adaptacyjny dynamicznie dostosowuje jakość na podstawie aktualnej przepustowości. Jeśli połączenie spadnie do 6-8 Mbit/s, system automatycznie przełącza się na niższą rozdzielczość, aby utrzymać nieprzerwane odtwarzanie. Dzięki temu wideo pozostaje stabilne nawet przy słabszym połączeniu.

Podsumowanie czasów ładowania:

• MP4 bez streamingu adaptacyjnego: Start w ok. 4-5 sekund przy stabilnym umiarkowanym połączeniu 4G.
• Streaming adaptacyjny (HLS/DASH): Start w ok. 1 sekundy, bo ładuje tylko mały fragment w niższej jakości.

4 sekundy? Komu to przeszkadza? Po co się wysilać?

No więc... Wejdź teraz na jakąś stronę, przejrzyj treść i policz do czterech... część twoich odwiedzających już przewinęła dalej, przełączyła zakładkę albo po prostu wyszła.

Szczególnie przy połączeniach mobilnych, które często są niestabilne, ciągłe dostosowywanie jakości jest kluczowe dla pozytywnego doświadczenia użytkownika.

Podsumowanie: różne formaty dla różnych zastosowań

Długi artykuł. Przepraszam za to. Ale jak widzisz, nie ma „jednego rozwiązania". To skomplikowane.

1. MP4 – uniwersalny format do wszystkiego

• Kiedy używać? Gdy wideo musi działać bezproblemowo na wszystkich urządzeniach.
• Zalety: Wysoka kompatybilność, umiarkowany rozmiar pliku, wsparcie dla streamingu.
• Wady: Licencjonowany codec, mniej wydajna kompresja w porównaniu z nowszymi formatami.

2. WebM – dla nowoczesnych i wydajnych stron

• Kiedy używać? Gdy priorytetem jest szybkie ładowanie i mały rozmiar pliku.
• Zalety: Wydajna kompresja, nowoczesne kodeki, niskie zużycie transferu.
• Wady: Ograniczona kompatybilność (patrz wyżej) i ograniczone możliwości streamingu.

3. AVIF – do animacji i wydajnych obrazów

• Kiedy używać? Do wysokiej jakości animacji.
• Zalety: Doskonała kompresja, nowoczesna technologia, bez licencji.
• Wady: Ograniczona kompatybilność (patrz wyżej).

Albo użyj profesjonalnego hostingu wideo

Nasza opinia Czy jesteśmy tu neutralni? I tak, i nie.

Przez lata wdrażaliśmy jedno z tych rozwiązań, ale bądźmy szczerzy — wideo stało się tak istotną częścią stron internetowych. Tyle wysiłku i pieniędzy idzie na ich produkcję, a potem akceptujemy sztuczne przeszkody? Nie najlepszy pomysł.

Dla nas profesjonalny hosting stał się jedynym rozwiązaniem, ale wtedy pojawił się nowy problem z Vimeo, YouTube, Wistia — zgodność z RODO. Wszystkie wymagały zgody użytkownika i niezręcznych rozwiązań UX. Nie chcieliśmy kompromisów — ani z formatem, ani z technologią. Dlatego zbudowaliśmy Ignite. U nas możesz profesjonalnie hostować wideo już od 15 €. Automatycznie generujemy twoje wideo w różnych kodekach i rozmiarach. Wystarczy je zintegrować lub użyć naszego playera, który jest również dostępny (accessible).

Wiemy, że gdy masz 5-10 filmów na stronie, zarządzanie nimi staje się udręką — ogarnięcie wszystkich wersji, różnych formatów, miniatur podglądu itd.