Jak wyświetlać obrazy WebP zamiast JPG lub PNG za pomocą WordPress

Google znajduje się na szczycie internetowego łańcucha pokarmowego. Firma wpływa (lub dyktuje) wiele tego, co dzieje się w Internecie. A ich nowy format obrazu, WebP, kontynuuje ten trend. Ponieważ szybkość ładowania strony jest coraz ważniejsza (głównie ze względu na Google Page Rank), programiści i projektanci uważają kompresję obrazu za najłatwiejszy sposób na skrócenie czasu ładowania. Obrazy Google WebP są o około 30% mniejsze niż typowe obrazy JPG lub PNG i zachowują równoważną jakość. A co najlepsze, nie musisz się martwić ręczną konwersją obrazów do WebP.

W tym artykule pokażemy, jak korzystać z tego nowego formatu obrazu w WordPress, mimo że nie jest on jeszcze domyślnie obsługiwany.

Weźmy się za to.

Subskrybuj nasz kanał YouTube

Używanie Optimole do obsługi WebP na WordPress

WebP jako format obrazu nie jest domyślnie obsługiwany w WordPress. Możesz przesłać obraz .webp, ale podobnie jak plik SVG, otrzymasz komunikaty o błędach. I znowu, podobnie jak w przypadku korzystania z plików SVG z WordPress, istnieje łatwe obejście za pomocą wtyczki, aby Twoja witryna WP mogła się powiększać.

Z usług WebP, które wypróbowaliśmy, naszym ulubionym jest Optimole. Mieliśmy największe szczęście, że działało przy minimalnym podkręceniu, więc chcemy przeprowadzić Cię przez proces konfiguracji i jak najbardziej bezboleśnie zapewnić zgodność instalacji WordPress z WebP.

Po pierwsze, oczywiście będziesz chciał pobrać i zainstalować samą wtyczkę. Znajduje się w repozytorium WP.org i jest całkowicie darmowy. Podobnie jak usługa oparta na interfejsie API, która go zasila (do pewnego momentu). Chociaż możliwe jest przekonwertowanie tradycyjnych obrazów do WebP w locie za pomocą PHP, nie każdy hosting daje Twojemu serwerowi takie uprawnienia. Jeśli masz takie uprawnienia, możesz również zajrzeć do wtyczki WebP Express . Masz dzięki temu dużo kontroli, ale jest to taki, który wymaga więcej ulepszeń, aby działał płynnie.

Po zainstalowaniu i aktywacji Optimole w witrynie WordPress, znajdziesz nową opcję menu w Media – Optimole .

Twój klucz API Optimole

Aby uzyskać dostęp do jakichkolwiek ustawień lub konfiguracji, musisz mieć konto Optimole. Jeśli masz już skonfigurowany, możesz kliknąć przycisk Mam już klucz API . Jeśli nie, zarejestruj się i wyślij e-mailem klucz API . Podstawowe konto dla klucza API jest bezpłatne, a na tym poziomie uzyskujesz około 5000 wizyt. Jeśli potrzebujesz więcej, dostępne są poziomy cenowe.

Optimole definiuje wizytę jako „ każdy, kto raz odwiedził Twoją witrynę [. . .] Każdy użytkownik jest liczony tylko raz. Nie ma znaczenia, co robią w Twojej witrynie, ile obrazów pobierają lub ile odwiedzają stron; to tylko jeden użytkownik. Jeśli opuści Twoją witrynę i wróci tego samego dnia, nadal będzie tylko jednym użytkownikiem. ”

Po wyczerpaniu zmierzonych wizyt tylko obrazy WebP przestają być wyświetlane. Twoje obrazy same w sobie nie. Klucz API znajdziesz w swoim panelu Optimole na samej górze.

Po prostu wklej go z powrotem do pulpitu WordPress, a będziesz gotowy do obsługi obrazów WebP za pomocą WordPress.

Twoje pulpity nawigacyjne Optimole WordPress

W swoim panelu WordPress otrzymasz podstawowe informacje na temat optymalizacji WebP. Pozwala to na rozwiązywanie problemów i ocenę skuteczności przyspieszenia. W ten sposób możesz wejść i dostosować różne ustawienia.

Najpierw widzisz konto podłączone do API, a na dole ekranu wtyczka wyświetla ostatnio zoptymalizowane obrazy. Możesz zobaczyć, o ile mniejsze są wyświetlane obrazy WebP od oryginalnych, które przesłałeś do WordPressa.

Na samej górze znajduje się zakładka Możliwe problemy . Nikt nie lubi widzieć podświetlonej zakładki, ale wszyscy musimy również zobaczyć, jakie konflikty mogą się pojawić.

Główny problem, z którym się zmierzyliśmy, dotyczy innych wtyczek do kompresji i dostarczania obrazów. Jak widać na powyższym obrazku, wtyczka Jetpack działa podobnie do Optimole za pośrednictwem Photon APIT, więc mogą uderzać głowami. Dla nas objawiło się to brakiem dostarczenia obrazu do gościa. Nie mieliśmy żadnych problemów z innymi usługami kompresji, takimi jak TinyPNG czy Smush.

Korzystanie z pulpitów nawigacyjnych

Jeśli potrzebujesz bardziej szczegółowych informacji o tym, jak Twoja witryna radzi sobie z WebP, zewnętrzny pulpit Optimole ma te informacje dla Ciebie.

Zamiast po prostu 9,5 raza mniejszego, możesz zobaczyć rzeczywiste rozmiary plików, które zostały dostarczone. A także, które same się zgłaszają w ciągu 30 dni.

Możesz także ustawić znaki wodne na pulpicie nawigacyjnym Optimole (lub WP), aby gdy ktoś otrzyma WebP z Twojej witryny WordPress, automatycznie wyświetli Twoje logo. To prosty proces, w którym masz kontrolę nad przezroczystością, lokalizacją i tak dalej.

Zasadniczo możesz zrobić to samo z obu pulpitów nawigacyjnych. Albo na karcie Ustawienia w WordPressie, albo odwiedzając zewnętrzny panel w Optimole. Zależy to całkowicie od tego, z czym czujesz się najbardziej komfortowo, a także od tego, jakiego poziomu danych potrzebujesz w danym momencie.

Dodatkowo będziesz mógł kontrolować poziom kompresji, leniwe ładowanie oraz kiedy/jeśli niektóre obrazy są udostępniane jako WebP na podstawie nazw plików. Wszystko to znajdziesz w zakładce Ustawienia w Media – Optimole .

Zawijanie

Najlepsze w korzystaniu z WebP z witrynami WordPress jest to, że nie musisz ręcznie pracować z plikami. Bez dodatkowych przesyłań, bez dodatkowego czasu kompresji, nic. Ze względu na sposób działania interfejsów API wszystkie obliczenia i procesy są uruchamiane w locie w czasie rzeczywistym. Google naprawdę sprawił, że Internet działa szybciej, używając WebP zamiast JPG lub PNG. Największą zaletą jest jednak to, że obrazy zachowują tę samą jakość, nawet przy znacznie zmniejszonych rozmiarach. Ze strony Google może być samolubne, aby użyć ich formatu do przyspieszenia witryny, aby mogli uzyskać wyższą pozycję w rankingu, a także lepsze wrażenia użytkownika końcowego. I to się w końcu liczy.

Co myślisz o udostępnianiu obrazów WebP odwiedzającym Twoją witrynę?

Artykuł wyróżniony obrazem autorstwa vladwel / shutterstock.com