Jak zoptymalizować obrazki na WordPressie? Wszystko o konwersji do WebP

Obrazki na stronie zwykle ważą najwięcej. Często to właśnie one generują największy transfer danych i odpowiadają za opóźnienia w renderowaniu elementów widoku. Nawet dobrze skonfigurowany hosting, szybki motyw i cache, nie zrekompensują sytuacji, gdzie strona pobiera kilka megabajtów zdjęć przy każdym wejściu użytkownika. Zatem jak zoptymalizować obrazki na WordPressie? Sprawdź, wszystko, co powinieneś wiedzieć o konwersji do WebP.

Z tego artykułu dowiesz się:

Strona wolno się ładuje? To może być wina obrazów

Wpisujesz adres strony www. Witryna zaczyna się wczytywać, treść i zdjęcia pojawiają się stopniowo, ale całość sprawia wrażenie „ciężkiej”.

I tu pojawia się podstawowy problem. Obrazy to zwykle największa część całkowitej wagi strony. Nie jeden obraz, ale wszystkie razem. HTML i CSS są lekkie. Nawet skrypty JavaScript, choć bywają rozbudowane, rzadko przekraczają wagę całej galerii produktowej czy kilku sekcji ze zdjęciami. Tymczasem każda grafika, jakiej używasz na stronie, zapisana w mało efektywnym formacie zwiększa ilość danych, jakie przeglądarka musi pobrać, przetworzyć i zdekodować.

Jeśli prowadzisz sklep internetowy z rozbudowaną galerią produktową, to każda jej podstrona może zawierać kilka zdjęć w wysokiej rozdzielczości, a strona kategorii, kilkanaście miniaturek ładowanych jednocześnie. W efekcie przy jednym wejściu użytkownika przeglądarka musi pobrać znacznie więcej danych, niż byłoby to konieczne przy zastosowaniu nowocześniejszego formatu.

Ten wpis może Cię zainteresować: 6 czynników, które mogą spowalniać Twojego WordPressa.

Formaty obrazów i ich wpływ na stronę

Problem zwykle nie wynika z braku kompresji ale z używania popularnych przez wiele lat formatów grafik. Przez lata, to właśnie JPG i PNG były standardem zapisu obecnych na stronie grafik. Zostały one zaprojektowane kilkanaście lat wstecz, a przez ten okres wiele się zmieniło w kontekście wydajności sieci i urządzeń.

Te formaty nadal działają i są w pełni wspierane przez wszystkie przeglądarki. Problem polega na tym, że ich efektywność pod względem kompresji jest już znikoma. Oznacza to, że dla tej samej jakości wizualnej generują większe pliki niż nowoczesne alternatywy.

Dziś podstawowym formatem rekomendowanym dla stron internetowych jest WebP lub AVIF. Oferują one znacznie lepszy stosunek jakości do rozmiaru pliku niż JPG oraz PNG.

Polecany wpis: Formaty obrazów: JPG, PNG, WebP i AVIF – jak wpływają na szybkość strony i jakość obrazu?

Poznaj WebP

WebP to format zapisu grafik, pozwalający zmniejszyć wagę obrazu do 30-50% przy zachowaniu zbliżonej jakości wizualnej. Został opracowany przez Google jako alternatywa dla JPG i PNG, a jego przewaga wynika z nowych algorytmów kodowania obrazu.

W trybie stratnym WebP wykorzystuje predykcyjne kodowanie blokowe (podobne do stosowanego w wideo). Pozwala ono efektywniej kompresować zdjęcia i gradienty. W trybie bezstratnym używa bardziej zaawansowanych metod kompresji niż klasyczny PNG.

W praktyce oznacza to, że przy podobnym poziomie jakości wizualnej plik WebP jest zazwyczaj mniejszy o około 25-35% względem JPG oraz około 20-30% względem PNG. Różnice oczywiście zależą od rodzaju grafik, ale w przypadku zdjęć produktowych, zdjęć blogowych czy obrazów hero oszczędności są mierzalne.

Jak sprawdzić jaki format obrazów mam na stronie WordPress?

Jeśli Twój WordPress zawiera dużą ilość obrazów, zweryfikuj w jakim formacie są obsługiwane i dostarczane użytkownikom. Najprostszym sposobem jest otwarcie strony w przeglądarce, wejście w Narzędzia deweloperskie (F12) i przejście do zakładki Network. Tutaj odfiltruj zasoby typu .img i .png. Jeśli w kolumnie typu lub nazwy pliku widzisz rozszerzenie .webp, oznacza to, że obrazy na Twojej stronie są serwowane w formacie .webp.

Sprawdzanie pojedynczego obrazu

W przypadku małej ilości obrazów, jeśli chcesz upewnić się jak to wygląda dla konkretnej podstrony, możesz wykonać proces również ręcznie.

1. Otwórz daną grafikę
   Najpierw znajdź interesującą Cię grafikę, na przykład zdjęcie w sekcji hero, miniaturę wpisu lub zdjęcie produktu. Następnie kliknij na nią prawym przyciskiem myszy i wybierz opcję „Otwórz grafikę w nowej karcie” (lub „Otwórz obraz w nowej karcie”, w zależności od przeglądarki).
   
   
2. Sprawdź rozszerzenie w adresie url
   Po otwarciu obrazu zwróć uwagę na pasek adresu przeglądarki. Rozszerzenie pliku widoczne w URL-u wskaże, w jakim formacie obraz jest faktycznie serwowany użytkownikowi. Jeśli adres kończy się na .jpg lub .png, strona nie korzysta w tym miejscu z WebP ani AVIF. Jeśli widzisz .webp lub .avif, oznacza to, że nowoczesny format jest poprawnie dostarczany.
   

Co jeśli widzę w adresie .jpg.webp?

Czasami podczas sprawdzania obrazów możesz zauważyć jeszcze inną formę zapisu, tak zwane, podwójne rozszerzenie pliku, na przykład zdjecie.jpg.webp.

Nie jest to błąd ani nieprawidłowo wygenerowany plik. To normalne zjawisko w przypadku stron, korzystających z automatycznej konwersji do WebP. Wtyczki optymalizacyjne oraz niektóre systemy CDN tworzą nową wersję obrazu na podstawie oryginału, zachowując jego pierwotną nazwę i dodając nowe rozszerzenie na końcu.

W praktyce oznacza to, że pierwotny plik był zapisany jako JPG, ale użytkownik otrzymuje już jego lżejszą wersję w formacie WebP.

Taka sytuacja oznacza, że:

• oryginalny plik na stronie był zapisany w formacie JPG,
• system (wtyczka lub CDN) wygenerował jego lżejszą wersję zapisaną w formacie WebP,
• a przeglądarka otrzymuje już docelowy plik WebP, mimo że w nazwie nadal widnieje rozszerzenie .jpg.

Dlaczego tak się dzieje?

Wiele wtyczek do WordPressa nie zastępuje oryginalnego pliku, tylko tworzy jego kopię w nowym formacie, zachowując nazwę bazową. Dzięki temu:

• łatwiej zachować kompatybilność,
• nie zmieniają się istniejące odwołania w bazie danych.

Jak przeprowadzić konwersję do WebP w WordPressie?

W praktyce konwersja do WebP na WordPressie sprowadza się do dwóch scenariuszy – automatycznej konwersji przez wtyczkę albo wykorzystania CDN z optymalizacją obrazów.

Dla większości właścicieli stron najprostszym rozwiązaniem jest instalacja sprawdzonej wtyczki do optymalizacji grafik, generującej wersje WebP dla istniejących oraz nowych plików.

Wtyczka do konwersji obrazów do Webp

Jedną z polecanych wtyczek do konwersji obrazów do formatu .webp jest EWWW Image Optimizer. Jej głównym zadaniem jest zmniejszanie rozmiaru plików graficznych oraz konwersja do nowoczesnych formatów, takich jak WebP (a w nowszych konfiguracjach również AVIF).

Z punktu widzenia właściciela strony EWWW rozwiązuje dwa problemy jednocześnie:

• optymalizuje istniejące obrazy w bibliotece mediów,
• automatycznie przetwarza przy uploadzie nowe pliki do docelowego formatu.

Jak działa konwersja do WebP w EWWW?

EWWW nie nadpisuje oryginalnych plików JPG/PNG. Zamiast tego tworzy ich alternatywne wersje w formacie WebP, zachowując oryginał.

Przykład:

• oryginał: obraz.jpg
• wersja wygenerowana: obraz.jpg.webp

Następnie wtyczka odpowiada za to, aby przeglądarka użytkownika otrzymała WebP, jeśli go obsługuje. Ten scenariusz odbywa się na 2 sposoby:

1. Rewrite rules (reguły serwera) – serwer automatycznie podmienia plik na WebP, jeśli przeglądarka wysyła nagłówek Accept: image/webp.
   
2. Znacznik <picture> – wtyczka modyfikuje HTML, dodając wersję WebP jako preferowaną.

Konwersja z EWWW Image Optimizer. Krok po kroku

1.Przejdź w panelu WordPressa do sekcji wtyczek.

2. Dodaj nową, wybierając z listy EWWW Image Optimizer

3. Przejdź proces instalacji.

4. W zakładce ustawień znajdź sekcję dotyczącą WebP i włącz
– Generate WebP versions
– opcję konwersji dla JPG oraz PNG

Jeśli dostępna jest opcja wyboru metody serwowania (rewrite / picture), wybierz tę kompatybilną z Twoim hostingiem i cache.

5. Gotowe. Proces instalacji został zakończony.

Jak przekonwertować istniejące obrazy do formatu .webP?

Samo włączenie WebP dotyczy zwykle nowych plików. Istniejące już obrazki musisz zoptymalizować. W tym celu:

Wejdź w Media – Optymalizacja zbiorcza

Uruchom proces optymalizacji dla całej biblioteki. Wtyczka wygeneruje brakujące wersje WebP dla wszystkich rozmiarów (miniatur, large, medium itd.).

W zależności od liczby plików proces może potrwać od kilku minut do kilkudziesięciu minut.

Pamiętaj, aby po zakończeniu konwersji wyczyścić cache wtyczki (jeśli używasz), cache serwera oraz cache CDN (jeśli jest). Bez tego użytkownicy mogą nadal otrzymywać starą wersję HTML z linkami do JPG/PNG

W celu weryfikacji, w przeglądarce warto otworzyć Narzędzia deweloperskie i sprawdzić w zakładce Network, czy obrazy faktycznie ładują się jako .webp, a nie jako .jpg czy .png. Sama informacja w panelu wtyczki o „wygenerowanych plikach” nie oznacza jeszcze, że są one realnie dostarczane użytkownikom. Jeśli korzystasz z cache lub CDN, konieczne może być jego wyczyszczenie, aby nowe wersje zaczęły być serwowane.