Kompletny poradnik: rozmiary plikow graficznych na strone internetowa

Kazdy obraz na Twojej stronie internetowej ma okreslony budzet wagowy. Przekroczysz go — strona laduje sie w nieskonczonosc. Zmieszcisz sie — wszystko dziala blyskawicznie. Ten poradnik podaje konkretne cele w KB dla kazdego typowego zastosowania, odpowiednie wymiary pikseli i format, ktory pozwoli je osiagnac.

Tabela referencyjna: optymalne rozmiary plikow wedlug zastosowania

Ponizsze cele zakladaja uzycie formatu WebP lub AVIF. Jesli korzystasz z JPEG, dolicz okolo 25-30% do kazdej wartosci.

Skad biora sie te liczby

Mediana wagi strony internetowej na urzadzeniach mobilnych to okolo 2,5 MB, a same obrazy odpowiadaja za mniej wiecej 1 MB — czyli okolo 40% calkowitej wagi strony, wedlug danych HTTP Archive z 2025 roku. Prog Google dla „dobrego" Largest Contentful Paint to 2,5 sekundy. Zeby trafic w ten cel na polaczeniu 4G (efektywna przepustowosc okolo 1,5 MB/s), Twoj baner glowny musi zaladowac sie w mniej niz sekunde — co oznacza, ze powinien wazyc ponizej 200 KB.

Wartosci w powyzszej tabeli nie sa przypadkowe. Wynikaja z realnych budzetow wydajnosciowych: laczny budzet obrazow 400-600 KB na typowa strone, rozdzielony miedzy banery, obrazy w tresci i miniaturki.

Format ma najwieksze znaczenie

To samo zdjecie przy tej samej jakosci wizualnej moze miec radykalnie rozny rozmiar pliku w zaleznosci od formatu:

Przejscie z JPEG na WebP oszczedza okolo 25-35%. Przejscie na AVIF daje okolo 50% mniej w porownaniu z JPEG. Oba formaty obsluguja przezroczystosc. Szczegolowe porownanie znajdziesz w naszym poradniku WebP vs AVIF.

Mozesz skonwertowac swoje obrazy juz teraz: JPG na WebP, dowolny format na AVIF lub skorzystaj z konwersji masowej dla wielu plikow jednoczesnie.

Wymiary pikseli: ukryty mnoznik

Rozmiar pliku jest funkcja dwoch czynnikow: liczby pikseli i kompresji. Wiekszosc osob skupia sie na kompresji i ignoruje liczbe pikseli — a tymczasem zmniejszenie wymiarow daje znacznie wiekszy efekt.

Szybki przyklad: zdjecie 4000 x 3000 to 12 milionow pikseli. Zmniejsz je do 1200 x 900, a otrzymasz 1,08 miliona pikseli — redukcja surowych danych o 91%. Jeszcze przed kompresja wyeliminowales wiekszosc wagi.

Zasada kciuka: nigdy nie serwuj obrazu szerszego niz jego kontener wyswietlania. Jesli obszar tresci Twojego bloga ma 720 px szerokosci, obraz 1440 px (dla 2x Retina) to maksimum, jakie powinienes serwowac. Wszystko ponad to to stracona przepustowosc.

Uzyj narzedzia Zmiana rozmiaru obrazu w Vizua, zeby dostosowac wymiary do dokladnych potrzeb. Nastepnie skompresuj za pomoca kompresora JPEG lub PNG, zeby uzyskac ostateczne oszczednosci.

Jakosc kompresji: jak znalezc zloty srodek

Gdy obraz ma odpowiedni rozmiar i odpowiedni format, jakosc kompresji to ostatnie pokretlo. Oto praktyczny scenariusz pokazujacy, jak te trzy dzwignie dzialaja razem:

Punkt startowy: zdjecie z aparatu, 4000 x 3000, zapisane jako PNG — okolo 14 MB.

1. Zmien rozmiar do 1200 x 900 (szerokosc tresci bloga, 2x Retina): ~3,5 MB jako PNG
2. Konwertuj na WebP z jakoscia 80: ~130 KB
3. Konwertuj na AVIF z jakoscia 65 (jesli Twoj stos to obsluguje): ~90 KB

To redukcja o 99,3% w porownaniu z oryginalnym PNG. Wynikowy obraz jest wizualnie nieodrozniany od zrodla przy normalnych rozmiarach wyswietlania.

Szczegolowe zalecenia dotyczace jakosci dla kazdego formatu znajdziesz w naszym poradniku: Jak kompresowac obrazy bez utraty jakosci.

Przypadki specjalne

Strony produktowe e-commerce

Zdjecia produktow musza wygladac ostro przy powiekszeniu. Serwuj glowny obraz w rozdzielczosci 800-1000 px (1600-2000 px dla Retina) w formacie WebP. Wiekszosc zdjec produktowych kompresuje sie dobrze do 80-150 KB. Miniaturki w siatce powinny miec 300-400 px szerokosci, wazyc okolo 20-50 KB kazda.

Portfolio fotograficzne

Jakosc jest priorytetem, ale czas ladowania rowniez. Serwuj podglady w rozdzielczosci 1200-1600 px w WebP (jakosc 85), celujac w 150-250 KB. Oferuj oddzielny link „zobacz w pelnym rozmiarze" dla wersji wysokiej rozdzielczosci.

Udostepnianie w mediach spolecznosciowych (Open Graph)

Obrazy OG powinny miec wymiary 1200 x 630 px. Facebook i Twitter akceptuja JPEG i PNG; niektore platformy obsluguja juz WebP. Utrzymuj je ponizej 150 KB. Sa pobierane przez crawlery, a nie ladowane leniwie przez przegladarki, wiec kazdy kilobajt ma znaczenie.

Calkowity budzet obrazow na stronie

Przydatna rama: celuj w laczna wage obrazow ponizej 500 KB na strone. Zwykle oznacza to:

• 1 baner glowny: ~150 KB
• 3-4 obrazy w tresci: ~100 KB kazdy, lacznie ~300-400 KB
• Miniaturki, avatary, ikony: ~50 KB lacznie

Przy takim budzecie Twoja strona laduje sie szybko na 4G i nie wyczerpuje pakietow danych mobilnych. Jesli potrzebujesz wiecej obrazow (galeria, siatka e-commerce), leniwe ladowanie utrzymuje poczatkowy load w ramach budzetu — tylko obrazy widoczne nad zgiecia licza sie do wydajnosci pierwszego ladowania.

Najczesciej zadawane pytania