WebP w WordPressie — formaty, rozmiary i kompresja obrazów

WebP w WordPressie to najprostszy sposób, żeby zdjęcia na stronie ważyły mniej, a wyglądały tak samo dobrze. WordPress od wersji 5.8 przyjmuje pliki WebP, a od wersji 6.5 także nowszy format AVIF. Sam format to jednak tylko część sprawy: równie ważne są wymiary zdjęcia, które wgrywasz, i stopień kompresji. Zdjęcie prosto z telefonu, zapisane nawet w nowoczesnym formacie, potrafi być kilka razy większe, niż potrzeba.

Z tego poradnika dowiesz się, czym różnią się JPEG, PNG, WebP i AVIF, jak przygotować zdjęcie przed wgraniem, co WordPress robi z obrazem po wgraniu i jak sprawdzić, czy Twoja strona serwuje lekkie pliki.

WebP w WordPressie — czy warto i od czego zacząć

Krótka odpowiedź: tak, warto. WebP zwykle daje mniejszy plik niż JPEG przy podobnej jakości, obsługuje przezroczystość jak PNG i działa we wszystkich współczesnych przeglądarkach. Google Grafika indeksuje obrazy WebP tak samo jak JPEG i PNG, więc zmiana formatu nie odbiera Ci widoczności w wyszukiwarce grafik.

Najszybsza droga dla małej firmy wygląda tak:

1. Sprawdź, czy serwer obsługuje WebP. Wgraj testowy plik .webp przez Media → Dodaj nowy. Jeśli WordPress go przyjmie i pokaże miniaturę, serwer sobie radzi. Jeśli zgłosi błąd, zapytaj firmę hostingową o obsługę WebP w bibliotece GD lub Imagick.
2. Nowe zdjęcia przygotowuj od razu w WebP — przy zmniejszaniu wymiarów zapisz je w tym formacie (narzędzia opisuję niżej).
3. Stare zdjęcia zostaw na później. Zacznij od stron, które sprzedają: strona główna, oferta, realizacje.

Ważna informacja

Wgranie nowego pliku nie podmienia obrazów, które już są w treści stron. Każdy obraz wstawiony do strony wskazuje konkretny plik. Jeśli chcesz zamienić stare JPEG-i na WebP, musisz wstawić nowe pliki w treść albo użyć wtyczki, która robi konwersję za Ciebie.

JPEG, PNG, WebP czy AVIF — który format wybrać

Każdy format ma swoje miejsce. Zamiast pamiętać szczegóły techniczne, kieruj się rodzajem obrazu:

• JPEG — zdjęcia. Działa wszędzie, ale przy tej samej jakości plik jest zwykle większy niż w WebP.
• PNG — grafiki z ostrymi krawędziami, zrzuty ekranu, logo z przezroczystym tłem. Do zdjęć się nie nadaje — plik będzie bardzo ciężki.
• WebP — dobry wybór domyślny zarówno do zdjęć, jak i do grafik z przezroczystością.
• AVIF — często jeszcze mniejszy plik niż WebP, ale zapis trwa dłużej, nie każdy program graficzny go obsługuje, a serwer musi mieć bibliotekę z obsługą AVIF.
• SVG — logo i ikony zapisane jako grafika wektorowa. WordPress domyślnie nie pozwala go wgrywać, bo plik SVG może zawierać kod — nie omijaj tej blokady przypadkową wtyczką.

Wskazówka

Jeśli nie wiesz, co wybrać: zdjęcia w WebP, logo w SVG (wstawione przez motyw) albo w PNG lub WebP z przezroczystością. AVIF potraktuj jako opcję, gdy WebP już masz opanowany.

Wymiary zdjęcia — najczęściej pomijany krok

Aparat w telefonie robi zdjęcia o szerokości kilku tysięcy pikseli. Treść większości stron firmowych ma szerokość około 700–1200 pikseli, a zdjęcie na całą szerokość ekranu rzadko potrzebuje więcej niż około 2000 pikseli. Wszystko powyżej to dane, które odwiedzający pobiera, a których nigdy nie zobaczy.

Co WordPress robi z wgranym obrazem

Po wgraniu WordPress tworzy kilka mniejszych kopii obrazu. Ich wymiary dla rozmiarów Miniatura, Średni i Duży ustawisz w Ustawienia → Media. Motyw i wtyczki mogą dodać własne rozmiary. Przy wstawianiu obrazu do treści WordPress dodaje do kodu listę dostępnych wersji (atrybut srcset), dzięki czemu telefon może pobrać mniejszy plik niż komputer z dużym ekranem.

WordPress ma też zabezpieczenie przed zbyt dużymi zdjęciami: obraz szerszy lub wyższy niż 2560 pikseli zostaje automatycznie zmniejszony, a do nazwy pliku dodawane jest -scaled. Oryginał zostaje na serwerze.

Uwaga

Każdy wgrany obraz to kilka plików na serwerze — po jednym na każdy rozmiar. Wgrywanie 6-megabajtowych zdjęć z telefonu szybko zapełnia miejsce na hostingu i wydłuża kopie zapasowe, nawet jeśli odwiedzający dostają mniejsze wersje.

Jak dobrać rozmiar przed wgraniem

1. Sprawdź, jak szeroko wyświetla się obraz na stronie: w przeglądarce kliknij go prawym przyciskiem → Zbadaj i najedź na znacznik img. Przeglądarka pokaże wymiary wyświetlane i rzeczywiste.
2. Przygotuj plik mniej więcej dwa razy szerszy niż wymiar wyświetlany, żeby obraz był ostry na ekranach o dużej gęstości pikseli, ale nie szerszy niż około 2000–2500 pikseli.
3. Zmień nazwę pliku na opisową, np. remont-lazienki-krakow.webp, zanim go wgrasz.
4. Po wgraniu uzupełnij tekst alternatywny — o tym, jak go napisać, przeczytasz w poradniku jak pisać teksty ALT obrazów.

Przykład

Przed: IMG_5521.jpg — 4032 × 3024 px, zdjęcie prosto z telefonu

Po: remont-lazienki-krakow.webp — 1600 × 1200 px, kompresja w jakości około 80

Kompresja — jak zmniejszyć plik bez utraty jakości

Kompresja stratna usuwa szczegóły, których oko zwykle nie zauważa. Większość programów pozwala ustawić jakość w skali do 100. Dla zdjęć na stronę firmową dobrym punktem wyjścia jest zakres około 75–85 — powyżej plik szybko rośnie, a różnica jest trudna do zauważenia. Zawsze porównaj wynik z oryginałem na ekranie, zwłaszcza na zdjęciach z drobnymi detalami, napisami albo gładkim niebem.

Narzędzia, które nic nie kosztują

• Squoosh — narzędzie w przeglądarce od zespołu Google Chrome. Wczytujesz zdjęcie, wybierasz format WebP lub AVIF, zmieniasz wymiary i od razu widzisz porównanie przed i po.
• Program graficzny, którego już używasz — wiele z nich ma eksport do WebP z suwakiem jakości.
• Wtyczka do optymalizacji obrazów — kompresuje i konwertuje pliki przy wgrywaniu, także całą istniejącą bibliotekę. Wybierz jedną, sprawdź, czy zostawia kopię oryginałów, i nie łącz kilku wtyczek o tym samym zadaniu.

Wskazówka

Zespół WordPressa rozwija wtyczkę Modern Image Formats (część projektu Performance Lab), która przy wgrywaniu tworzy wersje WebP lub AVIF. To dobry punkt startu, jeśli wolisz rozwiązanie od autorów WordPressa niż komercyjną wtyczkę.

Uwaga

Masowa konwersja całej biblioteki to zmiana na wielu podstronach naraz. Zrób wcześniej kopię zapasową strony i po konwersji sprawdź kilka kluczowych podstron na telefonie i komputerze.

Leniwe ładowanie i obraz na górze strony

WordPress od wersji 5.5 dodaje obrazom w treści atrybut loading="lazy". Przeglądarka pobiera wtedy obraz dopiero, gdy użytkownik zbliża się do niego podczas przewijania. Nowsze wersje WordPressa starają się nie stosować tego do pierwszego dużego obrazu na stronie, bo ten powinien wczytać się jak najszybciej.

Duże zdjęcie na górze strony (tzw. baner albo hero) często jest największym elementem, który widzi odwiedzający. Jeśli waży kilka megabajtów, cała strona wydaje się wolna, nawet gdy reszta jest lekka. To pierwszy obraz, który warto zmniejszyć i skompresować.

Warto zapamiętać

Lekki obraz to trzy decyzje: właściwe wymiary, rozsądna kompresja i nowoczesny format. Sam WebP nie pomoże, jeśli wgrywasz zdjęcia o szerokości 4000 pikseli.

Jak sprawdzić obrazy na swojej stronie

1. Otwórz stronę w przeglądarce Chrome, kliknij prawym przyciskiem → Zbadaj i przejdź do zakładki Network (Sieć).
2. Odśwież stronę i włącz filtr obrazów (Img). Zobaczysz listę pobranych plików z rozmiarem i typem.
3. Posortuj według rozmiaru. Pliki powyżej kilkuset kilobajtów to pierwsi kandydaci do poprawki.
4. Uruchom PageSpeed Insights dla tej samej strony. W sekcji diagnostyki znajdziesz wskazówki dotyczące obrazów, np. za dużych wymiarów albo starszych formatów.
5. Popraw najcięższe obrazy na stronach, które sprzedają, i powtórz pomiar.

Ważna informacja

Wyniki PageSpeed Insights zmieniają się między pomiarami, bo zależą od serwera, sieci i chwilowego obciążenia. Porównuj kilka pomiarów, a nie jeden.

Obrazy to tylko jeden z punktów przeglądu strony. Jeśli chcesz sprawdzić całość — metadane, nagłówki, błędy 404, przekierowania i indeksowanie — skorzystaj z listy kontrolnej audytu SEO WordPress.

Najczęstsze pytania

Czy WebP poprawi pozycję mojej strony w Google? Nie bezpośrednio. Lżejsze obrazy przyspieszają wczytywanie strony, co jest wygodniejsze dla odwiedzających. Na pozycję wpływa jednak wiele czynników, a sama zmiana formatu niczego nie gwarantuje.

Czy muszę usunąć stare pliki JPEG? Nie. Jeśli są wstawione w treść lub linkowane z zewnątrz, usunięcie ich spowoduje puste miejsca na stronach. Zamieniaj obrazy stopniowo.

Co z obrazami w motywie i page builderze? Tło sekcji w Elementorze lub obraz w nagłówku motywu wgrywa się osobno. Sprawdź je tak samo, w zakładce Network.

Co z tego robi Wypozycjonuj.pl

Wypozycjonuj.pl nie konwertuje ani nie kompresuje obrazów i nie zajmuje się szybkością strony — do tego służą narzędzia opisane wyżej. Pracownik AI pomaga przy innej części pracy z obrazami: cotygodniowy skan wskazuje obrazy bez tekstu alternatywnego na każdej podstronie, a w planach Business i Premium AI pisze propozycje opisów ALT i po Twojej akceptacji wprowadza je w WordPressie, z możliwością cofnięcia każdej zmiany. Pełny zakres pracy znajdziesz na stronie co robi pracownik AI, a więcej o roli obrazów w dostępności — w poradniku o tekstach alternatywnych.

Podsumowanie

Zdjęcia zapisuj w WebP, w szerokości około 1600–2500 pikseli i jakości około 75–85. Zmień nazwę pliku przed wgraniem, uzupełnij ALT i zacznij od najcięższych obrazów na stronach, które sprzedają. Konwersję całej biblioteki rób dopiero po kopii zapasowej.