Jak optymalizowac obrazy na strone internetowa: kompletny poradnik na 2026 rok

Obrazy stanowia okolo 40% calkowitej wagi przecietnej strony internetowej. Zoptymalizuj je prawidlowo, a mozesz zmniejszyc wage strony o polowe, osiagnac Largest Contentful Paint ponizej 2,5 sekundy i zyskac wyzsze pozycje w wynikach wyszukiwania. Oto caly proces, krok po kroku.

Dlaczego optymalizacja obrazow jest wazniejsza niz kiedykolwiek

Wedlug danych HTTP Archive, mediana wagi strony na urzadzeniach mobilnych to teraz okolo 2,5 MB, a obrazy odpowiadaja za mniej wiecej 1 MB z tego. Core Web Vitals Google — w szczegolnosci Largest Contentful Paint (LCP) — bezposrednio mierza, jak szybko laduje sie Twoj najwiekszy widoczny element. Na wiekszosci stron tym elementem jest obraz.

Punkt odniesienia: LCP 2,5 sekundy lub mniej to „dobre". Powyzej 4 sekund to „slabe". Strony z obrazowym elementem LCP maja 75. percentyl czasu ladowania niemal dwukrotnie wolniejszy niz strony z tekstowym LCP. Roznica miedzy dobrze zoptymalizowanym banerem a rozdmuchanym to czesto roznica miedzy zielonym a czerwonym wynikiem Core Web Vitals.

Krok 1: Wybierz odpowiedni format

Wybor formatu ma pojedynczy najwiekszy wplyw na rozmiar pliku. Oto porownanie glownych formatow internetowych na podstawie realnych benchmarkow kompresji:

Dla wiekszosci stron WebP jest najbezpieczniejszym domyslnym wyborem. Dobrze radzi sobie zarowno ze zdjeciami, jak i grafikami, kompresuje agresywnie i dziala wszedzie. Jesli Twoj stos to obsluguje, serwuj AVIF jako glowny format z WebP jako fallbackiem za pomoca elementu <picture>. Mozesz skonwertowac JPG na WebP lub skonwertowac na AVIF w Vizua — wszystko dziala w przegladarce bez przesylania.

Chcesz dokladniejszego porownania? Sprawdz nasz artykul WebP vs AVIF i poradnik o kompresji stratnej vs bezstratnej.

Krok 2: Zmniejsz wymiary do rzeczywistego rozmiaru wyswietlania

Zdjecie 4000 x 3000 pikseli z aparatu wyswietlane w 800 x 600 na Twojej stronie marnuje okolo 80% swoich pikseli. Te niewidoczne piksele i tak kosztuja przepustowosc i czas parsowania.

Zasada: serwuj obrazy w wymiarach zblizonychm do renderowanego rozmiaru. Na standardowym ekranie dopasuj wymiary pikseli dokladnie. Na ekranie 2x Retina serwuj obraz dwukrotnie szerszy niz wyswietlany rozmiar — ale nie wiecej.

Praktyczne cele:

• Baner pelnej szerokosci: 1600-1920 px (do 2x dla Retina)
• Obraz w tresci bloga: 800-1200 px
• Miniaturka: 300-400 px
• Avatar: 64-128 px (do 256 px dla 2x)

Uzyj narzedzia Zmiana rozmiaru obrazu w Vizua, zeby przeskalowac obrazy do dokladnej szerokosci, jakiej potrzebujesz, przed kompresja. Samo to moze zmniejszyc rozmiar pliku o 70-90%.

Krok 3: Skompresuj z odpowiednim ustawieniem jakosci

Po wyborze formatu i zmianie wymiarow kompresja jest etapem, na ktorym uzyskujesz ostateczne oszczednosci. Suwak jakosci ma wieksze znaczenie, niz wiekszosc osob sadzi — zaleznosc miedzy jakoscia a rozmiarem pliku nie jest liniowa. Obnizenie jakosci JPEG ze 100 do 80 oszczedza ogromna ilosc miejsca; obnizenie z 80 do 60 przynosi malejace zyski z widocznymi artefaktami.

Zalecane ustawienia jakosci:

• JPEG: 75-85 — punkt rownowagi dla zdjec. JPEG z jakoscia 80 jest typowo o 60-80% mniejszy od nieskompresowanego oryginalu bez widocznej roznicy.
• WebP: 75-80 — rownowazna jakosc wizualna do JPEG 85, w mniejszym pliku.
• AVIF: 60-75 — nizsze wartosci i tak wygladaja swietnie dzieki wydajnosci kodeka.
• PNG: Uzyj maksymalnego poziomu kompresji (bezstratnej). Dla dalszych oszczednosci zredukuj do 8-bit (256 kolorow), jesli grafika na to pozwala.

Kompresor JPEG w Vizua obsluguje to automatycznie, wykorzystujac zoptymalizowane algorytmy, ktore zachowuja krawedzie i gradienty. Szczegolowy opis ustawien wedlug formatu znajdziesz w poradniku o kompresji bez utraty jakosci.

Krok 4: Dostarczaj obrazy efektywnie

Dobra kompresja to dopiero polowa sukcesu. Sposob, w jaki dostarczasz obrazy do przegladarki, ma rownie duze znaczenie dla wydajnosci.

Ustaw jawne wymiary

Zawsze dodawaj atrybuty width i height do tagow <img> (lub uzyj CSS aspect-ratio). To zapobiega przesunieciu ukladu — tresci skaczacych w miare ladowania sie obrazow — co bezposrednio wplywa na wynik Cumulative Layout Shift (CLS).

Leniwie laduj obrazy ponizej zgiecia

Dodaj loading="lazy" do kazdego obrazu, ktory nie jest widoczny przy pierwszym zaladowaniu strony. Przegladarka odroczY jego pobranie do momentu, gdy uzytkownik zblizy sie do niego przewijajac, oszczedzajac przepustowosc na poczatkowym zaladowaniu strony.

Priorytetyzuj baner glowny

Zrob odwrotnosc dla najwazniejszego obrazu nad zgieciem: dodaj fetchpriority="high" i upewnij sie, ze nie ma loading="lazy". Testy Google pokazuja, ze wstepnie zaladowane obrazy LCP osiagaja niemal idealne wyniki wydajnosci (75. percentyl 364 ms), podczas gdy leniwie zaladowane obrazy LCP sa niemal dwukrotnie wolniejsze (720 ms).

Uzyj responsywnych obrazow

Atrybuty srcset i sizes pozwalaja przegladarce wybrac najlepszy wariant obrazu dla rozmiaru i rozdzielczosci ekranu uzytkownika. Serwuj obraz 400 px na telefon, 800 px na tablet i 1600 px na desktop — wszystko z jednego tagu <img>.

Krok 5: Audytuj i mierz

Optymalizacja nie jest jednorazowym zadaniem. Kazdy nowy obraz, ktory dodasz, jest szansa na regresje.

• PageSpeed Insights: Uruchom PageSpeed Insights Google na kluczowych stronach. Sprawdz wynik LCP i wszelkie zalecenia „Serve images in next-gen formats" lub „Properly size images".
• Analiza w Network: Sprawdz zakladke Network w DevTools przegladarki. Posortuj wedlug rozmiaru. Jesli jakikolwiek pojedynczy obraz przekracza 200 KB, zapytaj, czy mozna go przeskalowac, ponownie skompresowac lub skonwertowac na lepszy format.
• Automatyzuj: Dodaj optymalizacje obrazow do swojego pipeline'u budowania. Wychwytuj zbyt duze obrazy, zanim trafa na produkcje.

Szybka lista kontrolna

• Uzywaj WebP lub AVIF jako domyslnego formatu
• Skaluj obrazy do rzeczywistych wymiarow wyswietlania (nie szersze niz potrzeba)
• Kompresuj: JPEG/WebP przy jakosci 75-85, AVIF przy 60-75
• Ustawiaj width i height na kazdym <img>
• fetchpriority="high" na banerze/elemencie LCP
• loading="lazy" na wszystkim ponizej zgiecia
• Uzywaj srcset/sizes do responsywnego dostarczania
• Utrzymuj banery ponizej 200 KB, miniaturki ponizej 80 KB
• Usuwaj zbedne metadane (EXIF, profile ICC) — sprawdz nasz poradnik o danych EXIF i prywatnosci
• Regularnie audytuj za pomoca PageSpeed Insights

Najczesciej zadawane pytania