Jak dodać wideo w tle sekcji bez spowalniania strony?
Chcę dodać wideo w tle sekcji hero na stronie – krótka zapętlona animacja wideo zamiast statycznego zdjęcia. Martwię się że to bardzo spowolni ładowanie. Jak to zrobić optymalnie?
1 Odpowiedź
Hej!
Wideo w tle wygląda efektownie, ale nieoptymalne może zniszczyć wydajność strony. Kilka zasad żeby mieć i piękny efekt i dobrą prędkość.
Optymalizacja pliku wideo – kluczowa sprawa
Plik wideo do tła sekcji powinien ważyć maksymalnie 2-5MB. Krótki klip (5-15 sekund), bez dźwięku, zoptymalizowany pod web.
Format MP4 (H.264) obsługiwany przez wszystkie przeglądarki. Dodatkowo WebM (VP9) który jest lżejszy. Do kompresji użyj HandBrake (darmowy) – rozdzielczość 1280×720, bitrate 1000-2000 kbps, bez audio.
Kod HTML – lazy loading i fallback
poster – obrazek wyświetlany zanim wideo się załaduje. preload=”none” – wideo nie ładuje się z wyprzedzeniem. muted – obowiązkowe dla autoplay w przeglądarkach.
Na mobile – wyłącz wideo
@media (max-width: 768px) {
video { display: none; }
.hero { background-image: url('fallback.jpg'); }
}
Na telefonie wideo pochłania dane mobilne i baterie – lepiej statyczne zdjęcie. 😊
