Autor: [Robert Zasilny](/autorzy/robert-zasilny) Ekspert bezpieczeństwa i compliance · Zweryfikowano Kwiecień 2026

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ść

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** — 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 · 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 · 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 · 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/)