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

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