Jak przekonwertować obraz na WebP (i dlaczego warto)

Jeśli zdarzyło Ci się sprawdzić stronę w Google PageSpeed Insights i zobaczyć komunikat „Wyświetlaj obrazy w formatach nowej generacji”, to Google prosi dokładnie o to: o konwersję zdjęć JPG i PNG na WebP. To jedna z najbardziej opłacalnych zmian dla wydajności strony — i jednocześnie jedna z najprostszych do wdrożenia.

Dlaczego warto przejść na WebP?

WebP to format opracowany przez Google i udostępniony w 2010 roku, zaprojektowany z myślą o internecie. Korzysta z nowocześniejszych algorytmów kompresji niż JPG i PNG, a przy tej samej jakości oferuje:

• o 25–35% mniejszą wagę niż JPG w trybie stratnym (lossy)
• o 20–30% mniejszą wagę niż PNG w trybie bezstratnym (lossless)
• obsługę przezroczystości (kanał alfa) — czego JPG nie potrafi
• obsługę animacji — czego PNG natywnie nie ma

W praktyce różnica jest odczuwalna. Galeria produktów w sklepie z 20 zdjęciami po 300 KB w JPG (razem 6 MB) po konwersji na WebP zajmie około 4 MB przy tej samej jakości — czyli o 33% mniej. Dla Google oznacza to szybszy LCP, lepszy wynik w PageSpeed i realną szansę na wyższą pozycję.

Kiedy nie używać WebP

Choć to najlepszy format dla współczesnego internetu, są sytuacje, w których WebP wciąż nie jest właściwym wyborem:

• E-mail marketing: programy pocztowe takie jak Outlook czy Apple Mail obsługują WebP niekonsekwentnie. W mailingach HTML bezpieczniejsze pozostają JPG i PNG.
• Druk poligraficzny: drukarnie i klasyczne programy do składu nie obsługują WebP. Pliki przeznaczone do druku zapisuj w JPG wysokiej jakości albo w PNG.
• Platformy z ograniczeniami formatu: YouTube nie przyjmuje WebP przy wgrywaniu miniatur (akceptuje JPG i PNG). Niektóre starsze systemy wymagają JPG w formularzach. Sprawdź akceptowany format, zanim przekonwertujesz pliki.
• Pliki, które ktoś ma otworzyć na swoim komputerze: osoby, które pobierają plik i otwierają go w domyślnej przeglądarce zdjęć Windows, mogą mieć problem z WebP w starszych wersjach systemu.

Metoda 1 — konwersja online (najszybsza, bez instalacji)

Do pojedynczych plików — albo gdy potrzebujesz efektu od razu, bez żadnej konfiguracji — konwerter online jest najprostszą drogą. Narzędzie Konwertuj od ImageTools zamienia JPG, PNG i inne formaty na WebP bezpośrednio w przeglądarce, bez wysyłania plików na zewnętrzne serwery.

1. Otwórz narzędzie Konwertuj.
2. Wybierz obrazy albo przeciągnij je w pole wysyłania.
3. Ustaw WebP jako format wyjściowy.
4. Pobierz gotowe pliki pojedynczo albo w archiwum ZIP, jeśli jest ich więcej.

Metoda 2 — WordPress (automatycznie dla całej strony)

Na stronach opartych na WordPressie najwygodniej użyć wtyczki, która konwertuje pliki i serwuje WebP automatycznie — bez ręcznego przerabiania każdego obrazu.

WordPress 6.1 i nowszy (konwersja natywna)

Od wersji 6.1 WordPress konwertuje obrazy na WebP automatycznie już przy wgrywaniu, o ile serwer obsługuje bibliotekę libwebp (ma ją większość nowoczesnych serwerów z PHP 8 i nowszym). Nie musisz robić nic więcej — WordPress tworzy wersje WebP i sam podaje każdej przeglądarce właściwy format.

Aby sprawdzić, czy działa, wejdź w Ustawienia → Media i poszukaj opcji konwersji WebP. Jeśli jej nie ma, serwer nie ma wsparcia — wtedy warto sięgnąć po wtyczkę.

Z wtyczkami (starsze wersje lub większa kontrola)

Najczęściej używane wtyczki do konwersji WebP w WordPressie to:

• ShortPixel Image Optimizer — konwertuje nowe pliki przy wgrywaniu i pozwala przerobić całą istniejącą bibliotekę. Bezpłatnie do 100 obrazów miesięcznie.
• Imagify — prosty interfejs, automatyczna konwersja i optymalizacja wsadowa. Dostępny darmowy plan.
• WebP Express — wtyczka skupiona wyłącznie na WebP, konwertuje pliki i sama ustawia reguły po stronie serwera.

Metoda 3 — wiersz poleceń z cwebp (dla programistów)

Google udostępnia bezpłatnie narzędzie cwebp — oficjalny koder WebP — do konwersji z poziomu terminala. To najszybszy sposób na przerobienie dużych partii plików na serwerze albo w procesie budowania.

Instalacja

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows — pobierz plik binarny: https://developers.google.com/speed/webp/download

Podstawowa konwersja

# Konwersja pliku JPG na WebP w jakości 80
cwebp -q 80 foto.jpg -o foto.webp

# Konwersja PNG na WebP w trybie bezstratnym
cwebp -lossless logo.png -o logo.webp

# Konwersja wszystkich plików JPG z folderu (Bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Parametr -q odpowiada za jakość (0–100). W internecie najlepszy kompromis między wyglądem a wagą pliku dają wartości od 75 do 85. Użyj -lossless przy grafikach, które wymagają kompresji bezstratnej (logo, zrzuty ekranu z tekstem).

Metoda 4 — Node.js z sharp (do procesu budowania)

W projektach opartych na Node.js — stronach w Next.js, Gatsby, Nuxt czy dowolnym zautomatyzowanym buildzie — najwydajniejszym rozwiązaniem do konwersji WebP jest biblioteka sharp :

// npm install sharp

const sharp = require('sharp');

// Konwersja JPG na WebP w jakości 80
sharp('foto.jpg')
  .webp({ quality: 80 })
  .toFile('foto.webp');

// Konwersja PNG na WebP w trybie bezstratnym
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// Konwersja wszystkich plików z folderu
const fs = require('fs');
const path = require('path');

fs.readdirSync('./obrazy')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./obrazy', file);
    const output = path.join('./obrazy', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

O sharp korzysta z natywnej biblioteki libvips i działa znacznie szybciej niż rozwiązania napisane w czystym JavaScripcie — idealnie nadaje się do generowania wersji WebP podczas budowania stron statycznych.

Jak wdrożyć WebP z wersją zapasową dla starszych przeglądarek

Choć w 2026 roku zgodność WebP przekracza 97%, wciąż zdarzają się sytuacje, w których wersja zapasowa jest potrzebna — firmowe systemy z IE11, bardzo stare urządzenia albo po prostu chęć maksymalnego bezpieczeństwa.

Właściwym rozwiązaniem jest znacznik HTML <picture>, który pozwala wskazać alternatywne źródła obrazu w kolejności preferencji:

<!-- Przeglądarka użyje WebP, jeśli go obsługuje; w przeciwnym razie JPG -->
<picture>
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Opis zdjęcia" width="800" height="600">
</picture>

<!-- Kilka rozmiarów dla ekranów Retina -->
<picture>
  <source
    srcset="foto-800.webp 800w, foto-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="foto-800.jpg 800w, foto-1600.jpg 1600w"
    type="image/jpeg">
  <img src="foto-800.jpg" alt="Opis zdjęcia"
    width="800" height="600" loading="lazy">
</picture>

Przeglądarka sprawdza źródła w podanej kolejności: jeśli obsługuje WebP, korzysta z <source> z type="image/webp". Jeśli nie, sięga po JPG w <img>. Znacznik <img> na końcu jest obowiązkowy — to on ustala alt, wymiary i domyślne zachowanie.

Konfiguracja serwera do automatycznego serwowania WebP (Apache)

Alternatywą dla <picture> jest ustawienie serwera tak, by sam wykrywał obsługę WebP w przeglądarce i podawał właściwą wersję pliku. W Apache dodaj do .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Serwuj .webp, jeśli plik istnieje, a przeglądarka go akceptuje
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

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

AddType image/webp .webp

Przy takiej konfiguracji wystarczy trzymać pliki .webp obok oryginałów w tym samym folderze. Apache rozpozna obsługę WebP po nagłówku Accept i poda właściwą wersję bez żadnej zmiany w kodzie HTML.

Jak sprawdzić efekt w PageSpeed

Po wdrożeniu WebP przepuść adres strony przez Google PageSpeed Insights (pagespeed.web.dev). Komunikat „Wyświetlaj obrazy w formatach nowej generacji” powinien zniknąć albo wyraźnie stracić na znaczeniu. W sekcji z sugestiami zobaczysz szacowany zysk w kilobajtach dla każdego nieprzekonwertowanego jeszcze obrazu.

Inny sposób: otwórz Chrome DevTools (F12), przejdź na zakładkę Network, ustaw filtr „Img” i sprawdź kolumnę „Type” przy wczytanych obrazach. Jeśli widnieje tam webp, konwersja działa.

Jaki poziom jakości ustawić przy konwersji?

Jakość w WebP działa tak samo jak w JPG: wyższe wartości zachowują więcej szczegółów, ale dają cięższe pliki. Różnica polega na tym, że przy tym samym efekcie wizualnym WebP zwykle potrzebuje wartości o 10–15 punktów niższej niż JPG.

Najczęstsze pytania