Jak korzystać z obrazów WebP w WordPressie?

Jeśli w Twojej witrynie jest zbyt wiele obrazów, są one przesyłane w formacie PNG lub JPG. Nauka korzystania z obrazów WebP w WordPress pomaga zmniejszyć rozmiar plików obrazów i zoptymalizować obrazy witryny pod kątem szybkiego ładowania.

Co to jest WebP?

Musisz mieć w przeszłości powszechnie używane typy plików graficznych, takie jak JPEG, JPG i PNG. Oprócz tych podstawowych typów obrazów istnieją również inne typy plików graficznych, o których musiałeś słyszeć.

WebP został opracowany przez Google w celu optymalizacji obrazów pod kątem szybkiego ładowania. Koncentruje się na dostarczaniu plików graficznych poprzez zmniejszenie rozmiaru pliku. Jeśli regularnie używasz obrazów w swojej witrynie i możesz zmniejszyć rozmiar wszystkich tych obrazów, znacznie poprawi to szybkość działania witryny.

Jeśli sprawdzisz witrynę za pomocą statystyk Pagespeed , otrzymasz zalecenie „ Wyświetlaj obrazy w formatach nowej generacji ”, jeśli jeszcze tego nie zrobiłeś, a WebP jest jednym z tych zalecanych formatów.

Kompresja obrazu może być bezstratna lub stratna. Obraz PNG jest dobrym przykładem kompresji bezstratnej. Podczas kompresji bezstratnej skompresowane obrazy tracą jakość w porównaniu do stratnych. W rzeczywistości kompresja w obrazach bezstratnych polega na redukcji niechcianych bitów danych obecnych na obrazach. Z tego powodu, jeśli to konieczne, możesz go rozpakować, aby odzyskać oryginalny obraz.

Z drugiej strony, obrazy stratne mają mniejszy rozmiar pliku niż obrazy bezstratne, ponieważ trwale usuwają bity danych z obrazów. W rezultacie jakość jest zagrożona podczas kompresji plików JPG/JPEG.

Format obrazu WebP można również skompresować do typu bezstratnego lub stratnego. Unika jednak kompromisu w jakości podczas kompresji. WebP korzysta z kodowania predykcyjnego, aby zmniejszyć rozmiar pliku, jeśli używasz kompresji stratnej, podczas gdy w przypadku kompresji bezstratnej WebP wykorzystuje złożone metody kompresji plików graficznych. W rezultacie kompresja obrazu WebP jest lepsza niż tradycyjne kompresje PNG/JPG.

Google powiedział już, że rozmiar pliku obrazu WebP jest o 26% mniejszy niż obraz PNG, a także o 25-34% mniejszy niż obraz JPEG.

To jest powód, dla którego powinieneś nauczyć się korzystać z obrazów WebP w WordPressie, kiedy tylko jest to możliwe.

Zalety i wady obrazów WebP

Należy pamiętać, że aby plik obrazu WebP działał, użytkownik strony powinien używać przeglądarki zgodnej z WebP. Ponad 95% użytkowników korzysta z przeglądarki internetowej obsługującej WebP. Przeglądarki takie jak Chrome, Firefox, Opera, Microsoft Edge zapewniają pełną obsługę obrazów WebP.

Najnowsze wersje ios i macOS Safari są zgodne z WebP, podczas gdy starsze wersje nie obsługują WebP. Ponadto Internet Explorer nie obsługuje wersji obrazów WebP. Jednak ulgą jest to, że Edge zastąpił IE.

Ponieważ już wiemy, że korzystanie z obrazów WebP przyspiesza naszą stronę, ale ponieważ nie jest ona kompatybilna z mniejszymi wersjami przeglądarek, czy korzystanie z WebP na Twojej stronie będzie dobrą praktyką?

Przyspieszenie witryny nie oznacza, że ​​musisz dostarczać użytkownikom nieobsługiwane treści. Musisz jednak dostarczyć obrazy WebP do przeglądarek, które je obsługują. Jeśli masz kopię obrazów PNG/JPG, możesz dostarczyć ją do nieobsługiwanych przeglądarek. Jest to właściwy sposób obsługi obrazów w wersji WebP.

Jak korzystać z obrazów WebP w WordPressie?

Możesz wybrać jedną z poniższych metod, która pasuje do Twojej witryny, aby dodać obrazy WebP.

CDN

Istnieje wiele sieci CDN dostępnych dla Twojej witryny WordPress, aby obsługiwać zawartość witryny z różnych lokalizacji na całym świecie. Korzystanie z CDN sprawi, że strona internetowa będzie stosunkowo szybsza niż bez jej użycia.

Niektóre z najpopularniejszych sieci CDN to Cloudflare, MaxCDN, KeyCDN i StackPath . Korzystanie z dowolnej z tych sieci CDN umożliwia konwersję plików obrazów do formatu WebP. Udostępnia również te pliki użytkownikom korzystającym z kompatybilnych przeglądarek.

Wtyczka optymalizacji obrazu

Lepszą praktyką jest przesyłanie obrazów w formacie JPG/PNG i konwertowanie ich do WebP za pomocą wtyczek optymalizujących obrazy. Oto lista zalecanych wtyczek, które konwertują pliki graficzne do formatu WebP.

Optimole

Z jego pomocą możesz zastąpić obrazy swojej witryny adresami URL obrazów zoptymalizowanymi przez Optimole. Oprócz konwersji WebP, automatycznie zmienia również rozmiar obrazów zgodnie z ekranem użytkownika.

Bezpłatny plan Optimole obejmuje miesięczny limit 5000 odwiedzających. Ale jeśli to nie wystarczy, możesz kupić plan premium, aby zwiększyć ten limit do 25000.

Po zainstalowaniu i aktywacji wtyczki musisz utworzyć klucz API zgodnie z instrukcjami w ustawieniach wtyczki. Gdy wtyczka zostanie podłączona, zoptymalizuje Twoje obrazy i zacznie udostępniać wersję WebP obrazów do wszystkich obsługiwanych przeglądarek z ich CDN.

Wyobraź sobie

Kiedy utworzysz konto w Imagify, otrzymasz klucz API , który musisz wprowadzić we wtyczce po aktywacji. Jeśli przesyłasz mniej niż 200 zdjęć miesięcznie, Imagify jest rozwiązaniem dla Ciebie. Bezpłatny abonament obejmuje 20 MB lub 200 zdjęć miesięcznie. Jeśli to nie wystarczy, możesz zdecydować się na dostępne plany premium.

Jeśli spojrzysz na ustawienia, możesz utworzyć wersję WebP obrazów i wyświetlić je na stronie. Podczas wyświetlania obrazów możesz użyć tagów obrazu w ustawieniach niż przepisywanie reguł.

Jeśli korzystasz z wtyczki Imagify, możesz również poprawić szybkość swojej witryny za pomocą ustawień Media we wtyczce WP Rocket. Ponieważ WP Rocket i Imagify są tworzone przez WP Media, wtyczki są również kompatybilne.

W ustawieniach WebP Compatibility of WP Rocket możesz włączyć buforowanie WebP , jeśli chcesz, aby te obrazy były wyświetlane z buforowania WP Rocket.

Jeśli zajrzysz do oficjalnego repozytorium WordPressa, możesz uzyskać kilka innych wtyczek do optymalizacji obrazu. Zalecamy jednak użycie jednej z tych dwóch wtyczek wymienionych w tym poście, jeśli potrzebujesz rozwiązania dla obrazów internetowych.

Ręcznie

Możesz użyć CDN, wtyczki lub obu, aby używać obrazów WebP. Jeśli podoba Ci się metoda ręczna, spójrz na poniższy opis:

Przede wszystkim musisz przekonwertować swoje obrazy do formatu WebP przed przesłaniem. W Google można znaleźć różne konwertery online.

Zwróć uwagę, że wtyczka Adobe Photoshop daje Ci uprawnienia do zapisywania plików graficznych w formacie WebP. Po przekonwertowaniu obrazu do formatu WebP możesz je teraz przesłać. Twój pulpit nawigacyjny.

Przed przesłaniem musisz wprowadzić pewne zmiany w edytorze motywów. W pliku functions.php aktywnego motywu dodaj ten kod u dołu:

 //** *Włącz przesyłanie obrazów webp.*/
function enable_webp_mimes($existing_mimes) {
$existing_mimes['webp'] = 'obraz/webp';
zwróć $istniejące_mimy;
}
add_filter('mime_types', 'enable_webp_mimes');

Po dodaniu tego kodu przejdź do Media>Dodaj nowy i dodaj swoje pliki WebP.

Zawijanie

Teraz powinieneś wiedzieć, jak korzystać z obrazów WebP w WordPress. Możesz wypróbować jedną z metod wymienionych w poście. Jeśli są jakieś sugestie lub niejasności dotyczące postu, uprzejmie proszę o kontakt pod adresem [email protected]

powiązane posty

1. Jak zablokować adres IP w WordPressie
2. Jak wyłączyć komentarze w WordPressie
3. Jak dostosować stronę główną w WordPress