Autor: [Piotr Wasilewski](/autorzy/piotr-wasilewski) Architekt rozwiązań chmurowych · Zweryfikowano Kwiecień 2026

1.  [HostGrade.pl](/)
2.  [Baza wiedzy](/baza-wiedzy)
3.  Optymalizacja obrazów na hostingu

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

Kategoria: [Optymalizacja](/baza-wiedzy) · Aktualizacja: Kwiecień 2026

## 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](/baza-wiedzy/cdn-w-hostingu-cloudflare), [konfiguracja Cloudflare](/baza-wiedzy/cloudflare-konfiguracja-z-hostingiem), [Nginx vhost](/baza-wiedzy/nginx-vhost-konfiguracja) oraz [Redis cache WordPress](/baza-wiedzy/redis-cache-wordpress). Do wyboru hostingu z dobrą wydajnością sprawdź [kalkulator kosztów](/kalkulator).

## Formaty obrazów — porównanie

Format

Kompresja

Transparentność

Wsparcie przeglądarek

Zastosowanie

JPEG

Stratna (doskonała dla zdjęć)

Nie

100%

Zdjęcia, tła

PNG

Bezstratna (duże pliki)

Tak

100%

Loga, ikony z przezroczystością

**WebP**

Stratna/bezstratna (-25-35% vs JPEG)

Tak

97%+ (wszystkie nowoczesne)

Zdjęcia, loga — zastępuje JPEG/PNG

**AVIF**

Stratna/bezstratna (-40-50% vs JPEG)

Tak

~90% (Chrome, Firefox, Safari 16+)

Przyszłość — mniejsze pliki niż WebP

SVG

Wektorowy (skaluje się bez utraty)

Tak

100%

Loga, ikony, ilustracje

## 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

Wtyczka

Funkcje

Cena

Imagify

WebP, kompresja, lazy load, CDN

Darmowa do 200 img/msc

ShortPixel

AVIF+WebP, kompresja stratna/bezstratna

Darmowa do 100 img/msc

Smush

Kompresja, lazy load, WebP

Darmowa (bez AVIF)

EWWW Image Optimizer

Lokalna kompresja (bez API), WebP

Darmowa

## 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.

## Powiązane strony

-   [CDN z Cloudflare](/baza-wiedzy/cdn-w-hostingu-cloudflare)
-   [Cloudflare z hostingiem](/baza-wiedzy/cloudflare-konfiguracja-z-hostingiem)
-   [Nginx vhost konfiguracja](/baza-wiedzy/nginx-vhost-konfiguracja)
-   [Redis cache WordPress](/baza-wiedzy/redis-cache-wordpress)
-   [Porównanie hostingów — wydajność](/hosting)