Jak optymalizować obrazy na stronę internetową: kompletny poradnik na 2026 rok

Obrazy stanowią około 40% całkowitej wagi przeciętnej strony internetowej. Zoptymalizuj je prawidłowo, a możesz zmniejszyć wagę strony o połowę, osiągnąć Largest Contentful Paint poniżej 2,5 sekundy i zyskać wyższe pozycje w wynikach wyszukiwania. Oto cały proces, krok po kroku.

Dlaczego optymalizacja obrazów jest ważniejsza niż kiedykolwiek

Według danych HTTP Archive, mediana wagi strony na urządzeniach mobilnych to teraz około 2,5 MB, a obrazy odpowiadają za mniej więcej 1 MB z tego. Core Web Vitals Google — w szczególności Largest Contentful Paint (LCP) — bezpośrednio mierzą, jak szybko ładuje się Twój największy widoczny element. Na większości stron tym elementem jest obraz.

Punkt odniesienia: LCP 2,5 sekundy lub mniej to „dobre". Powyżej 4 sekund to „słabe". Strony z obrazowym elementem LCP mają 75. percentyl czasu ładowania niemal dwukrotnie wolniejszy niż strony z tekstowym LCP. Różnica między dobrze zoptymalizowanym banerem a rozdmuchanym to często różnica między zielonym a czerwonym wynikiem Core Web Vitals.

Krok 1: Wybierz odpowiedni format

Wybór formatu ma pojedynczy największy wpływ na rozmiar pliku. Oto porównanie głównych formatów internetowych na podstawie realnych benchmarków kompresji:

Dla większości stron WebP jest najbezpieczniejszym domyślnym wyborem. Dobrze radzi sobie zarówno ze zdjęciami, jak i grafikami, kompresuje agresywnie i działa wszędzie. Jeśli Twój stos to obsługuje, serwuj AVIF jako główny format z WebP jako fallbackiem za pomocą elementu <picture>. Możesz skonwertować JPG na WebP lub skonwertować na AVIF w Vizua — wszystko działa w przeglądarce bez przesyłania.

Chcesz dokładniejszego porównania? Sprawdź nasz artykuł WebP vs AVIF i poradnik o kompresji stratnej vs bezstratnej.

Krok 2: Zmniejsz wymiary do rzeczywistego rozmiaru wyświetlania

Zdjęcie 4000 x 3000 pikseli z aparatu wyświetlane w 800 x 600 na Twojej stronie marnuje około 80% swoich pikseli. Te niewidoczne piksele i tak kosztują przepustowość i czas parsowania.

Zasada: serwuj obrazy w wymiarach zbliżonych do renderowanego rozmiaru. Na standardowym ekranie dopasuj wymiary pikseli dokładnie. Na ekranie 2x Retina serwuj obraz dwukrotnie szerszy niż wyświetlany rozmiar — ale nie więcej.

Praktyczne cele:

• Baner pełnej szerokości: 1600-1920 px (do 2x dla Retina)
• Obraz w treści bloga: 800-1200 px
• Miniaturka: 300-400 px
• Avatar: 64-128 px (do 256 px dla 2x)

Użyj narzędzia Zmiana rozmiaru obrazu w Vizua, żeby przeskalować obrazy do dokładnej szerokości, jakiej potrzebujesz, przed kompresją. Samo to może zmniejszyć rozmiar pliku o 70-90%.

Krok 3: Skompresuj z odpowiednim ustawieniem jakości

Po wyborze formatu i zmianie wymiarów kompresja jest etapem, na którym uzyskujesz ostateczne oszczędności. Suwak jakości ma większe znaczenie, niż większość osób sądzi — zależność między jakością a rozmiarem pliku nie jest liniowa. Obniżenie jakości JPEG ze 100 do 80 oszczędza ogromną ilość miejsca; obniżenie z 80 do 60 przynosi malejące zyski z widocznymi artefaktami.

Zalecane ustawienia jakości:

• JPEG: 75-85 — punkt równowagi dla zdjęć. JPEG z jakością 80 jest typowo o 60-80% mniejszy od nieskompresowanego oryginału bez widocznej różnicy.
• WebP: 75-80 — równoważna jakość wizualna do JPEG 85, w mniejszym pliku.
• AVIF: 60-75 — niższe wartości i tak wyglądają świetnie dzięki wydajności kodeka.
• PNG: Użyj maksymalnego poziomu kompresji (bezstratnej). Dla dalszych oszczędności zredukuj do 8-bit (256 kolorów), jeśli grafika na to pozwala.

Kompresor JPEG w Vizua obsługuje to automatycznie, wykorzystując zoptymalizowane algorytmy, które zachowują krawędzie i gradienty. Szczegółowy opis ustawień według formatu znajdziesz w poradniku o kompresji bez utraty jakości.

Krok 4: Dostarczaj obrazy efektywnie

Dobra kompresja to dopiero połowa sukcesu. Sposób, w jaki dostarczasz obrazy do przeglądarki, ma równie duże znaczenie dla wydajności.

Ustaw jawne wymiary

Zawsze dodawaj atrybuty width i height do tagów <img> (lub użyj CSS aspect-ratio). To zapobiega przesunięciu układu — treści skaczących w miarę ładowania się obrazów — co bezpośrednio wpływa na wynik Cumulative Layout Shift (CLS).

Leniwie ładuj obrazy poniżej zgięcia

Dodaj loading="lazy" do każdego obrazu, który nie jest widoczny przy pierwszym załadowaniu strony. Przeglądarka odroczy jego pobranie do momentu, gdy użytkownik zbliży się do niego przewijając, oszczędzając przepustowość na początkowym załadowaniu strony.

Priorytetyzuj baner główny

Zrób odwrotność dla najważniejszego obrazu nad zgięciem: dodaj fetchpriority="high" i upewnij się, że nie ma loading="lazy". Testy Google pokazują, że wstępnie załadowane obrazy LCP osiągają niemal idealne wyniki wydajności (75. percentyl 364 ms), podczas gdy leniwie załadowane obrazy LCP są niemal dwukrotnie wolniejsze (720 ms).

Użyj responsywnych obrazów

Atrybuty srcset i sizes pozwalają przeglądarce wybrać najlepszy wariant obrazu dla rozmiaru i rozdzielczości ekranu użytkownika. 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. Każdy nowy obraz, który dodasz, jest szansą na regresję.

• PageSpeed Insights: Uruchom PageSpeed Insights Google na kluczowych stronach. Sprawdź wynik LCP i wszelkie zalecenia „Serve images in next-gen formats" lub „Properly size images".
• Analiza w Network: Sprawdź zakładkę Network w DevTools przeglądarki. Posortuj według rozmiaru. Jeśli jakikolwiek pojedynczy obraz przekracza 200 KB, zapytaj, czy można go przeskalować, ponownie skompresować lub skonwertować na lepszy format.
• Automatyzuj: Dodaj optymalizację obrazów do swojego pipeline'u budowania. Wychwytuj zbyt duże obrazy, zanim trafią na produkcję.

Szybka lista kontrolna

• Używaj WebP lub AVIF jako domyślnego formatu
• Skaluj obrazy do rzeczywistych wymiarów wyświetlania (nie szersze niż potrzeba)
• Kompresuj: JPEG/WebP przy jakości 75-85, AVIF przy 60-75
• Ustawiaj width i height na każdym <img>
• fetchpriority="high" na banerze/elemencie LCP
• loading="lazy" na wszystkim poniżej zgięcia
• Używaj srcset/sizes do responsywnego dostarczania
• Utrzymuj banery poniżej 200 KB, miniaturki poniżej 80 KB
• Usuwaj zbędne metadane (EXIF, profile ICC) — sprawdź nasz poradnik o danych EXIF i prywatności
• Regularnie audytuj za pomocą PageSpeed Insights

Najczęściej zadawane pytania