Optymalizacja obrazów na hostingu — WebP, lazy loading, CDN

Dlaczego obrazy mają kluczowe znaczenie dla LCP?

Obrazy odpowiadają za 50-80% transferu danych typowej strony WWW. Metryka LCP (Largest Contentful Paint) — czas do wyrenderowania największego elementu widocznego na ekranie — jest najczęściej zdominowana przez obraz hero lub banner. Google Core Web Vitals wymaga LCP < 2.5 sekundy (cel) i < 4 sekundy (akceptowalne).

Powiązane tematy: CDN z Cloudflare, konfiguracja Cloudflare, Nginx vhost oraz Redis cache WordPress. Do wyboru hostingu z dobrą wydajnością sprawdź kalkulator kosztów.

Formaty obrazów — porównanie

Konwersja do WebP — narzędzia serverside

ImageMagick (CLI)

# Instalacja
sudo apt install imagemagick

# Konwersja pojedynczego pliku
convert input.jpg -quality 85 output.webp

# Konwersja wszystkich JPEG w katalogu
find /var/www/images -name "*.jpg" -exec sh -c \
  'convert "$1" -quality 85 "${1%.jpg}.webp"' _ {} \;

# Zmień rozmiar i konwertuj
convert input.jpg -resize 1920x1080> -quality 85 output.webp
# > po wymiarach = tylko zmniejszaj (nie powiększaj)

cwebp (Google, szybszy)

sudo apt install webp

# Konwersja z jakością 85 (dobry balans)
cwebp -q 85 input.jpg -o output.webp

# Batch conversion bash
for img in *.jpg; do cwebp -q 85 "$img" -o "${img%.jpg}.webp"; done

sharp (Node.js — automatyzacja build pipeline)

npm install sharp

# Skrypt build
const sharp = require('sharp');

sharp('input.jpg')
  .resize({ width: 1200, withoutEnlargement: true })
  .webp({ quality: 85 })
  .toFile('output.webp');

HTML — serwuj WebP z fallbackiem

<picture>
  <source srcset="obraz.avif" type="image/avif">
  <source srcset="obraz.webp" type="image/webp">
  <img src="obraz.jpg" alt="Opis obrazu" width="1200" height="800"
       loading="lazy" decoding="async">
</picture>

Przeglądarka wybiera pierwszy obsługiwany format — AVIF (jeśli wspierany), WebP, na końcu JPEG. Starsze przeglądarki (IE, Safari <14) dostaną JPEG.

Lazy loading — ładuj obrazy gdy widoczne

<!-- Natywny lazy loading (wszystkie nowoczesne przeglądarki) -->
<img src="obraz.webp" alt="..." loading="lazy" decoding="async"
     width="800" height="600">

<!-- WAŻNE: Nie dodawaj loading="lazy" do LCP image (hero/banner)!
     Obraz above-the-fold powinien się ładować natychmiast -->
<img src="hero.webp" alt="..." loading="eager" fetchpriority="high"
     width="1920" height="1080">

Nginx — automatyczna kompresja i cache headers

server {
    # Cache statycznych plików przez 1 rok
    location ~* \.(jpg|jpeg|png|gif|webp|avif|svg|ico)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Vary "Accept-Encoding";
    }

    # Serwuj WebP jeśli przeglądarka wspiera i plik istnieje
    location ~* ^(.+)\.(jpg|jpeg|png)$ {
        set $webp_suffix "";
        if ($http_accept ~* "image/webp") {
            set $webp_suffix ".webp";
        }
        try_files $uri$webp_suffix $uri =404;
    }
}

WordPress — wtyczki do optymalizacji

Cloudflare Polish — automatyczna optymalizacja

Cloudflare Polish (plan Pro i wyżej) automatycznie kompresuje i konwertuje obrazy do WebP bez zmiany kodu strony. Włącz w: Cloudflare Dashboard → Speed → Optimization → Polish.

Ustawienia: Lossless (bez utraty jakości) lub Lossy (mniejsze pliki, niewidoczna strata). Dla większości witryn Lossy daje 30-50% mniejsze pliki przy identycznej jakości wizualnej.