1.  [Strona główna](/) ›
2.  [Baza wiedzy](/baza-wiedzy/) ›
3.  WebP i AVIF - konwersja i serwowanie obrazów

# WebP i AVIF - konwersja i serwowanie nowoczesnych formatów obrazów

Opublikowano: 10 kwietnia 2026 · Kategoria: Hosting / Wydajność

⚡ W skrócie · 8 min czytania

-   Jak konwertować obrazy do WebP i AVIF przez cwebp i avifenc. Konfiguracja Nginx i Apache do auto-serwowania nowoczesnych formatów. WordPress Smush/Imagify. Benchmarki JPEG vs WebP vs AVIF.
-   Porównanie formatów obrazów.
-   Konwersja z linii poleceń.
-   HTML - element picture z fallbackiem.
-   Nginx - automatyczne serwowanie WebP.

Obrazy stanowią 50-80% wagi przeciętnej strony WWW. WebP i AVIF to nowoczesne formaty, które drastycznie zmniejszają rozmiar plików - WebP o 25-35%, AVIF o 40-55% w porównaniu z JPEG. Lepszy LCP, mniejsze zużycie transferu, szybsze strony na mobile.

## Porównanie formatów obrazów

Format

Rozmiar (względny)

Przezroczystość

Animacje

Wsparcie przeglądarek

JPEG

100% (baseline)

Nie

Nie

100%

PNG

150-300%

Tak

Nie

100%

WebP

65-75%

Tak

Tak

97%+

AVIF

45-60%

Tak

Tak (AVIS)

91%+

## Konwersja z linii poleceń

```
# Instalacja narzędzi
apt install webp             # cwebp, dwebp
apt install libavif-bin      # avifenc, avifdec

# Lub przez npm (cross-platform)
npm install -g sharp-cli     # sharp dla Node.js
```

```
# WebP - konwersja jednego pliku
cwebp -q 80 input.jpg -o output.webp
cwebp -q 80 -lossless input.png -o output.webp  # dla PNG z przezroczystością

# WebP - batch konwersja katalogu
find /var/www/html/wp-content/uploads -name "*.jpg" | while read f; do
    cwebp -q 80 "$f" -o "${f%.jpg}.webp"
done

# AVIF - konwersja jednego pliku
avifenc --quality 60 --speed 6 input.jpg output.avif
# quality: 0=maksymalna kompresja, 100=bez kompresji
# speed: 0=najwolniejszy/najlepszy, 10=najszybszy

# AVIF - batch konwersja
find /var/www/html/wp-content/uploads -name "*.jpg" | while read f; do
    avifenc --quality 60 --speed 6 "$f" "${f%.jpg}.avif"
done
```

## HTML - element picture z fallbackiem

```
<!-- Przeglądarka wybiera pierwszy obsługiwany format -->
<picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Opis obrazu" width="800" height="600" loading="lazy">
</picture>

<!-- Z responsive images -->
<picture>
    <source
        srcset="image-400.avif 400w, image-800.avif 800w, image-1200.avif 1200w"
        sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
        type="image/avif">
    <source
        srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
        sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
        type="image/webp">
    <img src="image-800.jpg" alt="Opis" width="800" height="600" loading="lazy">
</picture>
```

## Nginx - automatyczne serwowanie WebP

```
# /etc/nginx/conf.d/webp.conf

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

map $http_accept $avif_suffix {
    default "";
    "~*avif" ".avif";
}

server {
    # ...
    location ~* \.(jpg|jpeg|png)$ {
        # Spróbuj AVIF najpierw, potem WebP, potem oryginał
        set $img_uri $uri;

        if ($avif_suffix != "") {
            set $img_uri $uri$avif_suffix;
        }
        if ($webp_suffix != "" && $avif_suffix = "") {
            set $img_uri $uri$webp_suffix;
        }

        # Jeśli plik .avif/.webp istnieje, użyj go
        try_files $img_uri $uri =404;

        add_header Vary Accept;
        add_header Cache-Control "public, max-age=31536000, immutable";
        expires 1y;
    }
}
```

## Apache - mod\_rewrite dla WebP

```
# .htaccess lub VirtualHost
<IfModule mod_rewrite.c>
    RewriteEngine On

    # Serwuj WebP jeśli przeglądarka obsługuje i plik .webp istnieje
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
    RewriteCond %{REQUEST_FILENAME}\.webp -f
    RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
    AddType image/webp .webp
    AddType image/avif .avif
</IfModule>
```

## WordPress - wtyczki do automatycznej konwersji

-   **Imagify** - konwertuje nowe i stare uploads do WebP/AVIF, zastępuje IMG → picture automatycznie. Plan darmowy: 20 MB/miesiąc. Polecany.
-   **Smush Pro** - WebP i AVIF z CDN (Smush CDN). Lazy loading i bulk optymalizacja. Wymaga subskrypcji WPMU Dev.
-   **WebP Express** - darmowy, używa cwebp lub Imagick, konfiguruje .htaccess automatycznie. Dobra opcja bez płatnej subskrypcji.
-   **LiteSpeed Cache** - wbudowana konwersja WebP jeśli serwer to LiteSpeed. Bez dodatkowych wtyczek.
-   **ShortPixel** - konwersja WebP i AVIF w chmurze, pay-as-you-go (1 USD za 1000 obrazów). Dobry dla dużych bibliotek mediów.

## CDN - automatyczny format bez konfiguracji serwera

-   **Cloudflare Polish** (plan Pro+) - automatyczna konwersja WebP i optymalizacja obrazów na Edge. Serwuje WebP jeśli przeglądarka obsługuje - bez konfiguracji serwera origin.
-   **BunnyCDN + Bunny Optimizer** ([konfiguracja BunnyCDN](/baza-wiedzy/bunnycdn-cdn-konfiguracja/)) - automatyczna konwersja WebP i AVIF, zmiana rozmiaru przez URL parametry (?width=800&format=avif).
-   **Cloudflare Images** - serwis do hostingu i transformacji obrazów, dostęp przez URL z parametrami (format=webp, quality=80, width=500).

**Ważne:** Zawsze dodawaj nagłówek `Vary: Accept` gdy serwujesz różne formaty na tym samym URL. Bez tego CDN i pośrednie cache mogą zaserwować WebP do przeglądarki nieobsługującej WebP.

## Najczęstsze pytania

Ile WebP i AVIF oszczędzają w porównaniu z JPEG? +

WebP: średnio 25-35% mniej niż JPEG przy tej samej jakości wizualnej (quality=80). AVIF: 40-55% mniej niż JPEG, co czyni go wydajniejszym niż WebP o kolejne 15-20%. Dla PNG z przezroczystością WebP daje 30-50% mniej niż oryginalne PNG. Różnice rosną dla zdjęć z dużą ilością szczegółów. Przy quality=60 (aggressive compression) AVIF może dać plik 70% mniejszy niż JPEG przy akceptowalnej jakości.

Czy AVIF jest już obsługiwany przez wszystkie przeglądarki? +

AVIF obsługuje: Chrome 85+ (sierpień 2020), Firefox 93+ (październik 2021), Safari 16+ (wrzesień 2022), Edge 85+. Globalne pokrycie to ponad 91% przeglądarek. Jednak starsze urządzenia mobilne z iOS poniżej 16 lub Android z przeglądarkową wersją sprzed 2020 mogą nie obsługiwać AVIF. Dlatego ważne jest stosowanie elementu picture z fallbackiem do WebP i JPEG.

Jak automatycznie serwować WebP/AVIF przez Apache lub Nginx? +

Nginx: sprawdza nagłówek Accept i serwuje plik z rozszerzeniem .webp/.avif jeśli istnieje. Apache: mod\_rewrite sprawdza Accept header i przekierowuje do .webp jeśli plik istnieje na dysku. Cloudflare Polish i BunnyCDN automatycznie konwertują i serwują odpowiedni format bez konfiguracji serwera. WordPress: wtyczki Smush, Imagify, WebP Express automatycznie konwertują i generują tagi picture.

Kiedy powinienem używać WebP, a kiedy AVIF? +

AVIF: gdy priorytetem jest maksymalna kompresja, szczególnie dla zdjęć i złożonych grafik. Wada: wolniejsza enkodowanie (narzut przy generowaniu on-the-fly). WebP: gdy potrzebujesz dobrego balansu kompresji, szybkości enkodowania i kompatybilności. WebP jest szybszy do generowania niż AVIF. Strategia: używaj elementu picture z AVIF → WebP → JPEG jako kolejnymi opcjami - przeglądarka wybierze pierwszy obsługiwany format.

## Sprawdź oferty pasujące do tego scenariusza

Poniżej masz szybkie przejścia do ofert i stron z kodami rabatowymi tam, gdzie są dostępne.

LH.pl

Hosting WordPress z LiteSpeed Cache - automatyczna konwersja WebP

WebP Auto

[Aktywuj rabat →](/out/lh-pl/#reklama "LH.pl")

#Reklama · link partnerski

[Zobacz kod rabatowy →](/kody-rabatowe/lh-pl/)

CyberFolks

Hosting z Imagify i LiteSpeed - WebP i AVIF bez serwera VPS

Imagify

[Aktywuj rabat →](/out/cyberfolks/#reklama "CyberFolks")

#Reklama · link partnerski

[Zobacz kod rabatowy →](/kody-rabatowe/cyberfolks/)

Contabo

VPS do własnej konfiguracji Nginx WebP detection i bulk konwersji

VPS Pełna kontrola

[Aktywuj rabat →](/out/contabo/#reklama "Contabo")

#Reklama · link partnerski

[Zobacz kod rabatowy →](/kody-rabatowe/contabo/)

## Powiązane strony

-   [Core Web Vitals - optymalizacja LCP, CLS i INP](/baza-wiedzy/core-web-vitals-optymalizacja/)
-   [CDN Origin Shield - ochrona serwera](/baza-wiedzy/cdn-origin-shield-konfiguracja/)
-   [Brotli - kompresja w Nginx i Apache](/baza-wiedzy/brotli-kompresja-nginx-apache/)
-   [Wszystkie artykuły](/baza-wiedzy/)
-   [PageSpeed Module - automatyczna optymalizacja wydajności stron
    
    Instalacja ngx\_pagespeed (Nginx) i mod\_pagespeed (Apache). Filtry kompresji obrazów, JS defer, CSS inline, WebP.…
    
    ](/baza-wiedzy/pagespeed-module-nginx/)
-   [GoAccess - analiza logów Nginx i Apache w czasie rzeczywistym
    
    GoAccess - instalacja, parsowanie logów Nginx i Apache, raporty HTML, dashboard real-time z WebSocket, cron do…
    
    ](/baza-wiedzy/goaccess-analiza-logow-nginx/)
-   [SSL Let's Encrypt - automatyczna instalacja i odnawianie certyfikatów
    
    Jak zainstalować darmowy SSL Let's Encrypt z Certbotem? Automatyczne odnawianie, konfiguracja Nginx/Apache, wildcard…
    
    ](/baza-wiedzy/ssl-lets-encrypt-automatyzacja/)
-   [Jak wybrać hosting?](/jaki-hosting-wybrac/)

Autor: [Redakcja HostGrade.pl](/autorzy/) Zespół redakcyjny · Aktualizacja: 10 kwietnia 2026

Artykuły HostGrade.pl przygotowuje i aktualizuje redakcja serwisu. Ceny startowe, ceny odnowienia i warunki planów sprawdzamy w cennikach i regulaminach dostawców, a potem liczymy całkowity koszt za 2 lata (cena startowa plus odnowienia). Zasady zbierania danych i liczenia kosztów opisujemy na stronie Metodologia. Linki partnerskie oznaczamy jako #reklama.

[O redakcji i metodologii →](/autorzy/)