WebP a WordPress = zlepšená doba nabíjení a výkon?

Stefan Römershäuser Naposledy aktualizováno 21.
8 min.
webp WordPress
Naposledy aktualizováno 21.

Mnoho WordPress -Uživatelé mají zájem o Image Format WebP, protože kombinuje výhody JPG a PNG. Současně však nenahrazuje dva běžné formáty obrázků. Pro WordPress uživatelé, kteří používají mnoho obrázků, by však měly být zvláště užitečné pro WebP. Vysvětlujeme, proč tomu tak je v tomto článku.

V dnešní době je stále důležitější, aby se uživatelská zkušenost návštěvníků vašich webových stránek co nejpříjemnější a nejjednodušejší. Lidé jsou vizuální a mohou často absorbovat informace, které vidí rychleji a lépe. Rychlý pohled na billboard, procházení domovskou stránku před autobusem dorazí za pět minut. Všichni známe tyto situace. 

Vzhledem k tomu, že obrázky obvykle představují více než polovinu úložného prostoru webových stránek, existuje velký potenciál pro optimalizaci.

Nyní několik faktů o WebP, než se podíváme na témata.

  • WebP podporuje video formát VP8, který je vhodný pro malé animované obrázky, jak ho známe z GIF.
  • Maximální velikost obrazu pro WebP je 16 383 x 16 383 pixelů.
  • Můžete také vertikálně navýšit nebo snížit velikost obrázku WebP, podobně jako soubory SVG, ale mnoho z nich ji z bezpečnostních důvodů nepovoluje.

Následující témata jsou popsána v tomto článku dnes:

  1. Rozdíly ve srovnání s JPG a PNG

- Velikosti souborů ve srovnání
- Barevný prostor / hloubka
- Podpora / Podpora

  1. Jaké požadavky potřebuji pro WebP WordPress ?
  2. Jak vložím obrázky WebP do WordPress ?

- A Plugin Použít
- Přidat něco v serveru .htaccess
- Function.php soubor vaše WordPress - Themes Doplňovat. 

  1. Můj závěr na WebP

Rozdíly ve srovnání s PNG a JPG 

WebP a PNG

WebP obraz je až o 25-30 procent menší než PNG, bez ztráty kvality. Pozadí však může být stále transparentní. To se liší pouze mezi samotným obrazem, hloubkou obrazu, detaily, barevným prostorem atd. Vzhledem k malé velikosti souboru přináší formát WebP jasnou výhodu z hlediska výkonu.

png vs webp

Dva obrázky ukazují, že obraz WebP je o 30,1 procenta menší než verze PNG. Zvolil jsem zde bezztrátovou metodu a záměrně nastavil regulátor kvality na 80 procent. Zbývajících 20 ze 100 procent téměř nikdy nemůže být viděno, takže 80 procent je zcela dostačující pro online aplikace. 

Nevýhody formátu PNG

PnGs nejsou vhodné pro fotografy, protože vytvářejí mnohem větší soubor obrazu. Formát PNG se většinou používá pro snímky obrazovky, protože počítače ukládají obrázky jako PNG. Proč? - Vzhledem k tomu, screenshoty jsou často kombinací obrazu a textu. 

Například PNG se používá pro obrazy, které vyžadují průhledné pozadí. Díky tomu je formát velmi různorodý a populární v grafickém designu, protože mnoho prvků se tam často setkává.

PNG je k dispozici ve formátech PNG-8 a PNG-24. PNG-8 používá barevnou hloubku 8 bitů a maximálně 256 barev. PNG-24 používá 24bitovou barevnou hloubku s až 16,7 miliony barev. Png-24 je tedy podobný formátu JPEG. Takže pojďme dál s formátem JPG:

Formát obrázku JPG

V přímém srovnání s JPG je obraz WebP o 25 až 35% menší - navzdory konstantní kvalitě obrazu. Není co říct mezi dvěma kandidáty JPG a WebP - WebP je prostě lepší volbou.

jpg vs webp

Na základě dvou obrázků lze říci, že obraz WebP je o 24,7% menší než verze JPG. Ve verzi JPG jsem nastavil kvalitu na "High".

Formát JPG je vhodný, pokud můžete žít s kvalitními ztrátami a nezáleží na ostrosti a detailu. Formát se často používá pro barevné obrázky, protože složení JPG umožňuje reprezentovat mnoho barev a gradací.  

Malá poznámka:

Jak se obrázky nakonec podívat na vás závisí na mnoha faktorech: například rozlišení obrazovky (HD, QHD, UHD / 4K, 8K, atd.), nastavení obrazovky, jako je sRGB, adobeRGB, režim zobrazení monitorů, a zařízení, se kterým si prohlédnout obrázky. Nedávno jsem měl problém, že moje obrázky vypadaly jinak na mé obrazovce a webové stránky. 

Můj tip: V současné době jsou všechny prohlížeče v režimu sRGB. Takže pokud vytváříte něco pro web ve Photoshopu, například nastavte monitor na sRGB. Pak uvidíte, jak to vypadá, když přistane na vaší straně. 🙂 

Barevný prostor/hloubka

Tady je to trochu komplikované. WebP je založen na ztrátovém kompresním algoritmu videa VP8 s kompresí až 24 bitů a maximální velikostí 16 383 x 16 383 pixelů. Takže má vždy barevnou hloubku 24 bitů, stejně jako JPG. Barevná hloubka PNG se pohybuje od 8 do 48 bitů, přičemž druhá má malý smysl kvůli velké velikosti souboru, 

Jako bitstream VP8 funguje bezeztrátové vytváření obrazů WebP pouze s 8bitovým formátem obrazu - také známým jako formát obrazu YUV420.

Formát YUV420 je bublající nahoru: Podívejme se na první pohled na to, jak monitor zobrazuje obraz ve výchozím nastavení: každá barva může být reprezentována třemi barvami (takzvaný rgb model), tj. červená, zelená a modrá.

Každou barvu lze zaznamenat v 1 bajt (8 bitů) na PC. Jeden pixel na monitoru má 3 bajty (každý bajt má informace o červené, zelené a modré barvě)

Lidské oko je velmi citlivé, pokud jde o jas, ale méně citlivé na barvy a jejich gradace. Například termín YUV se skládá z Y = jas (jas) a vy a V znamená chrominance (barva). Takže YUV je jako RGB, který zobrazuje barvu.

Ale proč to vůbec potřebujeme?

Protože velikost souboru je důležitá. V modelu RGB musíme použít 3 bajty (24 bitů) k uložení barvy. S YUV, na druhé straně, velikost je snížena na polovinu vzhledem ke způsobu, jakým je vypočtena a pak uložena. Je to složité, ale domnívám se, že v tomto okamžiku jsou informace dostatečné a poskytují určitou jasnost.

Podpora/podpora

Statistiky ukazují, který prohlížeč je nejvíce používán, které "koncové zařízení", jako je PC, tablet nebo smartphone. Vzhledem k tomu, že WebP není podporován všemi prohlížeči, měli byste to mít na paměti.

Samozřejmě můžete vidět, že "mobilní zařízení" jsou více v centru pozornosti, což také vysvětluje, proč je pro smartphone poskytována lepší podpora pro WebP. Proto nezapomeňte zkontrolovat své uživatelské statistiky a zjistit, ze kterého prohlížeče a zařízení získáte nejvíce návštěvníků.

Následující seznam ukazuje, které verze prohlížeče již využívají WebP, na kterých koncových zařízeních. 

Aktuální podpora pro stolní prohlížeče

- Firefox od verze 65.x
– Opera z verze 39.x
- Chrome od verze 23.x
- Edge od verze 17.x
- Internet Explorer verze 11.x nebo novější

Aktuální podpora mobilních zařízení

– Prohlížeč Android 5.6 nebo novější (Chrom 67)
- Android Chrome od verze 73.x
- Opera Mini všechny verze
- Opera Mobile od verze 12.x
- Android Firefox od verze 66.x
- Internet Explorer Mobilní verze 11.x nebo

WebP VP8 (animované obrázky)

– Google Chrome (Desktop a Android) verze 32.x
- Microsoft Edge verze 18.x nebo novější
- Firefox od verze 65.x
– Opera od verze 19.x

V tuto chvíli jsem nemohl najít podporu WebP pro jiné prohlížeče a zařízení.

Jaké jsou předpoklady pro WebP v WordPress ? 

Zatím žádný, ale... Špatnou zprávou bohužel je, že WordPress v současné době nepodporuje webové obrázky samostatně. Proto nyní pokračujeme k dalšímu bodu.

Způsoby použití webpu v aplikaci WordPress zahrnout:

  1. A Plugin Použít

Za tímto účelem například Plugins ShortPixel (Bezplatná verze), Optimus (placená verze) nebo EWWW Image Optimizer (bezplatná verze). 

Optimus:

Optimus WebP

Bohužel, WebP je podporován pouze placenou verzí Optimus. Tam RAIDBOXES již integrované ukládání do mezipaměti na straně serveru, nepotřebujete "Cache Enabler" Plugin , jak doporučuje Optimus.

ShortPixel:

Shortpixel WebP

In ShortPixel můžete zaškrtnout, jak je vidět výše. Ale před tím bych reset ovat všechny obrázky, které máte na původní a pak najednou s Plugin Optimalizovat. Pak byste měli také vidět ve stejnou dobu, že máte různé typy souborů z obrázků.

EWWW Optimalizace obrazu:

Ewww Nástroj pro optimalizaci obrazu WebP
  1. Úpravy v přístupu .ht WordPress Vytvořit

Někteří hostitelé mají možnost změnit něco v souboru .htaccess, záměrně blokované z bezpečnostních důvodů. Pokud hostujete na serveru Apache, můžete provést následující úpravy:


    Přepsatmodul zapnuto
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    Přepsatpravidlo (wp-content/------------------------------------------ (jpe?g|png)
[T=image/webp,E=accept:1]



    Záhlaví připojit Vary Přijmout env=REDIRECT_accept

AddType image/webp .webp

A na Nginx:

http konfigurační blok
map $http_accept $webp_ext {
výchozí "";
"A*webp" ".webp";
}
blok konfigurace serveru
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Přijmout;
try_files $uri $uri-webp_ext =404;

Na RAIDBOXES toto pravidlo přepisu je již podporováno společností. 

Kde je najdu?

Soubor lze nalézt na webovém serveru, na kterém WordPress Nainstalován. Kořenový adresář je hlavní adresář, kde je doména umístěna na web hoster. Pokud je nevidíte, budete muset nastavit "vzdálenou masku souboru" na -la, abyste mohli vidět i skryté soubory. Samozřejmě, to předpokládá, že máte přístupová práva, nebo dokonce hostit sami sebe a používat FTP program, jako je FileZilla. 

Tam je třetí - a poněkud složité - způsob, jak něco udělat ve vašem souboru function.php WordPress - Themes tak, že můžete nahrávat obrázky ve formátu WebP z domova. Jak to funguje, můžete například v tomto článku .

Závěr

Bohužel, WebP ještě není stejný jako JPG a PNG, ale to bude jistě stále důležitější v budoucnu. Konečně, WebP zlepšuje výkon vašich stránek a tím i uživatelskou zkušenost a spokojenost návštěvníků vašich webových stránek.

Plugin Ano | Ne?

Tam jsou velmi dobré Plugins , který vám vezme práci během podpory WebP a optimalizuje vaše obrázky. Osobně jsem Plugin Optimus. V opačném případě by určitě stálo za zvážení, včetně na stránce jako kód, zejména proto, že jste pak Plugin by ušetřit více. Ale pointa je, že jste Plugin v této věci dobře poučeni.

Pro koho je WebP vhodný?

WebP je v podstatě užitečné pro každou stránku. Samozřejmě, že formát je vhodný zejména pro webové stránky s mnoha obrázky. Například pro fotografy, kteří chtějí, aby jejich kvalita obrazu byla co nejvyšší, ale stále přikládají velký význam rychlé době načítání. Ale i další WordPress -Uživatelé, jako jsou kreativci nebo ti, kteří mají co ukázat ve vizuální podobě, by měli udělat vše, co je v jejich silách, aby uživatelsky přívětivý zážitek svých potenciálních zákazníků a fanoušků byl co nejpříjemnější.

Doufám, že se vám líbil článek a těším se na váš názor! 

Stefan je nadějný blogger s jeho webové stránky aspiring-artist.com. On blogy o umění, si uvědomil, WordPress stránky pro další začínající umělce a je poradní skupinou. Umělci také potřebují individuální webové stránky a smysluplné logo a značky. Aspiruji na velikost

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena * .