Kompletny poradnik: rozmiary plików graficznych na stronę internetową

Każdy obraz na Twojej stronie internetowej ma określony budżet wagowy. Przekroczysz go — strona ładuje się w nieskończoność. Zmieścisz się — wszystko działa błyskawicznie. Ten poradnik podaje konkretne cele w KB dla każdego typowego zastosowania, odpowiednie wymiary pikseli i format, który pozwoli je osiągnąć.

Tabela referencyjna: optymalne rozmiary plików według zastosowania

Poniższe cele zakładają użycie formatu WebP lub AVIF. Jeśli korzystasz z JPEG, dolicz około 25-30% do każdej wartości.

Skąd biorą się te liczby

Mediana wagi strony internetowej na urządzeniach mobilnych to około 2,5 MB, a same obrazy odpowiadają za mniej więcej 1 MB — czyli około 40% całkowitej wagi strony, według danych HTTP Archive z 2025 roku. Próg Google dla „dobrego" Largest Contentful Paint to 2,5 sekundy. Żeby trafić w ten cel na połączeniu 4G (efektywna przepustowość około 1,5 MB/s), Twój baner główny musi załadować się w mniej niż sekundę — co oznacza, że powinien ważyć poniżej 200 KB.

Wartości w powyższej tabeli nie są przypadkowe. Wynikają z realnych budżetów wydajnościowych: łączny budżet obrazów 400-600 KB na typową stronę, rozdzielony między banery, obrazy w treści i miniaturki.

Format ma największe znaczenie

To samo zdjęcie przy tej samej jakości wizualnej może mieć radykalnie różny rozmiar pliku w zależności od formatu:

Przejście z JPEG na WebP oszczędza około 25-35%. Przejście na AVIF daje około 50% mniej w porównaniu z JPEG. Oba formaty obsługują przezroczystość. Szczegółowe porównanie znajdziesz w naszym poradniku WebP vs AVIF.

Możesz skonwertować swoje obrazy już teraz: JPG na WebP, dowolny format na AVIF lub skorzystaj z konwersji masowej dla wielu plików jednocześnie.

Wymiary pikseli: ukryty mnożnik

Rozmiar pliku jest funkcją dwóch czynników: liczby pikseli i kompresji. Większość osób skupia się na kompresji i ignoruje liczbę pikseli — a tymczasem zmniejszenie wymiarów daje znacznie większy efekt.

Szybki przykład: zdjęcie 4000 x 3000 to 12 milionów pikseli. Zmniejsz je do 1200 x 900, a otrzymasz 1,08 miliona pikseli — redukcja surowych danych o 91%. Jeszcze przed kompresją wyeliminowałeś większość wagi.

Zasada kciuka: nigdy nie serwuj obrazu szerszego niż jego kontener wyświetlania. Jeśli obszar treści Twojego bloga ma 720 px szerokości, obraz 1440 px (dla 2x Retina) to maksimum, jakie powinieneś serwować. Wszystko ponad to to stracona przepustowość.

Użyj narzędzia Zmiana rozmiaru obrazu w Vizua, żeby dostosować wymiary do dokładnych potrzeb. Następnie skompresuj za pomocą kompresora JPEG lub PNG, żeby uzyskać ostateczne oszczędności.

Jakość kompresji: jak znaleźć złoty środek

Gdy obraz ma odpowiedni rozmiar i odpowiedni format, jakość kompresji to ostatnie pokrętło. Oto praktyczny scenariusz pokazujący, jak te trzy dźwignie działają razem:

Punkt startowy: zdjęcie z aparatu, 4000 x 3000, zapisane jako PNG — około 14 MB.

1. Zmień rozmiar do 1200 x 900 (szerokość treści bloga, 2x Retina): ~3,5 MB jako PNG
2. Konwertuj na WebP z jakością 80: ~130 KB
3. Konwertuj na AVIF z jakością 65 (jeśli Twój stos to obsługuje): ~90 KB

To redukcja o 99,3% w porównaniu z oryginalnym PNG. Wynikowy obraz jest wizualnie nieodróżnialny od źródła przy normalnych rozmiarach wyświetlania.

Szczegółowe zalecenia dotyczące jakości dla każdego formatu znajdziesz w naszym poradniku: Jak kompresować obrazy bez utraty jakości.

Przypadki specjalne

Strony produktowe e-commerce

Zdjęcia produktów muszą wyglądać ostro przy powiększeniu. Serwuj główny obraz w rozdzielczości 800-1000 px (1600-2000 px dla Retina) w formacie WebP. Większość zdjęć produktowych kompresuje się dobrze do 80-150 KB. Miniaturki w siatce powinny mieć 300-400 px szerokości, ważyć około 20-50 KB każda.

Portfolio fotograficzne

Jakość jest priorytetem, ale czas ładowania również. Serwuj podglądy w rozdzielczości 1200-1600 px w WebP (jakość 85), celując w 150-250 KB. Oferuj oddzielny link „zobacz w pełnym rozmiarze" dla wersji wysokiej rozdzielczości.

Udostępnianie w mediach społecznościowych (Open Graph)

Obrazy OG powinny mieć wymiary 1200 x 630 px. Facebook i Twitter akceptują JPEG i PNG; niektóre platformy obsługują już WebP. Utrzymuj je poniżej 150 KB. Są pobierane przez crawlery, a nie ładowane leniwie przez przeglądarki, więc każdy kilobajt ma znaczenie.

Całkowity budżet obrazów na stronie

Przydatna rama: celuj w łączną wagę obrazów poniżej 500 KB na stronę. Zwykle oznacza to:

• 1 baner główny: ~150 KB
• 3-4 obrazy w treści: ~100 KB każdy, łącznie ~300-400 KB
• Miniaturki, avatary, ikony: ~50 KB łącznie

Przy takim budżecie Twoja strona ładuje się szybko na 4G i nie wyczerpuje pakietów danych mobilnych. Jeśli potrzebujesz więcej obrazów (galeria, siatka e-commerce), leniwe ładowanie utrzymuje początkowy load w ramach budżetu — tylko obrazy widoczne nad zgięciem liczą się do wydajności pierwszego ładowania.

Najczęściej zadawane pytania