Jak zmniejszyć rozmiar obrazów na stronie internetowej?

Zdjęcie wykonane współczesnym telefonem lub aparatem może ważyć kilka, a nawet kilkanaście megabajtów. Umieszczenie takiego pliku bezpośrednio na stronie internetowej nie ma większego sensu. Użytkownik najczęściej ogląda obraz w znacznie mniejszym rozmiarze, a mimo to jego przeglądarka musi pobrać cały plik. Efektem może być wolniejsze ładowanie strony, większe zużycie transferu i pogorszenie doświadczenia użytkownika.

Optymalizacja obrazów nie polega jednak wyłącznie na ustawieniu magicznego limitu typu „każde zdjęcie powinno ważyć maksymalnie 150 KB”.

Znaczenie mają również:

• wymiary obrazu,
• format pliku,
• poziom kompresji,
• miejsce wyświetlania,
• urządzenie użytkownika,
• sposób ładowania grafiki,
• to, czy jest ona kluczowym elementem pierwszego ekranu.

Jak więc przygotowywać obrazy na stronę w 2026 roku, żeby wyglądały dobrze, ale nie obciążały jej niepotrzebnie?

Rozmiar obrazu, wymiary i waga pliku – to nie to samo

Na początku warto rozróżnić kilka pojęć.

Wymiary obrazu

To szerokość i wysokość wyrażona w pikselach, np.:

1920 × 1080 px

albo:

800 × 600 px.

Waga pliku

To ilość danych, które użytkownik musi pobrać.

Może wynosić np.:

• 45 KB,
• 180 KB,
• 1,2 MB,
• 8 MB.

Format

Określa sposób zapisania obrazu.

Popularne formaty to:

• JPEG,
• PNG,
• WebP,
• AVIF,
• SVG.

Dwa obrazy posiadające dokładnie te same wymiary mogą więc znacznie różnić się wagą.

Zdjęcie 1600 × 1000 px może ważyć zarówno 150 KB, jak i kilka megabajtów – zależnie od formatu, kompresji i zawartości.

Dlaczego warto optymalizować obrazy?

Grafiki są często jednymi z największych zasobów pobieranych podczas otwierania strony.

Szczególnie problematyczne mogą być:

• duże zdjęcia w sekcji hero,
• galerie,
• portfolio,
• zdjęcia produktów,
• pełnoekranowe fotografie,
• obrazy w artykułach.

Niepotrzebnie ciężkie pliki mogą zwiększać ilość danych pobieranych przez użytkownika i wydłużać czas potrzebny do wyświetlenia najważniejszych elementów strony.

Ma to szczególne znaczenie na:

• telefonach,
• wolniejszych połączeniach,
• stronach posiadających wiele obrazów,
• sklepach internetowych.

Obrazy a Core Web Vitals

Zdjęcia mogą mieć bezpośrednie znaczenie dla wyników wydajności strony.

Szczególnie istotny jest wskaźnik:

LCP – Largest Contentful Paint.

Mierzy on czas potrzebny do wyświetlenia największego istotnego elementu znajdującego się początkowo w obszarze widocznym dla użytkownika.

Bardzo często takim elementem jest:

• duże zdjęcie w pierwszej sekcji,
• baner,
• grafika produktu.

Jeżeli taki obraz:

• waży kilka megabajtów,
• jest ładowany za późno,
• posiada nieodpowiedni format,
• został objęty lazy loadingiem,

może pogarszać wynik LCP.

Czy optymalizacja zdjęć poprawia SEO?

Nie przedstawiałbym tego jako prostego równania:

mniejsze zdjęcie = wyższa pozycja w Google.

Optymalizacja obrazów przede wszystkim wspiera:

• wydajność strony,
• Core Web Vitals,
• komfort użytkownika,
• ograniczenie transferu,
• szybsze wyświetlanie zawartości.

Wydajność i doświadczenie użytkownika są częścią jakości technicznej serwisu, ale samo zmniejszenie zdjęć nie zastąpi:

• wartościowej treści,
• prawidłowej struktury,
• linkowania,
• dopasowania do intencji wyszukiwania.

Optymalizację grafik warto więc traktować jako jeden z elementów technicznego pozycjonowania strony internetowej, a nie samodzielny sposób na zdobycie wysokich pozycji.

Największy błąd: wgrywanie zdjęcia prosto z aparatu

Załóżmy, że fotografia posiada:

6000 × 4000 px

i waży:

9 MB.

Na stronie będzie natomiast wyświetlana w kolumnie o szerokości około:

700 px.

Wysyłanie użytkownikowi oryginalnego pliku jest wtedy ogromnym marnowaniem transferu.

Przeglądarka może wizualnie pomniejszyć obraz za pomocą CSS, ale nadal wcześniej musi go pobrać.

Zmniejszenie obrazu na ekranie nie oznacza zmniejszenia pobieranego pliku.

Jakie wymiary powinno mieć zdjęcie na stronie?

Nie istnieje jedna uniwersalna wartość.

Stare porady typu:

„wszystkie zdjęcia powinny mieć maksymalnie 1200 px szerokości”

są zbyt ogólne.

Obraz powinien mieć rozmiar dopasowany do miejsca, w którym jest używany.

Innych wymiarów potrzebuje:

• miniatura wpisu,
• zdjęcie produktu,
• obraz zajmujący połowę ekranu,
• pełnoekranowe zdjęcie hero,
• logo.

Dodatkowo trzeba uwzględnić wyświetlacze o wysokiej gęstości pikseli.

Czy trzeba przygotować zdjęcia 2× większe?

Czasami tak, ale nie oznacza to, że każdy użytkownik powinien pobierać największy wariant.

Przykładowo obraz wyświetlany na desktopie w szerokości:

800 px

może posiadać również wariant:

1600 px

dla ekranów o wysokiej gęstości pikseli.

Przeglądarka może następnie wybrać odpowiedni plik zależnie od urządzenia.

Do tego służą m.in. mechanizmy responsive images.

72 DPI na stronie internetowej – czy ma znaczenie?

Nie ma potrzeby ustawiać zdjęcia na 72 DPI tylko dlatego, że będzie wyświetlane w internecie.

To popularna zasada wywodząca się ze starszych porad dotyczących grafiki ekranowej.

Dla sposobu wyświetlania obrazu na stronie internetowej kluczowe są przede wszystkim jego:

• wymiary w pikselach,
• format,
• kompresja,
• sposób wyświetlania przez CSS i HTML.

Informacja o DPI ma znacznie większe znaczenie w kontekście druku niż podczas normalnego prezentowania zdjęcia w przeglądarce.

Dlatego zamiast pytać:

„Czy zdjęcie ma 72 DPI?”

lepiej sprawdzić:

„Czy rzeczywiście potrzebujemy obrazu 5000 × 3000 px w tym miejscu?”

Ile KB powinno ważyć zdjęcie na stronie?

Tu również nie istnieje jedna liczba odpowiednia dla każdego obrazu.

Miniatura o wymiarach kilkuset pikseli może ważyć kilkadziesiąt KB.

Duże zdjęcie hero może potrzebować większego pliku, aby nadal wyglądało dobrze na dużym monitorze.

Z kolei fotografia produktu z dużą ilością detali może wymagać innego poziomu jakości niż subtelne zdjęcie tła.

Dlatego nie stosowałbym sztywnej zasady:

„każdy obraz musi ważyć poniżej 150 KB”.

Lepsza zasada brzmi:

używaj najmniejszego pliku, który nadal zapewnia akceptowalną jakość w miejscu, w którym jest wyświetlany.

Czy obraz ważący 500 KB jest zawsze zły?

Nie.

Jeżeli jest to:

• duże zdjęcie produktowe,
• fotografia o bardzo wysokiej jakości,
• główny element wizualny strony,

500 KB może być uzasadnione.

Jeżeli natomiast 500 KB waży mała ikona albo miniatura wyświetlana w rozmiarze 300 × 200 px, prawdopodobnie jest sporo miejsca na optymalizację.

Jaki format obrazu wybrać?

W 2026 roku nie ograniczałbym się już do wyboru pomiędzy JPEG, PNG i WebP.

Do dyspozycji mamy również szeroko obsługiwany format AVIF.

AVIF

AVIF jest nowoczesnym formatem rastrowym zapewniającym bardzo dobrą kompresję.

Sprawdza się szczególnie w przypadku:

• fotografii,
• dużych grafik,
• obrazów posiadających wiele kolorów i detali.

Obsługuje:

• kompresję stratną,
• kompresję bezstratną,
• przezroczystość,
• szeroki zakres kolorów.

W wielu przypadkach pozwala uzyskać bardzo mały plik przy zachowaniu dobrej jakości obrazu.

WebP

WebP jest obecnie bardzo bezpiecznym i uniwersalnym wyborem dla nowoczesnych stron.

Obsługuje:

• kompresję stratną,
• kompresję bezstratną,
• przezroczystość,
• animacje.

W wielu przypadkach pozwala uzyskać mniejsze pliki niż JPEG lub PNG.

Jeżeli istniejący serwis wykorzystuje WebP i osiąga dobre wyniki, nie oznacza to jednak, że trzeba natychmiast przekonwertować całą bibliotekę do AVIF.

JPEG

JPEG nadal jest dobrym formatem dla fotografii.

Jego zalety to:

• bardzo szeroka kompatybilność,
• dobrze znany sposób kompresji,
• możliwość łatwego sterowania jakością.

Nowoczesne formaty często pozwalają jednak uzyskać mniejszy plik przy podobnym efekcie wizualnym.

PNG

PNG warto stosować przede wszystkim tam, gdzie rzeczywiście potrzebujemy jego właściwości.

Może być przydatny dla:

• grafik wymagających bezstratnego zapisu,
• obrazów z przezroczystością,
• niektórych screenshotów,
• grafik posiadających ostre krawędzie.

Nie jest natomiast dobrym pomysłem zapisywanie dużych fotografii jako PNG tylko dlatego, że:

„PNG ma lepszą jakość”.

Plik może wtedy ważyć wielokrotnie więcej niż odpowiedni AVIF, WebP czy JPEG.

SVG

SVG jest formatem wektorowym.

Świetnie sprawdza się dla:

• logo,
• ikon,
• prostych ilustracji,
• schematów,
• elementów geometrycznych.

Grafika wektorowa może być skalowana bez utraty ostrości.

Nie oznacza to jednak, że SVG nadaje się do zwykłych fotografii.

GIF

W przypadku dużych animowanych GIF-ów warto zastanowić się, czy rzeczywiście są najlepszym rozwiązaniem.

Wiele krótkich animacji można znacznie efektywniej zapisać jako:

• MP4,
• WebM,
• inny odpowiedni format wideo.

Animowany GIF potrafi ważyć wielokrotnie więcej niż odpowiadający mu materiał wideo.

AVIF, WebP, JPEG, PNG czy SVG – szybkie porównanie

Czy AVIF jest lepszy od WebP?

Nie zawsze warto podchodzić do tego jak do pojedynku, w którym jeden format musi wygrać w każdym przypadku.

AVIF może często osiągać bardzo dobre wyniki kompresji.

WebP natomiast jest:

• bardzo szeroko obsługiwany,
• dobrze wspierany przez narzędzia,
• sprawdzony w wielu istniejących witrynach.

Najlepiej przetestować konkretny obraz.

Może okazać się, że:

• AVIF 80 KB wygląda świetnie,
• WebP potrzebuje 110 KB,

ale w innym materiale różnica będzie znacznie mniejsza.

Czy WordPress obsługuje AVIF?

Tak.

WordPress obsługuje pliki AVIF natywnie od wersji 6.5, pod warunkiem że środowisko serwerowe posiada odpowiednie biblioteki do obsługi tego formatu.

Można więc:

• wgrywać AVIF do biblioteki mediów,
• wykorzystywać je podobnie jak JPEG czy WebP,
• generować z nich warianty rozmiarowe, jeśli serwer posiada odpowiednie możliwości.

Przed zmianą całej biblioteki warto sprawdzić konfigurację hostingu i wykorzystywanych wtyczek.

Jak działa kompresja obrazu?

Kompresja pozwala zmniejszyć ilość danych potrzebnych do zapisania grafiki.

Możemy wyróżnić dwa podstawowe typy.

Kompresja stratna

Usuwa część informacji z obrazu w sposób mający być możliwie mało zauważalny dla użytkownika.

Świetnie sprawdza się w przypadku:

• fotografii,
• zdjęć posiadających wiele kolorów,
• naturalnych tekstur.

Kompresja bezstratna

Zmniejsza rozmiar pliku bez utraty zapisanych informacji obrazu.

Może być potrzebna np. w grafikach, w których kluczowe są:

• bardzo ostre szczegóły,
• linie,
• tekst znajdujący się na obrazie.

Jaki poziom jakości ustawić?

Nie stosowałbym uniwersalnego:

„ustaw jakość zawsze na 70%”.

Różne kodeki interpretują wartość jakości w różny sposób.

Poziom 70 w JPEG nie jest bezpośrednio tym samym co 70 w WebP czy AVIF.

Najlepsza metoda jest prosta:

1. przygotuj obraz,
2. zmniejsz jego wymiary,
3. wybierz odpowiedni format,
4. przetestuj kilka poziomów kompresji,
5. porównaj jakość i wagę.

Zatrzymaj się w momencie, gdy dalsze zmniejszanie pliku zaczyna powodować widoczne pogorszenie jakości.

Jak zmniejszyć rozmiar zdjęcia bez widocznej utraty jakości?

Najlepsze efekty daje połączenie kilku działań.

1. Usuń niepotrzebny fragment zdjęcia poprzez kadrowanie.
2. Zmniejsz fizyczne wymiary obrazu.
3. Wybierz AVIF lub WebP, jeżeli pasują do zastosowania.
4. Zastosuj rozsądną kompresję.
5. Usuń niepotrzebne metadane.
6. Wygeneruj warianty dla różnych urządzeń.

Sam wybór nowego formatu nie naprawi zdjęcia, które nadal ma 7000 px szerokości i jest wyświetlane jako miniatura.

Jakie narzędzia można wykorzystać do kompresji zdjęć?

Dostępnych jest wiele narzędzi desktopowych, internetowych i automatycznych.

Popularne rozwiązania to m.in.:

• Squoosh,
• ImageOptim,
• TinyPNG / TinyJPG,
• narzędzia eksportu w programach graficznych,
• wtyczki optymalizujące obrazy w WordPressie.

Nie przywiązywałbym się do jednego narzędzia.

Najważniejszy jest końcowy rezultat:

• odpowiedni format,
• dobra jakość,
• niewielka waga.

Czy warto usuwać metadane EXIF?

Zdjęcie wykonane aparatem lub telefonem może zawierać dodatkowe informacje, np. dotyczące:

• modelu aparatu,
• parametrów wykonania zdjęcia,
• lokalizacji,
• oprogramowania.

W wielu zastosowaniach internetowych dane te nie są potrzebne.

Ich usunięcie może dodatkowo zmniejszyć wagę pliku i ograniczyć publikowanie niepotrzebnych informacji.

Responsive images – dlaczego są ważniejsze niż jeden „idealny” rozmiar?

Ta sama strona może zostać odwiedzona na:

• telefonie o szerokości 390 px,
• tablecie,
• laptopie,
• monitorze 4K.

Nie ma sensu wysyłać każdemu użytkownikowi dokładnie tego samego dużego obrazu.

HTML umożliwia wskazanie kilku wariantów za pomocą atrybutów:

• srcset,
• sizes.

Przykładowo:

<img
    src="zdjecie-800.webp"
    srcset="
        zdjecie-480.webp 480w,
        zdjecie-800.webp 800w,
        zdjecie-1600.webp 1600w
    "
    sizes="(max-width: 768px) 100vw, 800px"
    alt="Opis zdjęcia"
    width="800"
    height="533"
>

Przeglądarka może wtedy sama wybrać wariant najlepiej dopasowany do:

• szerokości ekranu,
• miejsca zajmowanego przez obraz,
• gęstości pikseli urządzenia.

WordPress i responsive images

WordPress od wielu lat posiada natywną obsługę responsywnych obrazów.

Po wgraniu zdjęcia system może generować kilka jego wariantów, np.:

• thumbnail,
• medium,
• medium_large,
• large,
• dodatkowe rozmiary zdefiniowane przez motyw.

W wygenerowanym kodzie WordPress może następnie dodać:

• srcset,
• sizes.

Dzięki temu przeglądarka nie musi zawsze pobierać największego pliku.

WordPress nie naprawi jednak każdej złej konfiguracji

Automatyczne generowanie rozmiarów nie oznacza, że każdy sposób wykorzystania obrazu będzie zoptymalizowany.

Problemy mogą pojawić się np. wtedy, gdy:

• szablon wymusza pełny oryginał,
• grafika została dodana jako background CSS,
• niestandardowy widget nie korzysta z srcset,
• wtyczka ładuje obraz w pełnym rozmiarze,
• brakuje właściwie skonfigurowanego atrybutu sizes.

Dlatego trzeba sprawdzić, jaki plik rzeczywiście pobiera przeglądarka, a nie tylko jakie wersje istnieją w bibliotece mediów.

Element picture – kiedy się przydaje?

HTML pozwala również podać kilka formatów tego samego obrazu.

Przykładowo:

<picture>
    <source srcset="zdjecie.avif" type="image/avif">
    <source srcset="zdjecie.webp" type="image/webp">
    <img
        src="zdjecie.jpg"
        alt="Opis zdjęcia"
        width="1200"
        height="800"
    >
</picture>

Przeglądarka może wtedy wybrać pierwszy obsługiwany format.

To sposób na wykorzystanie nowoczesnych formatów przy jednoczesnym pozostawieniu wariantu zapasowego.

Dlaczego warto podawać width i height?

Wymiary wpisane w HTML pomagają przeglądarce wcześniej zarezerwować odpowiednią przestrzeń na obraz.

Dzięki temu po jego załadowaniu pozostałe elementy strony nie muszą nagle przesuwać się w dół.

Pomaga to ograniczać problemy z:

CLS – Cumulative Layout Shift.

Nie oznacza to, że obraz przestaje być responsywny.

CSS może nadal skalować go do szerokości kontenera.

Lazy loading – czym jest?

Lazy loading opóźnia pobieranie obrazów znajdujących się poza aktualnie widoczną częścią strony.

Przykład:

<img
    src="realizacja.webp"
    alt="Opis realizacji"
    width="800"
    height="600"
    loading="lazy"
>

Dzięki temu użytkownik nie musi od razu pobierać:

• wszystkich zdjęć portfolio,
• całej galerii,
• obrazów znajdujących się na końcu artykułu.

Pliki mogą zostać pobrane dopiero, gdy użytkownik zbliży się do miejsca, w którym mają zostać wyświetlone.

Nie stosuj lazy loadingu do każdego obrazu

To bardzo ważna aktualizacja względem starszych poradników.

Obrazu znajdującego się w pierwszym ekranie – szczególnie obrazu LCP – zazwyczaj nie należy ładować przez loading=”lazy”.

W przeciwnym razie przeglądarka celowo opóźnia rozpoczęcie pobierania grafiki, którą użytkownik powinien zobaczyć jak najszybciej.

Dla zdjęcia hero można zamiast tego zastosować np.:

<img
    src="hero.webp"
    alt="Opis zdjęcia"
    width="1600"
    height="900"
    loading="eager"
    fetchpriority="high"
>

Co to jest fetchpriority?

Atrybut:

fetchpriority=”high”

pozwala zasugerować przeglądarce, że konkretny zasób ma wysoki priorytet pobierania.

Może być szczególnie przydatny dla głównego obrazu będącego kandydatem do LCP.

Nie należy jednak dodawać go do wszystkich zdjęć.

Jeżeli wszystko otrzyma wysoki priorytet, przeglądarka nadal będzie musiała zdecydować, które zasoby pobierać jako pierwsze.

Najlepiej stosować go oszczędnie, przede wszystkim dla najważniejszego obrazu pierwszego ekranu.

Czy trzeba preloadować zdjęcie hero?

Nie zawsze.

Jeżeli obraz znajduje się bezpośrednio w początkowym HTML jako element:

<img>

przeglądarka może odkryć go stosunkowo szybko.

Preload ma większe uzasadnienie, gdy ważny obraz:

• jest dodany przez CSS,
• pojawawia się dopiero po wykonaniu JavaScriptu,
• z innego powodu zostaje odkryty zbyt późno.

Nie należy preloadować wielu obrazów na zapas, ponieważ mogą konkurować o przepustowość z rzeczywiście krytycznymi zasobami.

Zdjęcie hero jako background czy img?

Projektanci często umieszczają główne zdjęcie jako:

background-image

w CSS.

W przypadku obrazu pełniącego ważną funkcję treściową warto rozważyć użycie zwykłego:

<img>

lub:

<picture>

Daje to łatwiejszą kontrolę nad:

• srcset,
• sizes,
• alt,
• fetchpriority,
• wykrywaniem obrazu przez przeglądarkę i wyszukiwarkę.

Grafiki będące wyłącznie dekoracją mogą natomiast pozostać tłem CSS.

Czy Google widzi obraz ustawiony w background-image?

W kontekście wyszukiwania obrazów standardowe elementy HTML takie jak:

<img>

oraz:

<picture>

są znacznie lepszym rozwiązaniem dla grafik, które chcemy udostępnić Google jako właściwą zawartość strony.

Tło CSS powinno być traktowane przede wszystkim jako element prezentacyjny.

ALT – co wpisać w opisie alternatywnym?

Atrybut alt powinien opisywać obraz w kontekście, w jakim znajduje się on na stronie.

Nie należy traktować go jako miejsca do upychania słów kluczowych.

Zamiast:

alt=”fotowoltaika Konin fotowoltaika Konin montaż paneli fotowoltaika”

lepiej użyć naturalnego opisu:

alt=”Instalacja fotowoltaiczna na dachu domu jednorodzinnego”

Jeżeli kontekst lokalny jest rzeczywiście widoczny lub istotny dla obrazu, może oczywiście znaleźć się w opisie.

Czy każdy obraz musi mieć opis ALT?

Każdy element img powinien posiadać odpowiednio ustawiony atrybut alt, ale nie każdy musi zawierać tekst.

Jeżeli obraz pełni wyłącznie funkcję dekoracyjną, właściwe może być:

<img src="dekoracja.svg" alt="">

Dzięki pustemu alt czytnik ekranu może pominąć element, który nie przekazuje użytkownikowi żadnej istotnej informacji.

Nie warto opisywać każdej:

• ozdobnej kropki,
• fali,
• strzałki,
• abstrakcyjnego tła.

Atrybut title przy obrazach – czy jest potrzebny?

Nie traktowałbym atrybutu title jako obowiązkowego elementu optymalizacji obrazu.

Znacznie ważniejsze są:

• alt,
• otaczający kontekst,
• właściwe osadzenie obrazu,
• jego wydajność.

Nie ma więc potrzeby kopiowania tej samej frazy kluczowej do:

• nazwy pliku,
• alt,
• title,
• podpisu.

Jak nazywać pliki zdjęć?

Nazwa powinna być czytelna i opisywać zawartość.

Zamiast:

IMG_8472847.jpg

można użyć:

instalacja-fotowoltaiczna-dom.webp

Nie trzeba jednak tworzyć sztucznych nazw typu:

fotowoltaika-konin-najlepsza-fotowoltaika-konin-tanio.webp

Nazwa pliku jest jednym z elementów pomagających opisać zasób, a nie miejscem do wielokrotnego powtarzania fraz SEO.

Zdjęcia z tekstem – czy to dobry pomysł?

Jeżeli ważna informacja znajduje się wyłącznie wewnątrz grafiki, może być trudniej dostępna dla:

• użytkownika korzystającego z czytnika ekranu,
• osoby powiększającej stronę,
• wyszukiwarki,
• użytkownika na małym ekranie.

Dlatego nagłówki, opisy usług i inne ważne treści lepiej umieszczać jako prawdziwy tekst HTML.

Grafika może go wspierać, ale nie powinna bez potrzeby zastępować treści.

Czy mapa obrazów jest potrzebna?

Google może wykrywać obrazy znajdujące się w normalnym kodzie HTML.

W rozbudowanych serwisach opartych mocno na grafikach można również wykorzystać informacje o obrazach w sitemapie.

Może mieć to sens np. dla:

• portfolio fotograficznego,
• dużego e-commerce,
• serwisu z dużą bazą grafik.

Nie każda prosta strona firmowa wymaga jednak osobnej mapy obrazów.

Więcej o sitemapach opisaliśmy w artykule Mapa strony XML – czym jest i czy jest potrzebna?

Jak optymalizować zdjęcia w WordPressie?

W przypadku WordPressa proces można podzielić na dwa etapy.

Przed wgraniem

Warto:

1. wykadrować zdjęcie,
2. zmniejszyć jego wymiary,
3. wybrać WebP lub AVIF,
4. ustawić odpowiedni poziom kompresji,
5. nadać czytelną nazwę.

Po wgraniu

Sprawdź:

• czy WordPress wygenerował odpowiednie warianty,
• czy strona wykorzystuje srcset,
• czy przeglądarka nie pobiera oryginału bez potrzeby,
• czy obrazy poniżej pierwszego ekranu korzystają z lazy loadingu,
• czy główny obraz nie jest błędnie ładowany lazy,
• czy grafiki posiadają odpowiednie alt.

Czy warto używać wtyczki do optymalizacji obrazów?

Może to być bardzo wygodne rozwiązanie, szczególnie w większym serwisie.

Wtyczka lub zewnętrzna usługa może automatycznie:

• kompresować pliki,
• generować WebP lub AVIF,
• optymalizować istniejącą bibliotekę,
• serwować odpowiedni format zależnie od przeglądarki.

Nie instalowałbym jednak kilku narzędzi realizujących jednocześnie te same zadania.

Może prowadzić to do:

• podwójnej kompresji,
• konfliktów,
• generowania dużej liczby dodatkowych plików,
• problemów z cache.

Elementor – na co szczególnie uważać?

W Elementorze warto dokładnie sprawdzić, w jaki sposób zdjęcie zostało dodane.

Obraz wykorzystany poprzez widget Image może być obsługiwany inaczej niż grafika ustawiona jako tło kontenera.

W przypadku backgroundów warto sprawdzić:

• jaki oryginalny plik jest pobierany,
• czy na mobile nadal pobierana jest duża wersja desktopowa,
• czy obraz hero nie jest odkrywany zbyt późno,
• czy można zastąpić go elementem img lub picture.

Samo ustawienie w CSS:

background-size: cover;

nie zmniejsza pobieranego pliku.

Galerie – jak je optymalizować?

Galeria zawierająca kilkadziesiąt fotografii może wygenerować bardzo duży transfer.

Warto zastosować:

• miniatury,
• responsive images,
• lazy loading,
• nowoczesny format,
• lightbox otwierający większą wersję dopiero po kliknięciu.

Nie ma potrzeby ładowania każdemu użytkownikowi 30 fotografii po 2500 px szerokości tylko po to, aby wyświetlić je w galerii po 300 px.

Zdjęcia produktów – nie kompresuj ich za mocno

W sklepie internetowym jakość fotografii ma bezpośredni wpływ na sposób prezentowania produktu.

Nie warto więc optymalizować obrazów wyłącznie pod minimalną liczbę KB.

Klient może chcieć:

• powiększyć produkt,
• zobaczyć fakturę materiału,
• sprawdzić drobne elementy,
• porównać kolory.

Dobrym rozwiązaniem jest posiadanie kilku wariantów:

• małej miniatury na listingu,
• średniej wersji na karcie produktu,
• większej wersji w galerii lub powiększeniu.

Takie podejście warto uwzględnić już podczas tworzenia sklepu internetowego.

CDN dla obrazów – czy warto?

W większych witrynach obrazy mogą być obsługiwane przez CDN lub usługę image CDN.

Tego rodzaju rozwiązanie może:

• przechowywać obrazy bliżej użytkownika,
• automatycznie zmieniać ich format,
• generować odpowiednie wymiary,
• kompresować grafikę na żądanie.

Nie oznacza to jednak, że każda niewielka strona firmowa musi posiadać rozbudowaną infrastrukturę CDN.

Najpierw warto naprawić podstawowe problemy, takie jak zdjęcia ważące kilka megabajtów.

Jak sprawdzić, które obrazy spowalniają stronę?

Można wykorzystać kilka narzędzi.

PageSpeed Insights

Pozwala sprawdzić stronę pod kątem wydajności i wskazuje m.in. problemy związane z obrazami.

Może zwrócić uwagę np. na:

• nieefektywne kodowanie,
• zbyt duże obrazy,
• problematyczny LCP.

Chrome DevTools

Zakładka Network pozwala zobaczyć:

• jaki plik został pobrany,
• jego wagę,
• format,
• czas pobierania,
• priorytet.

To bardzo dobry sposób, aby sprawdzić, czy na telefonie rzeczywiście pobierany jest mniejszy wariant zdjęcia.

Google Search Console

Raport Core Web Vitals w Google Search Console może wskazać grupy stron mających problemy z rzeczywistymi doświadczeniami użytkowników.

Nie powie jednak bezpośrednio:

„zmniejsz obraz X z 450 KB do 130 KB”.

Do szczegółowej diagnozy potrzebne są dodatkowe testy.

Nie optymalizuj tylko pod wynik 100/100

PageSpeed Insights jest bardzo przydatnym narzędziem diagnostycznym, ale nie powinien być celem samym w sobie.

Nie warto:

• niszczyć jakości zdjęć produktu,
• usuwać istotnych grafik,
• kompresować zdjęć do widocznych artefaktów,

tylko po to, aby poprawić laboratoryjny wynik o kilka punktów.

Celem jest szybka, użyteczna i atrakcyjna wizualnie strona.

Najczęstsze błędy przy obrazach na stronach internetowych

Jak optymalizować zdjęcie krok po kroku?

Praktyczny proces może wyglądać następująco.

1. Sprawdź, gdzie obraz będzie wyświetlany.
2. Ustal potrzebne wymiary.
3. Wykadruj niepotrzebny fragment.
4. Zmniejsz obraz przed publikacją.
5. Wybierz AVIF, WebP lub inny odpowiedni format.
6. Dostosuj poziom kompresji.
7. Porównaj jakość wizualną z rozmiarem pliku.
8. Dodaj czytelną nazwę pliku.
9. Przygotuj odpowiedni ALT.
10. Upewnij się, że strona korzysta z responsive images.
11. Dodaj lazy loading dla obrazów znajdujących się niżej.
12. Nie opóźniaj kluczowego obrazu LCP.
13. Sprawdź rzeczywiste pobieranie w DevTools lub PageSpeed Insights.

Jak wygląda dobra optymalizacja zdjęcia hero?

Dla dużego zdjęcia pierwszej sekcji zwróciłbym uwagę na:

• właściwe wymiary,
• nowoczesny format,
• kompresję,
• responsive images,
• brak loading=”lazy”,
• ewentualne fetchpriority=”high”,
• odpowiednio wczesne wykrycie pliku przez przeglądarkę.

To właśnie tutaj jedna źle skonfigurowana grafika potrafi mieć znacznie większy wpływ na ładowanie strony niż kilka małych ikon znajdujących się w stopce.

A jak optymalizować obrazy znajdujące się niżej?

Dla zwykłych grafik znajdujących się poniżej pierwszego ekranu priorytety są trochę inne.

Najczęściej warto:

• zmniejszyć wymiary,
• zastosować WebP lub AVIF,
• skompresować obraz,
• wykorzystać srcset,
• zastosować loading=”lazy”.

Nie potrzebują one wysokiego priorytetu pobierania.

Czy warto optymalizować istniejącą stronę?

Zdecydowanie tak, szczególnie jeżeli witryna była rozwijana przez kilka lat.

W bibliotece mogą znajdować się:

• stare JPEG-i po kilka MB,
• PNG używane do fotografii,
• oryginały prosto z aparatu,
• niepotrzebnie duże miniatury.

Nie trzeba jednak automatycznie konwertować każdego historycznego pliku.

Najpierw warto znaleźć obrazy rzeczywiście używane na:

• najważniejszych stronach,
• stronie głównej,
• najpopularniejszych artykułach,
• landing page’ach reklamowych,
• najczęściej odwiedzanych produktach.

Tam optymalizacja przyniesie największy efekt.

Jak zmniejszyć rozmiar obrazów na stronie internetowej?

Najlepsze efekty nie wynikają z jednego ustawienia, ale z połączenia kilku elementów.

W 2026 roku dobra optymalizacja obrazów oznacza przede wszystkim:

• używanie właściwych wymiarów,
• wybór odpowiedniego formatu – często AVIF lub WebP,
• rozsądną kompresję,
• serwowanie różnych wariantów dla różnych urządzeń,
• lazy loading dla obrazów znajdujących się poza pierwszym ekranem,
• szybkie ładowanie obrazu LCP,
• podawanie width i height,
• prawidłowe opisy ALT.

Nie warto natomiast przywiązywać się do starych, sztywnych zasad typu:

• 72 DPI,
• 1200 px dla każdego obrazu,
• maksymalnie 150–200 KB dla każdego pliku,
• WebP jako jedyny prawidłowy format.

Każdy obraz pełni inną funkcję.

Miniatura, zdjęcie produktu i pełnoekranowa fotografia hero wymagają zupełnie innego podejścia.

Najważniejsze jest dostarczenie użytkownikowi możliwie małej wersji obrazu, która nadal wygląda dobrze na jego urządzeniu.

FAQ