Optymalizacja

Format WebP - co to jest i kiedy używać

Nowoczesny format obrazów od Google - 25-35% lżejszy od JPG przy zachowanej jakości.

Aktualizacja:
Krótka odpowiedź

WebP to format graficzny opracowany przez Google, dający znacznie lepszą kompresję niż JPG i PNG - typowo 25-35% mniejsze pliki przy zachowanej jakości wizualnej. Wspierany przez wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari od 2020, Edge). Konwersja istniejących obrazów do WebP to jedna z najszybszych optymalizacji LCP - bez zmian w designie strony.

Kluczowe fakty
Twórca Google (od 2010)
Typowa redukcja rozmiaru 25-35% vs JPG/PNG
Wsparcie przeglądarek 97%+ globalnie (Can I Use, 2025)
Wspiera Lossy, lossless, animacje, kanał alpha

Co to jest WebP?

WebP to format graficzny opracowany przez Google. Daje znacznie lepszą kompresję niż JPG i PNG - typowo 25-35% mniejsze pliki przy zachowanej jakości wizualnej. Wspierany przez wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari od 2020, Edge).

Dlaczego warto?

  • Mniejsze pliki = szybsze ładowanie = lepszy LCP
  • Mniejszy transfer danych dla użytkownika (szczególnie ważne dla mobile)
  • Mniejsze koszty CDN i hostingu
  • Lepszy wynik PageSpeed Insights

Jak wdrożyć WebP?

  1. Konwersja: Squoosh, ImageMagick, sharp w Node.js
  2. Element <picture> - pozwala podać fallback JPG dla starszych przeglądarek:
    <picture>
      <source srcset="img.webp" type="image/webp">
      <img src="img.jpg" alt="...">
    </picture>
  3. Wtyczki dla WordPressa: ShortPixel, Smush, WebP Converter for Media - konwertują automatycznie
  4. CDN z konwersją w locie (Cloudflare Polish, Bunny Optimizer)

WebP vs AVIF

AVIF to jeszcze nowszy format - typowo 50% mniejszy od JPG. Ma jednak nieco mniejsze wsparcie (Chrome, Firefox tak; Safari od 2023). Najczęściej używa się ich razem: AVIF jako pierwszy wybór, WebP jako fallback, JPG jako ostatni:
<source srcset="img.avif" type="image/avif">
<source srcset="img.webp" type="image/webp">
<img src="img.jpg">

Najczęstsze pytania

Czy WebP wygląda gorzej niż JPG?
Przy tej samej percepcyjnej jakości - nie, wygląda tak samo. WebP po prostu lepiej kompresuje. Przy niskich ustawieniach jakości (quality 50) WebP daje wyraźniejszy obraz niż JPG przy tym samym rozmiarze pliku. Większość użytkowników wzrokowo nie odróżni WebP od JPG dla zdjęć produktowych czy banerów.
Czy warto używać AVIF zamiast WebP?
AVIF jest nowszy i daje jeszcze lepszą kompresję (~50% mniej niż JPG). Ma jednak nieco mniejsze wsparcie (Chrome od 2020, Firefox 2021, Safari 2022). Najlepiej używać razem: AVIF jako pierwszy wybór, WebP jako fallback, JPG jako ostatni. Element <picture> obsługuje to natywnie z wieloma <source>.
Dlaczego WordPress czasem ładuje JPG zamiast WebP?
WordPress sam nie konwertuje obrazów do WebP - potrzebujesz wtyczki (ShortPixel, Smush, WebP Converter). Po instalacji wtyczka tworzy wersje WebP dla istniejących obrazów i automatycznie serwuje je przeglądarkom wspierającym format, fallbackując do JPG dla starszych. Sprawdź ustawienia wtyczki - czasem trzeba ręcznie wymusić regenerację dla starych obrazów.
Powiązane pojęcia
LCP (Largest Contentful Paint)Lazy loading - opóźnione ładowanie obrazów

Sprawdź swoją stronę

Wpisz adres swojej strony, w 30 sekund zobaczysz konkretną listę problemów do naprawy - wraz z wpływem na sprzedaż, SEO i koszty reklam.

Zacznij test →