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

Stefan Römershäuser Ostatnia aktualizacja w dniu 21.10.2020 r.
8 Min.
webp WordPress
Ostatnia aktualizacja w dniu 21.10.2020 r.

Wiele WordPress -Użytkownicy są zainteresowani 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. Dla WordPress -Jednak użytkownicy, którzy korzystają z wielu obrazów, powinni uznać WebP za szczególnie użyteczny. Dlaczego tak jest, wyjaśniamy to w tym artykule.

W dzisiejszym świecie coraz ważniejsze jest, aby uczynić obsługę odwiedzających Twoją stronę jak najprzyjemniejszą i jak najprostszą. Ludzie są wzrokowi i często potrafią szybciej i lepiej wchłaniać informacje, które widzą. Szybkie spojrzenie na tablicę reklamową, przewijanie strony głównej przed przyjazdem autobusu w ciągu pięciu minut. Wszyscy znamy te sytuacje. 

Ponieważ obrazy zazwyczaj stanowią ponad połowę powierzchni magazynowej strony internetowej, istnieje duży potencjał do optymalizacji.

Teraz jeszcze kilka faktów na temat WebP zanim przejdziemy do tematów.

  • WebP obsługuje format wideo VP8, który jest odpowiedni dla małych animowanych obrazów, na przykład, jak wiemy to z GIF-ów.
  • Maksymalny rozmiar obrazu dla WebP to 16,383 x 16,383 pikseli.
  • Można również skalować obraz WebP w górę lub w dół, podobnie jak pliki SVG, ale wiele z nich nie pozwala na to ze względów bezpieczeństwa.

W tym artykule poruszono dziś następujące tematy:

  1. Różnice w stosunku do JPG i PNG

- Porównanie wielkości plików
- Przestrzeń barwna/głębokość
- Wsparcie/pomoc

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

- PluginZastosowanie na
- Dodaj coś do .htaccess swojego serwera
- Function.php twojego WordPress themes pełnego. 

  1. Mój wniosek dotyczący WebP

Różnice w stosunku do PNG i JPG 

WebP i PNG

Obraz WebP jest do około 25-30 procent mniejszy niż PNG bez żadnej utraty jakości. Tło może być jeszcze przezroczyste. Różni się to tylko między samym obrazem, głębią obrazu, szczegółami, przestrzenią kolorów itp. Ze względu na niewielki 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 mniejszy od wersji PNG, na poziomie 30,1 procent. Wybrałem tu metodę bezstratną i celowo ustawiłem suwak jakości na 80 procent. Pozostałe 20 z 100 procent prawie nigdy nie jest widoczne, więc 80 procent wystarcza na aplikacje internetowe. 

Wady formatu PNG

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

PNG jest używany na przykład dla obrazów, które wymagają przezroczystego tła. Sprawia to, że format ten jest bardzo uniwersalny i popularny w projektowaniu graficznym, ponieważ wiele elementów często się tam łączy.

PNG jest dostępny w formatach PNG-8 i PNG-24 i wykorzystuje 8-bitową głębię koloru oraz maksymalnie 256 kolorów. PNG-24 wykorzystuje 24-bitową głębię kolorów o wartości do 16,7 mln kolorów. PNG-24 jest zatem porównywalny z formatem JPEG. Więc kontynuujmy 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 nic do powiedzenia między JPG a WebP - WebP jest po prostu lepszym wyborem.

jpg vs webp

Na podstawie tych dwóch obrazów można stwierdzić, że obraz WebP jest mniejszy od wersji JPG z 24,7%. Dla wersji JPG ustawiam jakość na "wysoką".

Format JPG jest idealny, jeśli można żyć ze stratami jakości i jeśli ostrość i szczegóły nie są ważne. Format ten jest często używany do kolorowych zdjęć, ponieważ skład JPG pozwala na wyświetlanie wielu kolorów i gradacji.  

Mała wskazówka:

Ostateczny wygląd obrazów 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, trybu wyświetlania na monitorach i urządzenia używanego do wyświetlania obrazów. Ostatnio sama miałam problem z tym, że moje zdjęcia wyglądały inaczej na ekranie i na stronie internetowej. 

Chyba tak: Obecnie wszystkie przeglądarki znajdują się w trybie sRGB. Więc jeśli tworzysz coś dla sieci w Photoshopie, na przykład, ustaw swój monitor na sRGB. Następnie można bezpośrednio zobaczyć, jak to wygląda, gdy wyląduje na Twojej stronie. 🙂 

Przestrzeń barwna/głębokość

Tu się to trochę komplikuje. WebP opiera się na algorytmie stratnej kompresji wideo VP8 o kompresji do 24 bitów i maksymalnej wielkości 16,383 x 16,383 pikseli Więc zawsze ma 24-bitową głębię koloru, tak jak JPG. Głębia kolorów PNG waha się od 8 do 48 bitów, choć ten ostatni nie ma większego sensu ze względu na duży rozmiar pliku, 

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

Format YUV420 jest nierozwinięty: Przyjrzyjmy się najpierw temu, jak monitor domyślnie wyświetla obraz: Każdy kolor może być reprezentowany przez trzy kolory (tzw. model RGB), tj. czerwony, zielony i niebieski.

Każdy kolor indywidualnie - tzn. czerwony, zielony i niebieski - może być zapisany na komputerze w 1 bajcie (8 bitów). Piksel w monitorze ma zatem 3 bajty (każdy bajt ma informację 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 stopniowanie. Tak więc oznaczenie YUV składa się z Y = luminancja (jasność) oraz U i V średnia chrominancja (kolor). YUV jest więc jak RGB, który jest używany do reprezentacji koloru.

Ale po co nam to i tak?

Ponieważ rozmiar pliku jest ważny. W modelu RGB musimy użyć 3 bajtów (24 bity) do przechowywania jednego koloru. Z YUV, z drugiej strony, rozmiar jest zmniejszony o połowę ze względu na sposób, w jaki jest obliczany, a następnie przechowywany. Jest to skomplikowane, ale uważam, że w tym momencie informacje są wystarczające i przynoszą pewną jasność.

Wsparcie/pomoc

Statystyki pokazują, która przeglądarka jest najczęściej używana przez które "urządzenie końcowe", takie jak PC, tablet czy smartfon. Ponieważ WebP nie jest obsługiwany przez wszystkie przeglądarki, należy o tym pamiętać.

Oczywiście jest oczywiste, że "urządzenia mobilne" są bardziej skoncentrowane, co również wyjaśnia, dlaczego lepsze wsparcie dla WebP jest zapewnione dla smartfonu. Upewnij się więc, że sprawdzasz statystyki użytkowników i widzisz, z której przeglądarki i urządzenia trafia najwięcej odwiedzających.

Poniższa lista pokazuje, które wersje przeglądarek korzystają już z WebP na których urządzeniach końcowych. 

Aktualne wsparcie dla przeglądarki internetowej Desktop Browser

- Firefox od wersji 65.x
- Opera od wersji 39.x
- Chrom od wersji 23.x
- Krawędź od wersji 17.x
- Internet Explorer od wersji 11.x

Aktualna obsługa urządzeń mobilnych

- Przeglądarka Android 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

W tej chwili nie mogłem znaleźć wsparcia WebP dla innych przeglądarek i urządzeń.

Jakie wymagania musi spełniać WebPWordPress ?

Na razie żadnych, ale... Zła wiadomość jest taka, że WordPress obecnie nie ma niezależnego wsparcia dla obrazów WebP. Dlatego przejdziemy teraz do następnego punktu.

Możliwości integracji WebP zWordPress :

  1. PluginZastosowanie na

Odpowiednie do tego celu są Plugins(wersja bezpłatnaShortPixel), Optimus (wersja płatna) lub Image Optimizer EWWW (wersja bezpłatna). 

Optimus:

Optimus WebP

Niestety WebP jest obsługiwany tylko przez płatną wersję Optimusa. Ponieważ buforowanie po stronie serwera jest RAIDBOXES już zintegrowane, nie jest potrzebny "Cache Enabler"Plugin, jak zaleca Optimus.

ShortPixel:

Krótki Pixel WebP

ShortPixelMożesz zaznaczyć to pole, jak pokazano powyżej. Ale wcześniej zresetowałbym wszystkie zdjęcia do oryginału, a następnie Pluginzoptymalizowałbym je wszystkie na raz. W tym samym czasie powinieneś też zobaczyć, że masz różne typy plików z twoimi zdjęciami.

Optymalizator obrazu EWWW:

Ewww Image Optimizer WebP
  1. WordPress Wprowadzić korekty w .htaccessie

Niektórzy hosterzy mają możliwość zmiany czegoś w pliku .htaccess, celowo zablokowanego ze względów bezpieczeństwa. Jeśli hostujesz na serwerze Apache, możesz dokonać następujących zmian:


    Ponowne uruchomienie silnika
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp
[T=obraz/strona, E=akceptacja:1]



    Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

I na nginksie:

# blok konfiguracyjny http
map $http_accept $webp_ext {
domyślnie "";
"~*webp" ".webp"
}
# blok konfiguracyjny serwera
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;

Przy RAIDBOXES okazji, ta zasada przepisywania jest już przez nas wspierana. 

Gdzie mogę ją znaleźć?

Plik można znaleźć na serwerze internetowym, na którym został WordPress instalowany. Katalog główny jest głównym katalogiem, w którym domena znajduje się na hoście internetowym. Jeśli nie możesz go zobaczyć, musisz ustawić "zdalną maskę plików" na la, tak aby można było zobaczyć ukryte pliki. Oczywiście wymaga to posiadania praw dostępu lub nawet samodzielnego hostowania i korzystania z programu FTP, takiego jak FileZilla. 

Istnieje trzeci - i nieco skomplikowany - sposób, aby dodać coś do swojego WordPress plikuThemes function.php, tak aby można było przesłać zdjęcia w formacie WebP domyślnie. Jak to działa, można dowiedzieć się na przykład w tym artykule Czytaj dalej.

Wnioski

Niestety WebP nie jest jeszcze tak powszechne jak JPG i PNG, ale na pewno stanie się ważniejsze w przyszłości. Przecież WebP może poprawić wydajność Twojej strony, a tym samym komfort użytkowania i zadowolenie odwiedzających Twoją stronę.

Plugin Tak |nie?

Są bardzo dobrePlugins, które wyciągają pracę z Twojego wsparcia WebP i optymalizują Twoje zdjęcia. Osobiście umówiłem się na to Plugin Optimus złapał. W przeciwnym razie, z pewnością warto byłoby rozważyć włączenie go do strony jako kodu, zwłaszcza, że wtedy można by użyć Plugin zaoszczędziłby więcej. Ale główny wniosek jest taki. Plugin dla tej sprawy.

Dla kogo w każdym razie nadaje się WebP?

W zasadzie, WebP ma sens dla każdej strony. Format ten jest szczególnie odpowiedni dla stron internetowych z wieloma obrazami. Na przykład, dla fotografów, którzy chcą zachować jak najwyższą jakość obrazu, ale jednocześnie przywiązują dużą wagę do szybkiego ładowania. Ale także inni WordPress - użytkownicy, tacy jak ludzie kreatywni lub ci, którzy mają coś do pokazania w formie obrazkowej, powinni zrobić wszystko, aby jak najbardziej uprzyjemnić doświadczenie swoich potencjalnych klientów i fanów.

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

Artykuły pokrewne

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola oznaczone są * Zaznaczone.