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

Jednak dostarczanie obrazów przez WebP nie jest łatwe. Zależy to od serwera WWW twojego serwera, wybranego cdn, motywu, wtyczek buforujących itp.

Ten przewodnik pomoże Ci dostarczać obrazy WebP do WordPress na trzy sposoby.

Co to jest WebP?

Nowy format obrazu w Internecie

przez Google

WebP to format obrazu (np. png i jpg) opracowany przez Google. Obrazy WebP (.webp) są zwykle znacznie mniejsze, co przyspiesza działanie stron internetowych i zużywa mniej przepustowości.

W zależności od obrazu możesz zmniejszyć rozmiar od 25% do 70%.

JPEG, PNG, GIF itp. mają swoje wady i zalety. Poniższa tabela poda Ci pomysł:

WebP ma prawie wszystkie wymienione wyżej funkcje! Dlaczego więc nie możemy wszędzie używać WebP?

Dlaczego nie używać WebP wszędzie?

Jak widać, tylko 80% urządzeń obsługuje tylko WebP. Nie tylko starsze przeglądarki, Safari/iOS Safari nadal nie obsługuje WebP.

Dlaczego tak trudno jest obsługiwać WebP?

Jak zauważyłeś, dostarczamy obrazy zgodnie z przeglądarką. Jeśli przeglądarka nie obsługuje WebP, musimy dostarczyć im oryginalny obraz (jpg/png/gif).

Istnieją dwa główne sposoby obsługi WebP:

Korzystanie z tagu obrazu

Możemy użyćobrazekaby poinformować przeglądarkę, że mamy format WebP. Jeśli przeglądarka to obsługuje, zostanie załadowany zwykły/zastępczy obraz.

<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>

Inną odpowiedzią

W innej odpowiedzi jak zwykle masz jeden plik. Dokładnie tak:

<img src="img.jpg" />

Jeden adres URL obrazu obsługuje dostarczanie plików jpg i webp. To właśnie robi serwer.

Mimo że jest to rozszerzenie pliku .jpg, jeśli przeglądarka obsługuje WebP, odpowiedzią będzie WebP. Nazywany również „zróżnicowaną reakcją”.

Tag obrazu a odpowiedź zróżnicowana

Każdy ma swoje plusy i minusy. Oto tabela porównawcza:

Jak wyświetlać obrazy w WebP w WordPressie?

Metoda nr 1 - Używaj CDN tylko z konwersją Fly WebP

To chyba najprostsze rozwiązanie. Niektórzy dostawcy CDN obsługują obecnie konwersję obrazu w locie do WebP wraz z optymalizacją obrazu.

Tu jest kilka:

• Królik CDN
• Cloudflare z polskim (Pro Plan)
• Pochmurny
• Obrazy adaptacyjne ShortPixel (używa usługi StackPath CDN)
• Kompres WP

Korzystając z tej metody, można również zaoszczędzić miejsce na dysku, ponieważ nie trzeba przechowywać zarówno zwykłych, jak i przekonwertowanych obrazów WebP.

Królik CDN

BunnyCDN jest wyposażony w Bunny Optimizer, który może kompresować obrazy i konwertować je na WebP w locie.

Metoda nr 2 - Korzystanie z zróżnicowanej odpowiedzi + CDN

Jak opisano powyżej, „odpowiedź odmiany” będzie miała pojedynczy adres URL obrazu, który może wyświetlać zarówno obrazy WebP, jak i inne, w zależności od żądanej przeglądarki.

Musimy również wybrać odpowiednią sieć CDN, która obsługuje nagłówki żądań WebP jako klucz pamięci podręcznej. W przeciwnym razie, gdy obraz WebP zostanie zbuforowany na serwerze, zostanie dostarczony do przeglądarek, które nie obsługują WebP.

Dostosowywanie zróżnicowanej odpowiedzi w WordPress

Najłatwiejszym sposobem skonfigurowania bogatej odpowiedzi dla WebP w WordPressie jest użycie wtyczki WebP Express. Wystarczy zainstalować wtyczkę i kliknąć „Zapisz ustawienia i wymuś nowe reguły .htaccess”.

WebP Express skonfiguruje konwerter WebP i nadpisze reguły, tak aby po otrzymaniu żądania konwertował obrazy do WebP w locie, a jeśli przeglądarka nie obsługuje WebP, zostanie dostarczony obraz domyślny.

Jeśli jesteś w Nginx

WebP Express dodaje niezbędne reguły przepisywania „.htaccess”, ale działa tylko na serwerze Apache, LiteSpeed ​​lub OpenLiteSpeed. Jeśli używasz Nginx, musisz edytowaćnginx.configi dodaj następujący kod:

# Reguły WebP Express# --------------------lokalizacja ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Zmieniaj Accept;wygasa 365d;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# Kieruj żądania dotyczące nieistniejących sieci webps do lokalizacji konwertera ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (tutaj kończy się reguła WebP Express)

Powyższy kod dodaje wymagane nagłówki odpowiedzi (zarządzanie pamięcią podręczną też się różni) i próbuje dostarczyć WebP, jeśli istnieje, w przeciwnym razie przekierowuje go do konwertera (w oparciu o obsługę przeglądarki)

Dostawcy CDN wspierający Diverse Response

Jeśli Twój dostawca CDN nie obsługuje WebP jako klucza pamięci podręcznej, pliki WebP będą dostarczane do przeglądarek, które nie obsługują WebP. Podobnie jest szansa, że ​​obrazy inne niż webp zostaną dostarczone do obsługiwanych przeglądarek.

Królik CDN , Klucz CDN , Google CDN i wielu innych dostawców CDN obsługuje WebP jako klucz pamięci podręcznej. Upewnij się, że włączyłeś je w ustawieniach.

VKrólik CDN :

VKlucz CDN :

Czy korzystasz z darmowego planu Cloudflare?

Niestety, darmowy plan Cloudflare nie obsługuje WebP jako klucza pamięci podręcznej. Użyj CDN, takiego jak BunnCDN, lub przejdź na ich profesjonalny plan.

Skonfiguruj zróżnicowaną odpowiedź + CDN z popularnymi dostawcami usług hostingowych

Upewnij się, że zainstalowano WebP Express.

• Kinsta lub WP Engine - skontaktuj się z zespołem pomocy technicznej, aby dodać powyższą konfigurację Nginx i dołączyć klucz buforowania WebP do ich CDN (KeyCDN).
• Cloudways - po prostu zainstaluj WebP Express i zapisz ustawienia za pomocą .htacess. Ponieważ Cloudways wykorzystuje hybrydowe podejście Apache + Nginx, działa po wyjęciu z pudełka.
• SiteGound - Skontaktuj się z pomocą techniczną, aby dodać konfigurację Nginx. Użyj obsługiwanej sieci CDN, jak powyżej.
• Serwer LiteSpeed ​​/ OpenLiteSpeed ​​/ Apache - wystarczy zainstalować WebP Express i zapisać ustawienia z '.htacess'. Użyj również obsługiwanej sieci CDN, jak powyżej.
• Niestandardowy VPS z Nginx (stos LEMP) — konfiguracjanginx.confi użyj obsługiwanej sieci CDN, jak powyżej.

Metoda nr 3 — Korzystanie ze znacznika obrazu

Jeśli obie powyższe metody nie działają dla Ciebie, możesz użyć tagu obrazu. Nie wymaga konfiguracji serwera (edycji nginx.conf) i obsługuje wszystkich dostawców CDN.

Użycie tej metody zmieni kod HTML dla dostarczania WebP. Nie działa z obrazami tła, jest niekompatybilny z niektórymi motywami, wtyczkami do buforowania, wtyczkami z leniwym ładowaniem itp.

Jeśli użyjesz tej metody, wszystkie tagi img zostaną przekonwertowane w ten sposób:

<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>

Jeśli przeglądarka obsługuje WebP, dostarczany jest odpowiedni plik, w przeciwnym razie dostarczany jest zwykły obraz.

Dostosowywanie tagu obrazu dla WebP w WordPress

Najłatwiejszym sposobem skonfigurowania tagu obrazu jest użycie WebP Express.

Ustaw tryb pracy na „Przyjazny CDN” i włącz „Zmień HTML”.

Wniosek

Chciałbym, żeby nadszedł dzień, w którym wszystkie przeglądarki obsługują WebP!

Jeśli możesz wydać kilka dolarów miesięcznie, najłatwiejszym i najbardziej wydajnym sposobem jest użycie CDN, takiego jak BunnyCDN, który konwertuje obrazy do WebP w locie. W przeciwnym razie trzymaj się metody nr 2, o której wspomniałem powyżej.