Jak działają obrazy WebP w WordPress

Już niejednokrotnie wspominaliśmy, że szybkość ładowania naszej strony internetowej jest kluczowym czynnikiem, jeśli chodzi o dobre pozycjonowanie jej w wyszukiwarkach. I chociaż może nie będziesz musiał zdobywać szczytu w Google Speed, wszelkie wysiłki związane z optymalizacją obrazu są szczególnie istotne dla poprawy SEO.

Społeczność WordPressa doskonale zdaje sobie z tego sprawę i z tego powodu w najnowszej wersji 5.8 dodała funkcjonalność obsługi formatu obrazu WebP.

Czym są obrazy WebP

WebP to format obrazu opracowany przez Google w 2010 roku jako alternatywa dla formatów takich jak PNG i JPG, tworzący znacznie mniejsze rozmiary plików przy zachowaniu podobnych jakości obrazu. W przeciwieństwie do innych formatów, WebP obsługuje kompresję stratną i bezstratną, a także przezroczystość i animację.

Nawet przy tych funkcjach WebP zawsze oferuje mniejsze rozmiary plików niż jego alternatywy. W badaniu porównawczym Google dotyczącym tych formatów obrazów, stratne obrazy WebP okazały się średnio o 30% mniejsze niż JPG i 25% mniejsze niż PNG.

Ponadto Google PageSpeed ​​Insights, który ocenia poziom optymalizacji Twojej witryny, zaleca korzystanie z nowoczesnych formatów graficznych jako jednej z możliwości poprawy szybkości ładowania witryny.

Jednym z pytań, które możesz mieć przy rozważaniu, czy powinieneś mieć wszystkie obrazy w WebP, jest obecna obsługa różnych przeglądarek. Ostatnią rzeczą, jakiej byś chciał, jest to, aby Twoi czytelnicy nie mogli poprawnie zobaczyć obrazów.

A rzeczywistość jest taka, że ​​wsparcie w każdym z nich rośnie. Obecnie mówimy już o 95% poparciach.

Jak konwertować obrazy do WebP

Aby przesłać obraz WebP do biblioteki, oczywiście pierwszą rzeczą, którą musimy mieć, jest wspomniany obraz w danym formacie. Jeśli pobierzesz obraz z banku obrazów, na pewno pobierzesz go w formacie JPEG lub PNG. Twoim pierwszym zadaniem będzie więc przekonwertowanie obrazu do tego formatu. Jakie mamy alternatywy?

Narzędzia do projektowania obrazów

Niektóre narzędzia do projektowania obrazów, takie jak między innymi Sketch, Adobe Photoshop lub Cloudinary, zawierają opcję zapisania dowolnego obrazu w formacie WebP. To tak proste, jak otwarcie obrazu, który chcesz przekonwertować, a następnie zapisanie go w nowym formacie.

Ale jeśli tak nie jest, nie martw się, ponieważ masz darmowe alternatywy, jak zobaczymy poniżej.

Oficjalne narzędzie Google

Inną opcją jest pobranie cwebp , narzędzia dla systemów Linux, Widow lub Mac do konwersji dowolnego obrazu PNG lub JPG do WebP. Po pobraniu i zainstalowaniu możesz bezpośrednio wykonać instrukcję konwersji dowolnego obrazu na swoim komputerze. Na przykład możesz przekonwertować plik obrazu PNG na obraz WebP o zakresie jakości 80 za pomocą polecenia:

cwebp -q 80 image.png -o image.webp

Jeśli potrzebujesz konwertować wiele obrazów jednocześnie, w tym artykule wyjaśniono instrukcje w środowisku uniksowym (takim jak macOS lub Ubuntu), dzięki czemu możesz przekonwertować duży zestaw obrazów.

W tym samym artykule opisują również alternatywę programowania konwersji za pomocą Node.js za pomocą narzędzia imagin-webp.

Konwertery online

Inną alternatywą, jeśli nie chcesz pisać ani jednej linii kodu, jest użycie konwertera obrazów online. Googling z łatwością wyświetla długą listę konwerterów, w tym:

• Strona internetowa Ezgif
• Konwersja w chmurze
• Konwersja
• Konwersja online
• FreeConvert

We wszystkich wystarczy przesłać obraz, wykonać konwersję i pobrać przekonwertowany plik.

Wtyczki WordPress

Wreszcie, jak wyjaśnię poniżej, zobaczysz, że istnieją również wtyczki, które konwertują obrazy do formatu WebP po przesłaniu ich do witryny WordPress.

Jak przesłać obraz WebP do biblioteki mediów?

Gdy już otrzymamy obraz w tym formacie, powinieneś być w stanie jak zwykle przesłać go do swojej biblioteki multimediów WordPress, ale…

Ups, to nie działa! Przynajmniej nie dla mnie. Możesz napotkać ten sam problem w zależności od dostawcy usług hostingowych, z którego obecnie korzystasz.

WordPress ma wbudowane ograniczenia dotyczące typów plików MIME, które możesz przesyłać do swojej witryny ze względów bezpieczeństwa. MIME oznacza uniwersalne rozszerzenia poczty internetowej. Typy MIME są używane przez przeglądarki i inne urządzenia internetowe w celu określenia rodzaju treści powiązanej ze stroną. Na przykład, jeśli masz na stronie plik .png i .jpeg, przeglądarka będzie wiedziała na podstawie ich typów MIME (nie rozszerzenia pliku), że powinna traktować oba pliki jako obrazy, a nie filmy lub inne typy plików.

Domyślnie WordPress przechowuje listę zarejestrowanych typów MIME w wp-includes/functions.php . Jednak nie wszystkie rozpoznane typy MIME można przesłać.

A jeśli spróbujesz przesłać plik z rozszerzeniem spoza tej predefiniowanej listy, tak jak w przypadku WebP, zobaczysz powyższy komunikat o błędzie.

W dokumentacji Twojej firmy hostingowej znajdziesz kilka alternatyw, aby zmodyfikować sposób przesyłania tego nowego typu MIME. Zwykle odbywa się to za pomocą wtyczki, za pomocą której można dodać dodatkowe typy plików lub bezpośrednio zmodyfikować plik, lub użyć własnej wtyczki z następującym kodem:

 function nelio_custom_upload_mimes( $existing_mimes ) { $existing_mimes['webm'] = 'image/webm'; return $existing_mimes; } add_filter( 'mime_types', 'nelio_custom_upload_mimes' );

Ewentualnie zmodyfikuj plik wp-config.php , dodając następujący wiersz kodu:

 define( 'ALLOW_UNFILTERED_UPLOADS', true );

Po dokonaniu niezbędnych modyfikacji powinieneś być w stanie przesłać swój obraz. Następna próba…

Cóż, wydaje się, że to też nie będzie możliwe…

W tym przypadku, jak omówiono na forum WordPressa, dla niektórych rozwiązaniem było upewnienie się, że biblioteka imagick została zainstalowana i ponowne uruchomienie serwera. W przypadku innych (tak jak w moim przypadku) jedynym sposobem na załadowanie obrazu było użycie linku przeglądarki do przesyłania , który znajduje się na dole panelu ładowania obrazów.

I voila , mam załadowany obraz z WebP!

Wtyczki WordPress do konwersji obrazów do WebP

Mówiłem już o oszczędności miejsca i obciążenia wynikającego z posiadania obrazów w tym formacie WebP. A problem pojawia się, gdy myślimy o tym, jak przekonwertować wszystkie obrazy, które już wrzuciliśmy na nasz serwer. Dobrą wiadomością, jak w większości przypadków w WordPressie, jest to, że mamy kilka wtyczek, które mogą wykonać tę pracę.

I nie tylko to, niektóre z nich, przed przesłaniem dowolnego obrazu do Twojej biblioteki, mogą wymusić konwersję obrazu do WebP, bez konieczności martwienia się o to. Niektóre z najbardziej znanych to:

• Optymalizator obrazu EWWW
• WebP Express
• Krótkie piksele
• Wyobraź sobie
• Optimole
• Konwerter WebPC dla mediów

Na koniec chciałbym zauważyć, że główne firmy hostingowe WordPress są bardzo świadome znaczenia zoptymalizowanych obrazów w Twojej witrynie. Z tego powodu niektóre z nich oferują już własne wtyczki wbudowane w ich serwery, które są odpowiedzialne za automatyczne generowanie obrazów, które przesyłasz do biblioteki do WebP, dzięki czemu są one zawsze obsługiwane przez przeglądarki, które je obsługują. Tak jest na przykład w przypadku wtyczki Siteground's SG Optimizer.

Wniosek

WebP jest szybki, wydajny i nabiera rozpędu. Z pewnością jesteśmy bliżej, niż myślimy, jego masowej adopcji w WordPressie i przeglądarkach. Cieszymy się, że WordPress nie pozostaje w tyle i że wszyscy możemy zoptymalizować SEO naszych stron internetowych, obsługując format obrazu WebP.

Polecany obraz mariny na Unsplash .