Artykuł

Optymalizacja mediów strony pod szybkość i Core Web Vitals

Obrazy zazwyczaj odpowiadają za około 40 procent całkowitej wagi strony internetowej, więcej niż jakikolwiek inny typ zasobu, a wideo dodaje znacznie więcej na stronach bogatych w multimedia. Zadbanie o nie to pojedyncze działanie o najwyższej dźwigni, jakie możesz podjąć dla szybkości ładowania, wyników Core Web Vitals i pozycji w wyszukiwarce. Dobra wiadomość: nic z tego nie wymaga specjalistycznego oprogramowania ani serwera, a twoje pliki nigdy nie muszą opuszczać urządzenia.

Napisał Bastien Sulyan · Opublikowano 16 czerwca 2026

Wybierz właściwy format przed wszystkim innym

Wybór formatu liczy się bardziej niż jakikolwiek suwak jakości. Dla zdjęć na stronie WebP to właściwy wybór domyślny: jest o 25 do 35 procent mniejszy niż JPEG przy tej samej jakości wizualnej i obsługuje go każda nowoczesna przeglądarka. AVIF kompresuje jeszcze mocniej, nawet o 50 procent lepiej niż JPEG, kosztem wolniejszego kodowania. Używaj AVIF do obrazów hero i zdjęć produktów, które kompresujesz raz, a WebP do wszystkiego, co przetwarzasz wsadowo lub potrzebujesz szybko. PNG ma rację bytu tylko tam, gdzie potrzebujesz bezstratnej dokładności lub przezroczystego tła. SVG to jedyny sensowny wybór dla logo, ikon i ilustracji: skaluje się do dowolnego rozmiaru i często waży kilka kilobajtów wobec setek dla rasteryzowanego odpowiednika.

Kompresuj obrazy bez widocznej utraty jakości

Zacznij od zmiany rozmiaru do rzeczywistych wymiarów wyświetlania: obraz hero wyświetlany przy 1280 pikselach szerokości nie potrzebuje 4000 pikseli danych. Najpierw zmień rozmiar, potem kompresuj. Dla zdjęć jakość 80 w WebP lub JPEG to praktyczna granica, poniżej której zwykli oglądający zaczynają zauważać różnicę, więc celuj w 75 do 85 i obejrzyj wynik w pełnym powiększeniu przed publikacją. Dla grafik z tekstem i jednolitymi obszarami bezstratny PNG lub SVG zachowuje ostrość, którą formaty stratne rozmazują. Kompresor obrazów na tej stronie obsługuje wszystkie te formaty, działa w całości w twojej przeglądarce i stosuje te same algorytmy co dedykowane narzędzia desktopowe.

Konwertuj wideo na potrzeby sieci bez przesyłania go

Pętle tła i osadzone wideo to miejsca, w których optymalizacja mediów na stronie często zawodzi. MP4 z H.264 odtwarza się wszędzie, a WebM to darmowa licencyjnie alternatywa obsługiwana przez każdą nowoczesną przeglądarkę. Konwerter wideo tej strony koduje WebM w VP8, który znajduje się w tej samej klasie kompresji co H.264: sama zmiana kontenera nie zmniejsza więc rozmiaru pliku, prawdziwą korzyścią jest w pełni darmowy licencyjnie łańcuch kodeków oraz natywna obsługa kanału alfa. Praktyczne podejście to przekonwertować raz do WebM, serwować go jako preferowane źródło w elemencie wideo i zachować MP4 jako rozwiązanie awaryjne dla starszych przeglądarek. Konwersja działa wewnątrz twojej przeglądarki dzięki FFmpeg skompilowanemu do WebAssembly: nic nie jest przesyłane, a pliki do 500 MB konwertują się bez kolejki. Dla wbudowanego wideo tła rozważ też przycinarkę wideo, by wyciąć martwe sekundy przed kodowaniem: czas trwania to największy czynnik wpływający na rozmiar pliku.

Zasoby wbudowane: base64 i SVG

Bardzo małe obrazy, ikony i favicony osadzone bezpośrednio w HTML lub CSS jako ciągi base64 eliminują jedną podróż sieciową na zasób. Ma to sens dla zasobów poniżej około 2 KB, które pojawiają się na każdej stronie, takich jak sprite logo czy wskaźnik ładowania. Większe zasoby powinny pozostać osobnymi plikami, bo base64 koduje o 33 procent ciężej niż dane binarne, a przeglądarki buforują odwołania do plików, ale nie buforują niezależnie danych wbudowanych. Optymalizator SVG usuwa z wyeksportowanych SVG śmieci pozostawione przez edytor, nie naruszając wyglądu wizualnego. Konwerter obrazu na base64 generuje gotowy do wklejenia identyfikator URI data w twojej przeglądarce.

Kompromis między osobnym plikiem w pamięci podręcznej, wymagającym dodatkowego żądania HTTP, a zasobem inline Base64 około 33% większym i wysyłanym ponownie z każdą stroną

Dostarczaj właściwy rozmiar i ładuj go jako pierwszy

Dwa aspekty dostarczania plików mają równie duże znaczenie jak same pliki. Pierwszym jest responsywne dopasowanie rozmiarów. Dzięki liście srcset z deskryptorami szerokości (image-400.webp 400w, image-800.webp 800w itd.) przeglądarka wybiera najmniejszy plik, który nadal pokrywa ekran, mnożąc szerokość CSS przez device pixel ratio (stosunek pikseli fizycznych do logicznych) przed wysłaniem jakiegokolwiek żądania. Telefon z układem szerokim na 390px i ekranem 3x potrzebuje około 1170 pikseli, więc pobiera wersję 1200w i pomija oryginał na desktop. Drugim aspektem jest priorytet. Przeglądarki korzystają z preload scanner (mechanizmu wstępnego skanowania), który czyta dokument z wyprzedzeniem i zaczyna pobierać obrazy zanim główny parser do nich dotrze; dodanie fetchpriority="high" do największego obrazu above-the-fold (widocznego bez przewijania) mówi przeglądarce, żeby pobrała go jako pierwszego, co zazwyczaj decyduje o wartości Largest Contentful Paint.

Słupki porównujące oryginał z aparatu o rozdzielczości 4000 pikseli, rozmiar 1200 pikseli używany przez układ strony i miniaturę 480 pikseli, pokazujące, że zmiana rozmiaru oszczędza więcej niż ustawienia jakości

Narzędzia w tym artykule

Najczęściej zadawane pytania

Czy kompresja obrazów wpływa na moją pozycję w wyszukiwarce?

Google używa Core Web Vitals jako sygnału rankingowego, a Largest Contentful Paint to niemal zawsze obraz lub plansza wideo. Strona, której obraz hero ładuje się w mniej niż sekundę, wypada lepiej niż taka, gdzie trwa to trzy sekundy. Kompresja i właściwy format bezpośrednio wpływają na tę metrykę, więc tak, optymalizacja obrazów ma mierzalny wpływ na SEO. Efekt jest najsilniejszy na urządzeniach mobilnych, gdzie łącza są wolniejsze, a kara za ciężkie obrazy większa.

Dlaczego przetwarzać media lokalnie zamiast korzystać z usługi internetowej?

Większość internetowych narzędzi do mediów wymaga przesłania plików na zdalny serwer, co zajmuje czas, zużywa transfer i oznacza, że kopia twojego pliku istnieje w infrastrukturze, której nie kontrolujesz. Narzędzia na tej stronie działają w całości w twojej przeglądarce: twoje obrazy i wideo są przetwarzane na urządzeniu, a wynik pobierany bezpośrednio. Nie ma konta, nie ma czekania na przesłanie i nic z twoich plików nigdy nie trafia na serwer.