Korzystanie z obrazów WebP w WordPress

Opublikowany: 2021-03-30

Jak zapewne już wiesz, jeśli chodzi o strony internetowe, liczy się szybkość! Jedną z najważniejszych rzeczy, które możesz zrobić, aby przyspieszyć swoją witrynę, jest zmniejszenie rozmiaru strony. Im jest mniejszy, tym mniej danych należy pobrać. Im mniej danych, tym szybciej (w granicach rozsądku!) strona prawdopodobnie się załaduje.

Obrazy stanowią znaczną część rozmiaru pliku strony internetowej (czasami znacznie ponad 50% danych strony to obrazy). To sprawia, że obrazy są celem numer jeden, aby przejść na dietę w poszukiwaniu mniejszych stron! Tradycyjnie większość obrazów używanych na stronach internetowych to pliki JPEG lub PNG. Oba są doskonałymi typami plików, które działają dobrze na stronach internetowych. Mogą jednak mieć problem z wielkością. Chociaż używanie narzędzia takiego jak TinyPNG jest zalecane (i może mieć dramatyczny wpływ na rozmiar obrazów dodawanych do witryny), co by było, gdyby istniał format obrazu, który był mniejszy „prosto po wyjęciu z pudełka”. Cóż, jest i nazywa się WebP.

W tym artykule przyjrzymy się bardziej szczegółowo obrazom WebP, aby dowiedzieć się, czym one są i jak można z nich korzystać w witrynie WordPress. Tak więc, jeśli zawsze chciałeś odchudzić swoją stronę, idź na kawę i ciasto (nikt nie powiedział, że musimy przejść na dietę tak samo jak nasza strona!), a potem do dzieła!

Co to są obrazy WebP?

Więc jakie są te obrazy WebP, o których prawdopodobnie słyszałeś, jak ludzie rozmawiają? Cóż, nie ma w tym nic zbyt skomplikowanego ani tajemniczego. Zasadniczo jest to po prostu inny typ pliku. Zamiast obrazów zapisywanych w formacie JPEG lub PNG, są one zapisywane jako WebP. WebP został faktycznie opracowany przez Google. Opisują WebP jako „nowoczesny format obrazu, który zapewnia doskonałą bezstratną i stratną kompresję obrazów w Internecie. Korzystając z WebP, webmasterzy i programiści mogą tworzyć mniejsze, bogatsze obrazy, które przyspieszają działanie sieci”.

Google uwielbia szybką witrynę internetową, więc ma sens, że powinna być liderem w dostarczaniu formatu obrazu, który pomoże witrynom działać szybciej. Pliki WebP mają zazwyczaj od 25% do 34% niż odpowiednik JPEG (według własnego badania Google). Ponieważ obrazy mogą stanowić większość danych na stronie internetowej, jest to znaczna oszczędność.

I nie martw się, że stracisz jakość swoich obrazów – całym celem WebP jest możliwość zapisywania obrazów w formacie, który obie zachowują wysoką jakość z perspektywy wizualnej, a jednocześnie są zapisywane w małym format pliku. Wygrana.

Tak więc, jeśli obrazy WebP mają niewielki rozmiar, a jednocześnie zapewniają użytkownikom wspaniałe wrażenia wizualne, możesz się zastanawiać, dlaczego nie są one powszechnie używane. Jest kilka kluczowych powodów takiego stanu rzeczy.

Użyteczność: Obecnie obrazy WebP nie są obsługiwane przez większość programów do projektowania graficznego, takich jak Photoshop czy Illustrator. Każdy, kto pracuje w tych programach, będzie przyzwyczajony do otwierania plików graficznych (wszystkich opisów, JPEG, GIF, PNG itp.) i po prostu „rozpoczyna” edycję zgodnie z wymaganiami. Ponadto, jeśli chodzi o zapisywanie tych plików, zazwyczaj możesz eksportować do dowolnego z popularnych formatów graficznych. Z WebP nie jest to możliwe od razu po wyjęciu z pudełka. Zamiast tego prawdopodobnie będziesz musiał pobrać wtyczkę z WebPShop, aby korzystać ze swojego „normalnego” oprogramowania do edycji obrazów. Dopóki obrazy WebP nie staną się tak wszechobecne jak JPEG i inne formaty, zawsze będzie niechęć do „nadmiernego komplikowania” rzeczy, a wielu projektantów stron internetowych będzie nadal używać bardziej tradycyjnych formatów obrazów.
Kompatybilność z przeglądarką : WebP NIE jest powszechnie obsługiwany przez wszystkie przeglądarki. Oznacza to, że chociaż większość użytkowników korzystających z aktualnych przeglądarek, takich jak Chrome lub Mozilla, nie będzie miała problemu z przeglądaniem tych obrazów, nadal będziesz mieć znaczną mniejszość, która nie będzie mogła wyświetlić zapisanych obrazów witryny jako WebP, który w szczególności obejmuje Safari, które zapewnia tylko częściowe wsparcie w zależności od używanej wersji (w momencie pisania). Będziesz potrzebować obejścia (które omówimy poniżej), aby zapewnić, że wszyscy odwiedzający będą mogli zobaczyć Twoją witrynę zgodnie z Twoimi zamierzeniami.

Zatem pytanie musi brzmieć „czy powinienem używać WebP?”. Cóż, z pewnością wygląda na to, że ludzie zaczynają zwracać większą uwagę na niewiarygodnie innowacyjny format plików. A jeśli szybkość naprawdę ma dla Ciebie znaczenie i masz zasoby, aby stworzyć stronę internetową za pomocą obrazów WebP, to dlaczego miałbyś tego nie robić? Podobnie jak w przypadku wszystkich nowych technologii, czasami może być powolny wyjazd z bramki startowej, ale lepiej jest wyprzedzić zakręt niż ścigać się, aby dogonić konkurencję! Mając to na uwadze, przyjrzyjmy się, jak wykorzystalibyśmy obrazy WebP w witrynie WordPress.

Jak korzystać z obrazów WebP z WordPress

Każdy, kto od razu zanurkował i próbował przesłać pliki WebP na swoją witrynę WordPress przed lipcem 2021 r., byłby trochę rozczarowany. Prawdopodobnie można by oczekiwać, że wszystkie obrazy WebP przesłane za pośrednictwem Media Center zostaną zapisane w normalny sposób. Zamiast tego mogłeś zobaczyć taki ekran:

Na szczęście od wydania WordPress 5.8 możesz teraz przesyłać obrazy WebP bezpośrednio do WordPressa, co sprawia, że ten wspaniały format obrazu jest równie łatwy w użyciu, jak formaty JPEG, PNG i GIF. Takie stałe ulepszenia są jednym z powodów, dla których warto zaktualizować rdzeń WordPressa do najnowszej wersji. Oczywiście, jeśli korzystasz z zarządzanego hosta WordPress, takiego jak Pressidium, zajmiemy się tym za Ciebie, zapewniając, że zawsze korzystasz z najnowszej i najlepszej wersji WordPressa.

Przed wydaniem WordPress 5.8 jednym z najłatwiejszych sposobów korzystania z obrazów WebP było zainstalowanie wtyczki, która konwertowała obsługiwane formaty obrazów (np. PNG) na pliki WebP, a następnie wyświetlała je w witrynie. Istnieją pewne zastrzeżenia dotyczące korzystania z obrazów WebP (wymieniamy je powyżej), a użycie odpowiedniej wtyczki, takiej jak Shortpixel, może wyeliminować te wady, więc nadal może być rozwiązaniem wartym rozważenia. Czytaj dalej, aby dowiedzieć się więcej!

Krótki piksel

Shortpixel to niesamowita wtyczka i taka, o której warto pomyśleć, niezależnie od tego, czy zdecydujesz się używać obrazów WebP. Shortpixel to ugruntowana usługa optymalizacji obrazu. Obsługuje wszystkie przesyłane obrazy za pośrednictwem doskonałej usługi kompresji obrazu, często kompresując rozmiar obrazu o 50% lub więcej bez utraty jakości obrazu. Robi to automatycznie, co oznacza, że nie musisz myśleć o kompresowaniu obrazów przed przesłaniem ich do witryny.

Aby naprawdę w pełni wykorzystać Shortpixel, musisz zapłacić za ich plan. Pobierają opłatę na podstawie „obrazów zoptymalizowanych miesięcznie”, przy czym 5000 obrazów miesięcznie kosztuje zaledwie 3,99 USD miesięcznie. W przypadku wielu witryn ten plan będzie więcej niż wystarczający, a biorąc pod uwagę korzyści w zakresie wydajności związane ze zoptymalizowaną witryną, jest tani w cenie.

Shortpixel optymalizuje szeroką gamę formatów graficznych, w tym JPEG i PNG. Być może zastanawiasz się, w jaki sposób pomaga mi to dodawać obrazy WebP do mojej witryny WordPress?

Jeśli pamiętasz, nie wszystkie przeglądarki internetowe obsługują format WebP z tylko częściową obsługą WebP w Safari, w zależności od używanej wersji (w momencie pisania tego tekstu) i brakiem wsparcia oferowanego przez Internet Explorer. Po prostu nie jest opłacalna opcja tworzenia strony internetowej, która nie obsługuje tych odwiedzających, nawet jeśli użytkownicy przestarzałej lub nieobsługiwanej przeglądarki mogą stanowić mniejszość.

Możesz również pamiętać, że wiele programów do edycji obrazów nie obsługuje plików WebP od razu po wyjęciu z pudełka. Tak więc toczymy bitwę na dwóch frontach… nie tylko musimy przeskoczyć w pierwszej kolejności, aby tworzyć lub pracować z plikami WebP, ale także musimy znaleźć sposób na a) dodanie ich do naszej witryny WordPress ib) tworzenie obrazu awaryjnego dla tych, którzy odwiedzają naszą witrynę za pomocą przeglądarki niezgodnej z WebP.

Shortpixel na ratunek

Shortpixel ma schludne podejście do korzystania z obrazów WebP w witrynach WordPress. Zaznaczając jedno pole wyboru w ich wtyczce, możesz nakazać mu tworzenie wersji WebP dowolnych przesłanych obrazów. Następnie możesz powiedzieć wtyczce Shortpixel, aby wyświetlała te obrazy WebP w przeglądarkach obsługujących WebP.

Jeśli przeglądarka odwiedzających witrynę nie może wyświetlić obrazów WebP, automatycznie zostanie wyświetlony alternatywny format obrazu. Daje to wszystko, co najlepsze ze wszystkich światów… szybkość, jaką zapewnia strona internetowa wykorzystująca obrazy o niewielkich rozmiarach dzięki WebP dla przeglądarek, które sobie z nimi poradzą, lub dobrze zoptymalizowana alternatywa dla tych, którzy nie mogą.

WebP jest obecnie szeroko stosowanym formatem obrazu. Niezależnie od tego, czy zdecydujesz się skorzystać z natywnej funkcji przesyłania teraz dostępnej w WordPressie, czy też wygenerować je za pomocą wtyczki, takiej jak ShortPixel, warto rozważyć zmianę obrazów witryny na warianty WebP, aby witryna mogła skorzystać ze zmniejszonego rozmiaru pliku, który powinien, z kolei przekładają się na szybsze ładowanie strony internetowej.