Jak używać obrazów WebP w WordPress (3 metody)

Obrazy są często największym problemem wolnej witryny WordPress. Jeśli Twoje strony ładują się zbyt długo, odwiedzający odejdą, zanim zobaczą Twoją treść.

Na szczęście użycie obrazów WebP może to naprawić. Ten nowoczesny format pliku zmniejsza rozmiar obrazów nawet o 35% bez utraty jakości, dzięki czemu Twoja witryna jest znacznie szybsza.

W tym przewodniku pokażemy Ci, jak używać obrazów WebP w WordPress za pomocą trzech różnych metod.

Co to jest WebP?

WebP to nowoczesny format obrazu opracowany przez Google specjalnie do użytku w internecie. Tym, co go wyróżnia, jest jego doskonała technologia kompresji. Obrazy WebP są zazwyczaj o 25-35% mniejsze niż pliki JPEG i PNG, zachowując jednocześnie identyczną jakość wizualną.

Dla porównania, jeśli Twój obecny obraz PNG ma 100 KB, ten sam obraz w formacie WebP będzie miał około 65-75 KB bez widocznej różnicy w jakości. Zmniejszenie rozmiaru bezpośrednio przekłada się na szybsze ładowanie stron i lepsze wrażenia użytkownika.

Format obsługuje zarówno kompresję stratną, jak i bezstratną, a także funkcje takie jak przezroczystość i animacja, co czyni go wszechstronnym zamiennikiem dla wielu tradycyjnych formatów.

Dowiedz się o kompresji obrazów w naszym przewodniku na temat optymalizacji obrazów dla sieci.

Obsługa przeglądarek: Czy WebP jest gotowy dla Twojej witryny?

Obecnie WebP cieszy się silnym wsparciem przeglądarek z ponad 95% globalnym zasięgiem. Wszystkie główne przeglądarki, w tym Chrome, Firefox, Safari (od iOS 14) i Edge, w pełni obsługują obrazy WebP.

Pozostałe 5% to głównie starsze wersje przeglądarek, których użycie szybko spada.

Czy powinieneś używać obrazów WebP w WordPress?

Dla większości stron WordPress odpowiedź brzmi tak. Implementacja WebP może znacząco przyspieszyć Twoją stronę WordPress i doskonale współpracuje z innymi optymalizacjami wydajności, takimi jak wtyczki do buforowania i sieci CDN.

Od wersji WordPress 5.8 platforma ma natywne wsparcie dla WebP, co oznacza, że możesz przesyłać i używać obrazów WebP bezpośrednio bez żadnych wtyczek. Jednak to podstawowe wsparcie nie obejmuje automatycznej konwersji wcześniej przesłanych obrazów ani opcji zapasowych dla starszych przeglądarek.

Aby uzyskać najlepsze rezultaty, zalecamy użycie dedykowanej wtyczki do optymalizacji obrazów. Te wtyczki automatycznie konwertują istniejące obrazy do formatu WebP i serwują tradycyjne wersje JPEG lub PNG dla niewielkiego odsetka użytkowników z nieobsługiwanymi przeglądarkami.

WebP jest szczególnie korzystne, jeśli Twoja witryna jest bogata w obrazy (jak blogi fotograficzne, sklepy internetowe lub portfolio) lub jeśli Twój blog WordPress obecnie boryka się z problemami powolnego ładowania z powodu dużych obrazów.

Oto jak używać obrazów WebP w WordPress. Pokażemy Ci wiele metod, abyś mógł wybrać tę, która działa najlepiej dla Ciebie:

Metoda 1: Używanie obrazów WebP w WordPress z EWWW Optimizer

EWWW Image Optimizer to jedna z najlepszych wtyczek do kompresji obrazów WordPress, która pozwala optymalizować obrazy w WordPress. Obsługuje również obrazy WebP i może automatycznie wyświetlać je w obsługiwanych przeglądarkach. Zobacz naszą recenzję EWWW Image Optimizer, aby uzyskać więcej szczegółów.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę EWWW Image Optimizer. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony Ustawienia » Optymalizator obrazów EWWW, aby skonfigurować opcje wtyczki. Zobaczysz kreatora konfiguracji, ale możesz kliknąć link „Wiem, co robię”, aby go zamknąć.

Na następnym ekranie zobaczysz szereg opcji wtyczki.

Przewiń w dół i zaznacz pole wyboru obok opcji „Konwersja WebP”.

Następnie kliknij przycisk „Zapisz zmiany”, aby zachować swoje ustawienia.

Następnie musisz przewinąć w dół do sekcji Konwersja WebP. Wtyczka wyświetli teraz niektóre reguły przepisywania z czerwonym obrazem podglądu.

Musisz kliknąć przycisk „Wstaw reguły przepisywania”, a wtyczka automatycznie spróbuje wstawić te reguły przepisywania do Twojego pliku .htaccess.

Jeśli wtyczce uda się dodać te reguły, czerwony podgląd obrazu zmieni kolor na zielony z tekstem „WebP”.

Czasami wtyczka może nie być w stanie wstawić reguł. W takim przypadku musisz skopiować reguły przepisywania ze strony ustawień wtyczki i wkleić je ręcznie na dole pliku .htaccess.

Po zakończeniu wróć do strony ustawień wtyczki i ponownie kliknij przycisk „Zapisz zmiany”. Jeśli obraz podglądu zmieni kolor na zielony, oznacza to, że pomyślnie włączyłeś dostarczanie obrazów WebP na swojej stronie WordPress.

Alternatywnie możesz wybrać „Przepisywanie WebP za pomocą JS” lub „Przepisywanie WebP za pomocą obrazu” jako opcje dostarczania WebP. Są to niezawodne alternatywy, jeśli metoda .htaccess nie działa dla konfiguracji Twojego serwera (na przykład, jeśli używasz CDN).

Masowa konwersja starych obrazów do wersji WebP

EWWW Image Optimizer pozwala łatwo konwertować wcześniej przesłane pliki obrazów do formatu WebP. Po prostu przejdź do strony Media » Biblioteka i przełącz się na widok listy.

Następnie kliknij przycisk „Opcje ekranu” i zmień „Liczba elementów na stronie” na 999. Jeśli masz 1000+ obrazów, te obrazy pojawią się na następnej stronie.

W ten sposób będziesz mógł szybko wybrać dużą liczbę obrazów do masowej optymalizacji. Następnie kliknij pole wyboru „Zaznacz wszystko” u góry, aby zaznaczyć wszystkie obrazy.

Następnie kliknij menu rozwijane „Akcje masowe” i wybierz opcję „Optymalizuj masowo”. Na koniec kliknij przycisk „Zastosuj”.

Na następnym ekranie wtyczka da Ci możliwość pominięcia kompresji obrazów i tylko konwersji ich do formatu WebP. Możesz zaznaczyć tę opcję, jeśli Twoje obrazy są już zoptymalizowane.

Następnie kliknij przycisk „Skanuj nieoptymalizowane obrazy”, aby kontynuować. Wtyczka wyświetli liczbę znalezionych obrazów, więc możesz kliknąć przycisk „Optymalizuj”, aby przejść dalej.

Twoje obrazy zostaną teraz zoptymalizowane, a EWWW Optimizer wygeneruje wersje WebP dla Twoich obrazów.

Testowanie dostarczania obrazów WebP

Po zoptymalizowaniu obrazów możesz przejść do wpisu na blogu zawierającego kilka obrazów.

Najedź kursorem na dowolny obrazek i kliknij prawym przyciskiem myszy, aby otworzyć obrazek w nowej karcie.

Spowoduje to otwarcie obrazu w nowej karcie przeglądarki.

Ponieważ EWWW Image Optimizer używa specjalnych reguł przepisywania, adres URL obrazu w pasku adresu nadal będzie wyświetlał oryginalne rozszerzenie pliku (np. .png lub .jpg).

Aby potwierdzić, że jest to obraz WebP, kliknij prawym przyciskiem myszy na obrazie i wybierz „Zapisz obraz jako…”. W oknie pobierania powinieneś zobaczyć „Obraz WebP” jako typ pliku.

Jeśli wtyczka nie może serwować obrazu WebP, możesz wrócić do strony ustawień wtyczki. Stamtąd możesz zmienić opcję dostarczania WebP na metody „Przekierowanie WebP przez JS” lub „Przekierowanie WebP”.

Metoda 2: Używanie obrazów WebP w WordPress z Imagify

Imagify to wtyczka do optymalizacji obrazów WordPress stworzona przez ludzi stojących za WP Rocket, najlepszą wtyczką buforującą WordPress. Pozwala łatwo optymalizować i konwertować obrazy do formatu obrazów WebP. Zobacz naszą recenzję Imagify, aby dowiedzieć się więcej.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Imagify. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić stronę Ustawienia » Imagify, aby skonfigurować ustawienia wtyczki. Stamtąd kliknij przycisk „Utwórz darmowy klucz API”, aby kontynuować.

Zostaniesz poproszony o podanie służbowego adresu e-mail. Następnie możesz sprawdzić swoją skrzynkę odbiorczą w poszukiwaniu wiadomości e-mail zawierającej Twój klucz API. Skopiuj i wklej klucz na stronie ustawień wtyczki i kliknij przycisk „Zapisz zmiany”.

Następnie musisz przewinąć w dół do sekcji Optymalizacja. Tam musisz zaznaczyć opcje obok „Utwórz wersje webp obrazów” i „Wyświetlaj obrazy w formacie webp na stronie”.

Poniżej możesz wybrać jedną z dwóch metod dostarczania obrazów WebP w WordPress. Pierwsza to metoda .htaccess, a druga to użycie tagu.

Metoda .htaccess jest szybsza, ale nie działa, jeśli korzystasz z usługi CDN. Metoda tagów (używająca tagów <picture>) działa doskonale z CDN, chociaż nieznacznie zmienia strukturę kodu Twojej witryny.

Możesz wybrać jeden z nich, który dobrze sprawdzi się w Twojej witrynie. Następnie kliknij przycisk „Zapisz i przejdź do masowego optymalizatora” na dole.

Spowoduje to przejście do strony Media » Optymalizacja masowa.

Wtyczka automatycznie rozpocznie optymalizację wszystkich Twoich obrazów WordPress w tle.

Jeśli masz dużo obrazów, może to potrwać chwilę. Nie martw się, możesz zamknąć stronę i wrócić do niej później, ponieważ zamknięcie strony nie zatrzyma procesu optymalizacji obrazu.

Testowanie obrazów WebP w WordPress

Po zakończeniu optymalizacji możesz odwiedzić stronę lub wpis zawierający kilka obrazów. Najedź kursorem na obraz, a następnie kliknij prawym przyciskiem myszy, aby wybrać opcję „Otwórz obraz w nowej karcie”.

Spowoduje to otwarcie obrazu w nowej karcie przeglądarki.

Ponieważ Imagify zachowuje oryginalną strukturę adresów URL, nie zobaczysz rozszerzenia .webp w pasku adresu. Zamiast tego kliknij prawym przyciskiem myszy na obrazek i wybierz „Zapisz obraz jako…”. Typ pliku w oknie zapisywania powinien wskazywać „Obraz WebP”.

Metoda 3: Używanie obrazów WebP w WordPress z SG Optimizer

Ta metoda jest zalecana, jeśli jesteś użytkownikiem SiteGround.

SiteGround to jedna z najlepszych firm hostingowych WordPress. Oferują swoim użytkownikom darmową wtyczkę SG Optimizer, która pozwala zoptymalizować wydajność WordPressa. Zawiera ona również opcję optymalizacji obrazów WordPress.

Najpierw musisz zainstalować i aktywować wtyczkę SG Optimizer.

Po aktywacji wtyczka doda nową pozycję menu do paska bocznego administratora zatytułowaną „SG Optimizer”. Kliknięcie jej przeniesie Cię do strony ustawień wtyczki.

Stąd możesz włączyć ustawienia buforowania, jeśli chcesz korzystać z wbudowanego systemu buforowania SiteGround.

Następnie możesz przejść do zakładki Optymalizacja Mediów i włączyć opcję „Generuj kopie WebP nowych obrazów”.

Poniżej zobaczysz opcję „Masowe generowanie plików WebP”.

Kliknięcie przycisku przełączania tej opcji rozpocznie generowanie kopii WebP dla wszystkich plików obrazów w Twojej bibliotece multimediów WordPress.

Po zakończeniu Twoja witryna WordPress zacznie serwować obrazy WebP.

Testowanie obrazów WebP w SG Optimizer

Aby sprawdzić, czy Twoja witryna serwuje obrazy WebP, musisz otworzyć stronę w swojej witrynie z kilkoma obrazami.

Następnie kliknij prawym przyciskiem myszy i wybierz narzędzie Inspekcja. Spowoduje to otwarcie konsoli deweloperskiej, gdzie musisz przełączyć się na kartę Sieć.

Stąd kliknij na zakładkę filtra „Img”, a następnie przeładuj stronę (CTRL+R w systemie Windows i Command+R na Macu). Spójrz na kolumnę „Typ” w inspektorze. Powinieneś zobaczyć „webp” wymienione jako typ Twoich obrazów.

Samouczek wideo

Subskrybuj WPBeginner

Najczęściej zadawane pytania dotyczące obrazów WebP

Wielu czytelników ma pytania dotyczące przełączenia się na ten format pliku i tego, jak wpływa on na wydajność ich witryny. Oto odpowiedzi na niektóre z najczęstszych pytań, które otrzymujemy na temat używania obrazów WebP w WordPressie.

1. Czy obrazy WebP naprawdę pomagają w SEO?

Tak, obrazy WebP mogą znacząco poprawić Twoje rankingi SEO. Google uważa szybkość ładowania strony za ważny czynnik rankingowy, a używanie WebP skraca czas ładowania strony.

Dostarczając mniejsze pliki obrazów, poprawiasz swoje wyniki Core Web Vitals, co pomaga Twojej witrynie WordPress wyżej plasować się w wynikach wyszukiwania.

2. Co się stanie, jeśli przeglądarka odwiedzającego nie obsługuje WebP?

Chociaż większość nowoczesnych przeglądarek obsługuje WebP, niewielki procent starszych przeglądarek nie obsługuje go.

Jeśli używasz wtyczki optymalizującej, takiej jak EWWW Image Optimizer lub Imagify, wtyczka automatycznie wykrywa przeglądarkę odwiedzającego. Będzie ona serwować wersję WebP dla nowoczesnych przeglądarek i oryginalny plik JPEG lub PNG dla starszych przeglądarek, zapewniając, że każdy może zobaczyć Twoje treści.

3. Czy mogę przesyłać obrazy WebP bezpośrednio do WordPressa bez wtyczki?

Tak, WordPress w wersji 5.8 i nowszych pozwala na bezpośrednie przesyłanie plików WebP do biblioteki mediów, tak jak przesyłasz pliki JPEG lub PNG. Jednak ręczne przesyłanie plików nie konwertuje Twojej istniejącej biblioteki mediów.

Aby automatycznie przekonwertować starsze obrazy, nadal potrzebujesz wtyczki do optymalizacji obrazów, takiej jak SG Optimizer lub EWWW Image Optimizer.

4. Czy WebP jest lepszy od JPEG lub PNG?

W prawie każdym przypadku WebP jest lepszy dla wydajności strony internetowej. Obrazy WebP są zazwyczaj o 25% do 35% mniejsze niż porównywalne pliki JPEG lub PNG, zachowując tę samą jakość wizualną. Ten mniejszy rozmiar pliku oszczędza przepustowość i sprawia, że strony ładują się znacznie szybciej dla Twoich odwiedzających.

5. Czy konwersja do WebP usunie moje oryginalne obrazy?

Większość wtyczek do optymalizacji obrazów, w tym Imagify i EWWW Image Optimizer, domyślnie nie usuwa oryginalnych obrazów. Tworzą one wersję obrazu w formacie WebP do wyświetlania odwiedzającym, zachowując oryginalny plik na serwerze jako kopię zapasową. Pozwala to na cofnięcie zmian, jeśli kiedykolwiek zdecydujesz się zaprzestać używania formatu WebP.

Eksperckie poradniki dotyczące używania obrazów w WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak używać obrazów WebP w WordPress. Możesz również zapoznać się z innymi poradnikami dotyczącymi używania obrazów na swojej stronie WordPress:

• Jak prawidłowo dodawać obrazy w WordPressie (krok po kroku)
• Jak dodać obrazy wyróżniające lub miniatury postów w WordPress
• WebP vs. PNG vs. JPEG: Najlepszy format obrazu dla WordPressa
• Jak zoptymalizować obrazy pod kątem wydajności sieci bez utraty jakości
• Porównanie najlepszych wtyczek do kompresji obrazów WordPress
• Narzędzia do tworzenia lepszych obrazów do Twoich wpisów na blogu
• Świetne wtyczki WordPress do zarządzania obrazami (zaktualizowane)
• Tekst alternatywny obrazu a tytuł obrazu w WordPress – jaka jest różnica?
• Gdzie WordPress przechowuje obrazy na Twojej stronie?
• Jak łatwo leniwie ładować obrazy w WordPressie

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.