Optymalizacja obrazów na stronie – WebP, AVIF i lazy loading

Dlaczego obrazy to największy problem wydajności stron

Gdy analizujesz raport PageSpeed Insights lub wyniki Core Web Vitals 2026, najczęściej powtarzający się problem dotyczy obrazów. Według danych web.dev/fast obrazy odpowiadają za ponad 50% wagi typowej strony internetowej. Nieoptymalne grafiki spowalniają ładowanie, zwiększają wskaźnik LCP (Largest Contentful Paint) i bezpośrednio obniżają pozycje w Google.

Problemy wynikają zwykle z kilku źródeł:

• Zbyt duże rozmiary plików – przesłanie obrazu 3000×2000 px tam, gdzie wyświetlany jest w 400 px
• Przestarzałe formaty – JPEG i PNG zamiast WebP lub AVIF
• Brak atrybutu loading="lazy" na obrazach poniżej linii widzenia
• Brak responsywności – jeden plik dla wszystkich urządzeń
• Brak kompresji lub zbyt agresywna kompresja obniżająca jakość

Dobra wiadomość: optymalizacja obrazów to jedna z tańszych i najszybciej przynoszących efekty technik SEO. Przy okazji zlecenia projektowania strony internetowej zawsze wdrażamy te usprawnienia standardowo.

Formaty obrazów – JPEG, PNG, WebP i AVIF

Wybór formatu to pierwszy krok do optymalizacji. Każdy ma swoje zastosowania i ograniczenia.

JPEG

Format stratny, doskonały do zdjęć. Nie obsługuje przezroczystości. Kompresja jest dojrzała i szeroko wspierana, ale w porównaniu z nowszymi formatami JPEG generuje pliki od 25% do 50% cięższe przy zbliżonej jakości wizualnej. Nadal sensowny jako fallback dla starszych przeglądarek.

PNG

Format bezstratny, obsługuje przezroczystość (kanał alfa). Idealny do logotypów, ikon i grafik z tekstem. Pliki PNG są zazwyczaj znacznie większe niż JPEG przy fotografiach – dlatego do zdjęć PNG nie należy używać bez wyraźnego powodu.

WebP

Opracowany przez Google format obsługujący zarówno kompresję stratną, jak i bezstratną, a także przezroczystość i animacje. Według Google Developers WebP daje 25-35% mniejsze pliki niż JPEG przy porównywalnej jakości. Wsparcie przeglądarek wynosi dziś ponad 97% – Edge, Chrome, Firefox, Safari (od wersji 14), Opera.

AVIF

Najnowszy i najbardziej wydajny format – oparty na kodeku AV1. Oferuje kompresję o 50% lepszą niż JPEG i o 20% lepszą niż WebP. Obsługuje HDR, głęboką przestrzeń kolorów i przezroczystość. Wsparcie wg caniuse.com przekroczyło 93% (Chrome 85+, Firefox 93+, Safari 16+). Enkodowanie AVIF jest jednak wolniejsze, co ma znaczenie przy generowaniu obrazów po stronie serwera.

Format	Typ kompresji	Przezroczystość	Wsparcie	Redukcja rozmiaru vs JPEG
JPEG	stratna	nie	100%	–
PNG	bezstratna	tak	100%	większy lub podobny
WebP	stratna/bezstratna	tak	97%	25-35%
AVIF	stratna/bezstratna	tak	93%	40-50%

Kompresja stratna vs bezstratna

Kompresja bezstratna (lossless) zachowuje wszystkie dane oryginalnego pliku – po dekompresji obraz jest identyczny z oryginałem. Używamy jej dla grafik technicznych, ikon, logotypów i wszelkich elementów, gdzie liczy się pikselowa dokładność.

Kompresja stratna (lossy) usuwa część danych wizualnych, które oko ludzkie słabo rozróżnia. Przy jakości 75-85% różnica wizualna jest praktycznie niewidoczna, a plik może być 3-5 razy mniejszy. Dla fotografii na stronach internetowych kompresja stratna to standard.

Kluczowe zasady:

• Nie kompresuj wielokrotnie tego samego pliku JPEG – każda kolejna kompresja stratna pogarsza jakość
• Przechowuj oryginały w bezstratnym formacie (PNG, TIFF), eksportuj do JPEG/WebP/AVIF
• Jakość 75-85% to dobry punkt startowy dla zdjęć na web
• Dla WebP – jakość 80 daje wyniki porównywalne z JPEG 90, przy mniejszym pliku

Responsywne obrazy – srcset, sizes i element picture

Serwowanie jednego obrazu wszystkim urządzeniom to marnotrawstwo. Użytkownik mobilny z ekranem 390px nie potrzebuje fotografii 1920px. Atrybuty srcset i sizes pozwalają przeglądarce pobrać odpowiedni wariant.

Atrybut srcset

<img
  src="zdjecie-800.webp"
  srcset="zdjecie-400.webp 400w,
          zdjecie-800.webp 800w,
          zdjecie-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1024px) 50vw,
         800px"
  alt="Opis zdjęcia"
  width="800" height="533"
/>

Przeglądarka wybierze najlepszy wariant na podstawie rozdzielczości ekranu, gęstości pikseli (DPR) i dostępnej przepustowości.

Element picture – wiele formatów

Element <picture> pozwala podać alternatywne formaty z automatycznym fallbackiem:

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

Przeglądarka pobierze pierwszy obsługiwany format – AVIF, jeśli może; WebP jako drugie wyjście; JPEG jako fallback dla starych przeglądarek. Zawsze podawaj atrybuty width i height – zapobiega to przesunięciom layoutu (CLS).

Lazy loading – natywny i JavaScript

Lazy loading odkłada pobieranie obrazów spoza widocznego obszaru ekranu do momentu, gdy użytkownik przewinie stronę w ich stronę. Zmniejsza to ilość danych pobieranych przy pierwszym ładowaniu strony.

Natywny lazy loading

Od 2019 roku przeglądarki obsługują atrybut loading="lazy" natywnie – bez żadnego JavaScriptu:

<img src="zdjecie.webp" alt="Opis" loading="lazy" width="800" height="533">

Ważna zasada: nie dodawaj lazy loading do pierwszego obrazu na stronie (hero, logo). Atrybut loading="eager" lub jego brak przyspiesza LCP. Do obrazów above the fold używaj fetchpriority="high":

<img src="hero.webp" alt="Hero" fetchpriority="high" width="1200" height="630">

Lazy loading przez JavaScript

Intersection Observer API pozwala na bardziej zaawansowaną kontrolę – np. ładowanie z marginesem 200px przed obszarem widocznym:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

Narzędzia do optymalizacji obrazów

Squoosh

Darmowa aplikacja webowa od Google (squoosh.app). Pozwala konwertować i kompresować obrazy bezpośrednio w przeglądarce – bez wysyłania pliku na serwer. Obsługuje WebP, AVIF, MozJPEG, OxiPNG. Idealna do szybkiej pracy manualnej.

TinyPNG / TinyJPEG

Popularne narzędzie online do kompresji stratnej PNG i JPEG. Redukuje rozmiar o 50-80% przy zachowaniu dobrej jakości. Dostępne też jako wtyczka WordPress i moduł npm.

ImageMagick

Potężne narzędzie CLI do wsadowej konwersji i kompresji. Przykład konwersji JPEG do WebP:

magick input.jpg -quality 80 output.webp
# lub wsadowo:
for f in *.jpg; do magick "$f" -quality 80 "${f%.jpg}.webp"; done

Sharp (Node.js)

Najszybsza biblioteka do przetwarzania obrazów w Node.js, bazuje na libvips. Idealna do automatyzacji w pipeline CI/CD lub skryptach build:

const sharp = require('sharp');
await sharp('input.jpg')
  .resize(800)
  .webp({ quality: 80 })
  .toFile('output.webp');

cwebp

Oficjalne narzędzie CLI od Google do konwersji do WebP:

cwebp -q 80 input.jpg -o output.webp

Next.js Image component

Jeśli pracujesz z Next.js (a my w Studio Kalmus stawiamy na Next.js), komponent <Image> automatyzuje większość optymalizacji:

import Image from 'next/image';

<Image
  src="/zdjecie.jpg"
  alt="Opis"
  width={800}
  height={533}
  priority={false}  // true dla obrazów LCP
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Next.js Image automatycznie:

• Konwertuje obrazy do WebP lub AVIF (zależnie od przeglądarki)
• Generuje wiele rozmiarów (srcset)
• Dodaje lazy loading (poza obrazami z priority)
• Zapobiega Cumulative Layout Shift przez rezerwację przestrzeni
• Optymalizuje obrazy na żądanie i cachuje wyniki

To jeden z powodów, dla których strony tworzone przez nas domyślnie osiągają wysokie wyniki w PageSpeed.

WordPress – wtyczki do optymalizacji obrazów

Dla stron na WordPressie polecamy trzy sprawdzone wtyczki:

ShortPixel

Kompleksowe rozwiązanie z kompresją stratną, bezstratną i trybem glossy. Automatycznie konwertuje przesyłane obrazy do WebP i AVIF. Model cenowy oparty na kredytach – 100 kredytów gratis miesięcznie, następnie płatny abonament. Polecamy dla małych i średnich stron.

Smush (WPMU Dev)

Bardzo popularna wtyczka z darmowym planem (bez limitu obrazów, ale bez WebP w wersji free). Plan Pro dodaje konwersję WebP, CDN i lazy loading. Łatwa konfiguracja, dobra dla początkujących.

Imagify

Od twórców WP Rocket. Dobra integracja z tym cacherem. Trzy poziomy kompresji: Normal, Aggressive, Ultra. WebP dostępny w każdym planie, w tym darmowym (z limitem 20 MB miesięcznie).

CDN dla obrazów – Cloudflare i Cloudinary

CDN (Content Delivery Network) serwuje obrazy z serwera geograficznie bliskiego użytkownikowi, co skraca czas odpowiedzi.

Cloudflare Images

Cloudflare oferuje automatyczną zmianę rozmiaru i konwersję formatów obrazów przez Polish (kompresja) i Image Resizing. Przy stronie hostowanej za Cloudflare wystarczy włączyć opcję – bez zmian w kodzie. Dla stron z ruchem globalnym to duże usprawnienie.

Cloudinary

Dedykowany DAM (Digital Asset Management) i CDN obrazów. Zaawansowane transformacje przez URL – zmiana rozmiaru, kadrowanie, konwersja formatu, watermark. Bardzo popularne rozwiązanie przy dużych serwisach z wieloma wariantami obrazów. Darmowy plan: 25 GB storage + 25 GB przepustowości.

Przykład URL Cloudinary z automatyczną konwersją do WebP i zmianą rozmiaru:

https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/sample.jpg

Parametry f_auto i q_auto pozwalają Cloudinary dobrać format i jakość automatycznie na podstawie przeglądarki i sieci użytkownika.

Checklist optymalizacji obrazów

• Konwertuj zdjęcia do WebP lub AVIF z fallbackiem JPEG
• Używaj <picture> z wieloma formatami
• Dodaj srcset i sizes dla responsywności
• Dodaj loading="lazy" do obrazów below the fold
• Dodaj fetchpriority="high" do obrazu LCP
• Zawsze podawaj width i height – zapobiega CLS
• Kompresuj do jakości 75-85% dla fotografii
• Serwuj obrazy przez CDN przy ruchu globalnym
• Dla Next.js – korzystaj z next/image
• Dla WordPress – zainstaluj ShortPixel, Smush lub Imagify

FAQ – często zadawane pytania

Czy muszę ręcznie konwertować wszystkie obrazy do WebP?

Nie – Next.js Image i wtyczki WordPress (ShortPixel, Imagify) robią to automatycznie. Przy manualnym podejściu warto użyć Squoosh lub skryptu w Sharp. Raz wdrożony pipeline eliminuje ręczną pracę.

Czy AVIF jest już gotowy do użycia na produkcji?

Tak, ale z fallbackiem. Wsparcie przeglądarek przekroczyło 93% – warto używać AVIF przez element <picture> z WebP i JPEG jako fallback. Next.js obsługuje AVIF od wersji 12.3.

Jak bardzo lazy loading poprawia wydajność?

Na stronach z dużą liczbą obrazów lazy loading może zmniejszyć wagę pierwszego ładowania o 50-70%. Bezpośrednio poprawia LCP i zmniejsza zużycie danych na urządzeniach mobilnych.

Jaki rozmiar obrazu jest odpowiedni dla strony www?

Dla fotografii: maksymalnie 200-300 KB po kompresji przy rozdzielczości 1200-1600px szerokości. Dla obrazów w kartach/miniaturkach: 50-100 KB przy 400-600px. Dla hero: do 400-500 KB przy 1920px. Obrazy powyżej 1 MB to wyraźny sygnał, że coś trzeba poprawić.

Czy CDN jest konieczny dla polskiej strony lokalnej?

Przy stronie kierowanej wyłącznie do polskich użytkowników CDN ma mniejsze znaczenie niż przy globalnym serwisie. Ważniejsza jest wtedy optymalizacja samych plików. CDN Cloudflare w wersji darmowej i tak warto włączyć – dodaje cache i ochronę DDoS bez kosztów.

Podsumowanie

Optymalizacja obrazów to jeden z najprostszych sposobów na poprawę szybkości strony i wyników Core Web Vitals. Przejście z JPEG na WebP lub AVIF, dodanie lazy loading i responsywnych obrazów może skrócić czas ładowania o kilka sekund – bez żadnych zmian w designie.

Jeśli nie wiesz, od czego zacząć albo chcesz, żebyśmy wdrożyli te optymalizacje w Twojej stronie, napisz do nas. Sprawdź też nasz cennik usług – optymalizacja wydajności to jeden ze stałych elementów naszych realizacji.