WebP i WordPress = lepszy czas ładowania i wydajność?

Stefan Römershäuser Ostatnia aktualizacja 21.10.2020
8 Min.
webp wordpress
Ostatnia aktualizacja 21.10.2020

Wielu użytkowników WordPress interesuje się formatem obrazu WebP, ponieważ łączy on w sobie zalety JPG i PNG. Jednocześnie jednak nie zastępuje on dwóch popularnych formatów obrazu. Jednak dla użytkowników WordPress , którzy używają wielu obrazów, WebP powinien być szczególnie przydatny. W tym artykule wyjaśniamy dlaczego.

W dzisiejszym świecie coraz ważniejsze jest, aby doświadczenia użytkowników odwiedzających Twoją stronę internetową były jak najbardziej przyjemne i łatwe. Ludzie są wzrokowcami i często szybciej i lepiej przyswajają informacje, które widzą. Ten szybki rzut oka na billboard, przewijanie strony głównej, zanim autobus przyjedzie za pięć minut. Wszyscy znamy takie sytuacje. 

Ponieważ obrazy stanowią zazwyczaj ponad połowę przestrzeni dyskowej strony, jest tu spory potencjał optymalizacyjny.

Teraz kilka dodatkowych faktów o WebP zanim przejdziemy do tematów.

  • WebP wspiera format wideo VP8, który jest odpowiedni np. dla małych animowanych obrazków, jakie znamy z GIF-ów.
  • Maksymalny rozmiar obrazu dla WebP to 16,383 x 16,383 pikseli.
  • Możesz również zwiększać lub zmniejszać skalę obrazu WebP, podobnie jak w przypadku plików SVG, ale wiele z nich nie pozwala na to ze względów bezpieczeństwa.

W dzisiejszym artykule poruszamy następujące tematy:

  1. Różnice w porównaniu do JPG i PNG

- Porównanie rozmiarów plików
- Kolor Przestrzeń/Głębokość
- Wsparcie/Support

  1. Jakie wymagania muszę spełnić, aby móc korzystać z WebP w WordPress ?
  2. Jak wstawić obrazy WebP do WordPress ?

- Użyj strony Plugin
- Dodaj coś w .htaccess swojego serwera
- Plik function.php twojej strony WordPress -Themes dodaj coś.

  1. Mój wniosek na temat WebP

Różnice w porównaniu do PNG i JPG

WebP i PNG

Obraz WebP jest do około 25-30% mniejszy niż PNG, bez utraty jakości. Tła nadal mogą być przezroczyste. Różni się to tylko między samym obrazem, głębią obrazu, szczegółami, przestrzenią kolorów itp. Ze względu na mały rozmiar pliku, format WebP ma wyraźną przewagę pod względem wydajności.

png vs webp

Na podstawie tych dwóch obrazów można stwierdzić, że obraz WebP jest o 30,1 procent mniejszy od wersji PNG. Wybrałem tutaj metodę bezstratną i celowo ustawiłem suwak jakości na 80 procent. Pozostałe 20 ze 100 procent prawie nigdy nie jest widoczne, więc 80 procent jest całkowicie wystarczające dla aplikacji online. 

Wady formatu PNG

PNG nie są odpowiednie dla fotografów, ponieważ tworzą znacznie większy plik obrazu. Format PNG jest najczęściej używany do zrzutów ekranu, ponieważ komputery zapisują obrazy jako PNG. Dlaczego? - Ponieważ zrzuty ekranu są często mieszanką obrazu i tekstu. 

PNG jest używany na przykład do obrazów, które wymagają przezroczystego tła. Dzięki temu format ten jest bardzo uniwersalny i popularny w projektach graficznych, gdzie często spotyka się wiele elementów.

PNG jest dostępny w formatach PNG-8 i PNG-24. PNG-8 wykorzystuje 8-bitową głębię kolorów i maksymalnie 256 kolorów. PNG-24 wykorzystuje 24-bitową głębię kolorów z maksymalnie 16,7 mln kolorów. Dzięki temu PNG-24 jest porównywalny z formatem JPEG. Kontynuujmy więc z formatem JPG:

Format obrazu JPG

W bezpośrednim porównaniu z JPG, obraz WebP jest o około 25 do 35% mniejszy - pomimo tej samej jakości obrazu. Nie ma tu nic do powiedzenia pomiędzy dwoma kandydatami JPG i WebP - WebP jest po prostu lepszym wyborem.

jpg vs webp

Na podstawie tych dwóch obrazów możemy stwierdzić, że obraz WebP jest o 24,7% mniejszy od wersji JPG. Dla wersji JPG ustawiłem jakość na "Wysoką".

Format JPG jest odpowiedni, jeśli możesz pogodzić się z utratą jakości, a ostrość i szczegóły nie są ważne. Format ten jest często używany dla obrazów bogatych w kolory, ponieważ kompozycja JPG pozwala na przedstawienie wielu kolorów i gradacji.  

Mała podpowiedź:

To, jak ostatecznie wyglądają obrazy, zależy od wielu czynników: na przykład od rozdzielczości ekranu (HD, QHD, UHD/4K, 8K itd.), ustawień ekranu, takich jak sRGB, adobeRGB, odpowiedniego trybu wyświetlania monitorów, a także od urządzenia, za pomocą którego oglądasz obrazy. Ostatnio sam miałem problem z tym, że moje zdjęcia wyglądały inaczej na moim ekranie i na stronie. 

Moja rada: Obecnie wszystkie przeglądarki działają w trybie sRGB. Jeśli więc tworzysz coś na potrzeby sieci w Photoshopie, ustaw swój monitor na sRGB. Wtedy możesz bezpośrednio zobaczyć, jak wygląda, gdy ląduje na Twojej stronie. 🙂

Przestrzeń kolorów/głębokość

Tutaj sprawa się trochę komplikuje. WebP jest oparty na algorytmie stratnej kompresji wideo VP8 z kompresją do 24 bitów i maksymalnym rozmiarem 16 383 x 16 383 pikseli. Więc zawsze ma głębię kolorów 24 bity, tak jak JPG. Głębia kolorów PNG waha się od 8 do 48 bitów, choć ta ostatnia opcja nie ma większego sensu ze względu na duży rozmiar pliku,

Jako strumień bitów VP8, bezstratne generowanie obrazów WebP działa tylko z 8-bitowym formatem obrazu - znanym również jako format obrazu YUV420.

Format YUV420 w podziale: Najpierw przyjrzyjmy się, w jaki sposób monitor domyślnie wyświetla obraz: Każdy kolor może być reprezentowany przez trzy kolory (znane jako model RGB), tj. czerwony, zielony i niebieski.

Każdy kolor z osobna - tzn. czerwony, zielony i niebieski - może być zapisany na komputerze w 1 bajcie (8 bitów). Tak więc JEDEN piksel w monitorze ma 3 bajty (każdy bajt zawiera informacje o odpowiednim kolorze czerwonym, zielonym i niebieskim).

Oko ludzkie jest bardzo wrażliwe, jeśli chodzi o jasność, ale mniej wrażliwe na kolory i ich gradację. Tak więc termin YUV składa się z Y = luminancja (jasność) i U i V oznacza chrominancję (kolor). YUV jest zatem jak RGB, z którym kolor jest reprezentowany.

Ale po co nam to w ogóle jest potrzebne?

Ponieważ rozmiar pliku jest tutaj ważny. W modelu RGB, musimy użyć 3 bajtów (24 bity), aby zapisać jeden kolor. Natomiast w przypadku YUV rozmiar jest zmniejszony o połowę ze względu na sposób, w jaki jest obliczany, a następnie przechowywany. Jest to skomplikowane, ale myślę, że w tym momencie informacje są wystarczające i zapewniają pewną jasność.

Wsparcie/Support

Statystyki pokazują, która przeglądarka jest najczęściej używana przez dane "urządzenie końcowe", takie jak komputer, tablet czy smartfon. Ponieważ WebP nie jest obsługiwany przez wszystkie przeglądarki, powinieneś mieć to na uwadze.

Oczywiście można zauważyć, że "urządzenia mobilne" są bardziej w centrum uwagi, co również wyjaśnia, dlaczego lepsze wsparcie dla WebP jest przewidziane dla smartfonów. Dlatego przyjrzyj się swoim statystykom użytkowników i sprawdź, z jakiej przeglądarki i urządzenia otrzymujesz najwięcej odwiedzin.

Poniższa lista pokazuje, które wersje przeglądarek i na jakich urządzeniach mogą już korzystać z WebP.

Bieżące wsparcie dla przeglądarek desktopowych

- Firefox od wersji 65.x
- Opera od wersji 39.x
- Chrome od wersji 23.x
- Edge od wersji 17.x
- Internet Explorer od wersji 11.x

Aktualne wsparcie dla urządzeń mobilnych

- Android Browser od wersji 5.6 (Chromium 67)
- Android Chrome od wersji 73.x
- Opera Mini wszystkie wersje
- Opera Mobile od wersji 12.x
- Android Firefox od wersji 66.x
- Internet Explorer Mobile od wersji 11.x

WebP VP8 (obrazy animowane)

- Google Chrome (Desktop i Android) od wersji 32.x
- Microsoft Edge od wersji 18.x
- Firefox od wersji 65.x
- Opera od wersji 19.x

Nie udało mi się znaleźć wsparcia WebP dla innych przeglądarek i urządzeń w tym momencie.

Jakie są wymagania dla WebP w WordPress ?

Jak na razie nic, ale... Niestety, zła wiadomość jest taka, że WordPress nie obsługuje obecnie obrazów WebP samodzielnie. Dlatego teraz przechodzimy do następnego punktu.

Sposoby włączenia WebP do WordPress :

  1. Korzystanie z witryny Plugin

Można na przykład użyć programów Plugins ShortPixel (wersja bezpłatna), Optimus (wersja płatna) lub EWW Image Optimizer (wersja bezpłatna). 

Optimus:

Optimus WebP

Niestety, WebP jest obsługiwane tylko przez płatną wersję Optimusa. Przy okazji, ponieważ RAIDBOXES ma już zintegrowane buforowanie po stronie serwera, nie potrzebujesz "Cache Enabler" Plugin, jak zaleca Optimus.

ShortPixel:

Shortpixel WebP

W ShortPixel możesz zaznaczyć pole, jak widać powyżej. Ale przed tym, zresetowałbym wszystkie obrazy, które masz do oryginału, a następnie zoptymalizował je wszystkie na raz za pomocą Plugin . W tym samym czasie powinieneś również zobaczyć, że masz różne typy plików swoich obrazów.

EWWW Image Optimizer:

Eww Optymalizator obrazu WebP
  1. Dokonaj poprawek w .htaccess strony WordPress

Niektóre hosty celowo zablokowały możliwość zmiany czegokolwiek w pliku .htaccess ze względów bezpieczeństwa. Jeśli korzystasz z hostingu na serwerze Apache, możesz dokonać następujących zmian:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp
[T=image/webp,E=accept:1]

</IfModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

A na Nginx:

# http config block
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}
# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;

Nawiasem mówiąc, ta reguła przepisywania jest już domyślnie obsługiwana na stronie RAIDBOXES . 

Gdzie mogę ją znaleźć?

Plik ten znajduje się na serwerze internetowym, na którym zainstalowano WordPress . Katalog główny jest głównym katalogiem, w którym domena znajduje się na hostingu. Jeśli nie możesz go zobaczyć, musisz ustawić maskę zdalnego pliku na -la, aby zobaczyć ukryte pliki. Oczywiście zakłada to, że masz prawa dostępu lub nawet sam hostujesz i używasz programu FTP jak FileZilla.

Jest jeszcze trzecia - nieco skomplikowana - możliwość dodania czegoś w pliku function.php Twojej strony WordPress -Themes , tak abyś domyślnie mógł wgrywać obrazki w formacie WebP. Jak to działa, można przeczytać na przykład. w tym artykule artykuł.

Wnioski

Niestety, WebP nie jest jeszcze tak powszechny jak JPG i PNG, ale z pewnością będzie zyskiwał na znaczeniu w przyszłości. W końcu WebP może poprawić wydajność Twojej strony, a tym samym komfort użytkowania i zadowolenie odwiedzających ją użytkowników.

Plugin Tak | Nie?

Istnieje bardzo dobry Plugins, który wykonuje za Ciebie pracę związaną z obsługą WebP, a także optymalizuje Twoje obrazy. Osobiście używałem do tego celu Plugin Optimus. W przeciwnym razie, na pewno warto rozważyć włączenie go do strony jako kodu, zwłaszcza, że zaoszczędziłbyś sobie jeszcze jednego Plugin . Ale wniosek jest taki, że dobrze jest użyć do tego celu Plugin .

Dla kogo WebP jest w ogóle odpowiedni?

WebP jest w zasadzie użyteczny dla każdej strony. Oczywiście format ten jest szczególnie odpowiedni dla stron z dużą ilością obrazów. Na przykład dla fotografów, którzy chcą zachować jak najwyższą jakość zdjęć, ale jednocześnie przywiązują dużą wagę do szybkiego czasu ładowania. Ale również inni użytkownicy WordPress , tacy jak twórcy czy ci, którzy mają coś do pokazania w formie obrazkowej, powinni zrobić wszystko, co w ich mocy, aby doświadczenia użytkowników z ich potencjalnymi klientami i fanami były jak najprzyjemniejsze.

Mam nadzieję, że podobał Ci się ten artykuł i czekam na Twoją opinię! 

Stefan jest początkującym blogerem na swojej stronie aspiring-artist.com Prowadzi blogi o sztuce, realizuje WordPress strony dla innych aspirujących artystów, jest konsultantem. Ponieważ artyści potrzebują również indywidualnej strony internetowej oraz znaczącego logo i marki. - Aspire to Greatness

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola obowiązkowe oznaczone są *.