Jak zoptymalizować obrazy na stronę i poprawić PageSpeed

Szybkość wczytywania jest potwierdzonym przez Google czynnikiem rankingowym — od 2018 roku na komputerach i od 2021 na urządzeniach mobilnych. Co więcej, przekłada się wprost na konwersję: według danych samego Google każda dodatkowa sekunda ładowania zwiększa liczbę porzuceń nawet o 32%. W e-commerce badania Portent pokazują, że strony wczytujące się w sekundę konwertują nawet trzykrotnie lepiej niż te, które potrzebują pięciu.

Obrazy odpowiadają zwykle za 50–80% wagi całej strony. Ich porządna optymalizacja jest więc pojedynczym działaniem o największym wpływie na wydajność dowolnego serwisu.

Co PageSpeed Insights sprawdza w obrazach

Google PageSpeed Insights (PSI) analizuje stronę i wypisuje problemy z obrazami w kilku kategoriach. Najczęściej pojawiają się te:

• „Wyświetlaj obrazy w formatach nowej generacji”: pojawia się, gdy strona korzysta z JPG lub PNG tam, gdzie WebP (albo AVIF) wyraźnie zmniejszyłby wagę plików.
• „Dobierz właściwy rozmiar obrazów”: pojawia się, gdy plik wgrany na serwer jest większy niż miejsce, w którym się wyświetla. Przykład: zdjęcie 2000 px pokazywane w polu 400 px.
• „Odłóż ładowanie obrazów poza ekranem”: pojawia się, gdy obrazy spod krawędzi ekranu wczytują się razem z resztą strony, zamiast dopiero wtedy, gdy użytkownik do nich doscrolluje (lazy loading).
• „Koduj obrazy wydajnie”: pojawia się, gdy zastosowana kompresja wciąż zostawia zapas — plik da się odchudzić bez zauważalnej straty jakości.
• „Obraz LCP”: wskazuje, który obraz jest elementem Largest Contentful Paint strony — czyli tym, od którego zależy jedna z metryk Core Web Vitals.

Sześć zasad optymalizacji obrazów w internecie

1. Dobierz format do rodzaju grafiki

Wybór formatu ma większe znaczenie niż jakakolwiek kompresja, którą zastosujesz później:

WebP daje pliki o 25–35% lżejsze od JPG i o 20–30% lżejsze od PNG przy tej samej jakości wizualnej. W 2026 roku obsługuje go ponad 97% używanych przeglądarek — w nowych serwisach nie ma już technicznego powodu, żeby z niego rezygnować.

2. Kompresuj, nie oddając widocznej jakości

Kompresja zmniejsza wagę pliku, nie ruszając wymiarów obrazu. Przy zdjęciach w JPG zejście ze stu procent jakości do osiemdziesięciu daje pliki 5–10 razy lżejsze, a różnicy na ekranie nie widać. To najlepszy przedział do zastosowań internetowych.

Praktyczne punkty odniesienia dla wagi plików:

• Baner główny (hero): poniżej 200 KB
• Zdjęcie produktowe (e-commerce): 50–150 KB
• Grafika w artykule na blogu: 50–120 KB
• Miniatura: 10–30 KB
• Logo (PNG/WebP): poniżej 30 KB
• Ikony SVG: poniżej 5 KB

3. Wgrywaj obrazy w rzeczywistych wymiarach wyświetlania

To najczęstszy i zarazem jeden z najkosztowniejszych błędów: wgrywanie plików znacznie większych niż miejsce, w którym się pojawiają. Przeglądarka pobiera cały obraz, a przy renderowaniu odrzuca nadmiarowe piksele.

Ile to naprawdę kosztuje:

• Zdjęcie produktowe 3000×3000 px pokazane w polu 600×600 px: przeglądarka pobiera 9 milionów pikseli, a wykorzystuje 360 tysięcy — 96% transferu idzie w próżnię.
• Baner o szerokości 4000 px na stronie o maksymalnej szerokości układu 1440 px: 63% pobranych pikseli ląduje od razu w koszu.

Zasada jest prosta: plik na serwerze powinien mieć najwyżej dwukrotność docelowych wymiarów (podwojenie obsługuje ekrany Retina i HiDPI). Do pola o szerokości 600 px wgraj maksymalnie 1200 px.

Skorzystaj z narzędzia Zmień rozmiar od ImageTools, aby ustawić wymiary jeszcze przed wgraniem pliku — podając dokładne wartości w pikselach albo w procentach.

4. Wdróż lazy loading

Lazy loading polega na wczytywaniu obrazów dopiero wtedy, gdy mają wjechać w widoczny obszar ekranu, zamiast pobierania wszystkiego naraz przy pierwszym ładowaniu. Efekt bywa spory: na stronach z dużą liczbą grafik — listingach produktów czy długich artykułach — potrafi zmniejszyć początkową wagę strony o 60–80%.

Najprostsze wdrożenie jest wbudowane we współczesny HTML — wystarczy dodać atrybut loading="lazy" do znaczników obrazu:

<!-- Obraz, który ma wczytać się natychmiast (nad krawędzią ekranu) -->
<img src="baner-glowny.webp" alt="Baner" loading="eager">
<!-- Obrazy, które mogą poczekać (pod krawędzią ekranu) -->
<img src="produkt-1.webp" alt="Produkt 1" loading="lazy">
<img src="produkt-2.webp" alt="Produkt 2" loading="lazy">

Ważne: nigdy nie stosuj loading="lazy" na głównym obrazie nad krawędzią ekranu (hero, baner, pierwsze zdjęcie produktu). Opóźnia to LCP — najważniejszą z metryk Core Web Vitals — i bezpośrednio obniża wynik w PageSpeed.

5. Podawaj width i height w znacznikach obrazu

Zaczynając wczytywać stronę, przeglądarka buduje układ, zanim pozna rozmiary obrazów. Jeśli width e height nie są podane, nie rezerwuje właściwego miejsca — a gdy obraz się wczyta, układ „przeskakuje” i przesuwa tekst oraz przyciski. Właśnie to PageSpeed mierzy jako Cumulative Layout Shift (CLS), kolejny wskaźnik Core Web Vitals.

<!-- Bez wymiarów: powoduje przeskok układu -->
<img src="produkt.webp" alt="Produkt">
<!-- Z wymiarami: miejsce jest zarezerwowane od początku -->
<img src="produkt.webp" alt="Produkt" width="600" height="600">

Wartości width e height w kodzie HTML nie muszą odpowiadać rozmiarowi, w jakim obraz się wyświetla — służą jedynie do ustalenia proporcji. Za rozmiar na ekranie odpowiada CSS.

6. Korzystaj z obrazów responsywnych i srcset

Atrybut srcset pozwala podać kilka wersji tego samego obrazu dla różnych urządzeń — mniejszą na telefony, większą na komputery. Przeglądarka sama wybiera wariant najlepiej pasujący do ekranu.

<img
  src="produkt-800.webp"
  srcset="produkt-400.webp 400w,
          produkt-800.webp 800w,
          produkt-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Produkt"
  width="800"
  height="800"
  loading="lazy"
>

W sklepach z dużą liczbą zdjęć produktowych srcset potrafi ograniczyć transfer danych dla użytkowników mobilnych o 40–60%.

Pełna lista kontrolna optymalizacji obrazów

Przejdź przez nią przed publikacją każdej strony i przy każdej wymianie grafik:

• ☐ Obrazy w WebP (lub SVG przy grafice wektorowej)
• ☐ Zastosowana kompresja — zdjęcia poniżej 150 KB, gdy tylko się da
• ☐ Właściwe wymiary — nie więcej niż dwukrotność docelowego pola
• ☐ loading="lazy" przy wszystkich obrazach pod krawędzią ekranu
• ☐ loading="eager" (albo brak atrybutu) przy głównym obrazie nad krawędzią ekranu
• ☐ width e height podane we wszystkich znacznikach <img>
• ☐ Atrybut alt z opisem przy każdym obrazie (dostępność + SEO)
• ☐ srcset przy obrazach wyświetlanych w bardzo różnych rozmiarach na telefonie i na komputerze
• ☐ Obraz LCP bez loading="lazy" i z fetchpriority="high" , jeśli to możliwe

Optymalizacja w zależności od platformy

WordPress

WordPress od wersji 6.1 sam konwertuje pliki do WebP, o ile serwer to obsługuje. Dla pewności zainstaluj wtyczkę optymalizacyjną — Imagify, ShortPixel ou Smush — która skompresuje pliki, przekonwertuje je do WebP i doda lazy loading także do grafik już leżących w bibliotece mediów.

Shopify

Shopify od 2021 roku automatycznie konwertuje grafiki do WebP i serwuje wersję dopasowaną do urządzenia. Sprzedawca musi pilnować tylko rozmiaru wgrywanych plików — zalecane jest 2048×2048 px dla zdjęć produktowych, a Shopify sam przeskaluje je do każdego miejsca na stronie.

Wix, Squarespace i inne kreatory stron

Większość współczesnych kreatorów sama kompresuje pliki i włącza lazy loading. Od użytkownika zależy jeszcze rozsądny rozmiar wgrywanych grafik — ośmiomegabajtowe zdjęcia prosto z aparatu obciążają serwer i potrafią wygenerować warianty większe, niż to potrzebne.

Strony w czystym HTML/CSS oraz frameworki (Next.js, Nuxt itd.)

Tutaj cała optymalizacja spoczywa na programiście. Komponent <Image> w Next.js automatyzuje na przykład lazy loading, srcset i konwersję do WebP. We frameworkach bez takiej warstwy trzeba przejść ręcznie przez powyższą listę kontrolną.

Jak zmierzyć efekt optymalizacji

Po wprowadzeniu zmian sprawdź rezultat tymi narzędziami:

• Google PageSpeed Insights (pagespeed.web.dev) — pełna analiza z diagnozą element po elemencie, osobno dla telefonu i komputera.
• Google Search Console → raport o jakości strony — pokazuje stan Core Web Vitals na podstawie realnych danych od odwiedzających.
• WebPageTest.org — szczegółowa analiza techniczna z wykresem waterfall, przydatna do wskazania konkretnego obrazu opóźniającego LCP.
• Chrome DevTools → Network — filtr „Img” pokazuje wszystkie wczytane obrazy wraz z ich wagą i czasem pobierania.

Najczęstsze pytania