WebP a WordPress = lepší doba nabíjení a výkon?

Stefan Römershäuser Naposledy aktualizováno 21.10.2020
8 min.
webp wordpress
Naposledy aktualizováno 21.10.2020

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

V tomto dni a věku je stále důležitější, aby uživatelský zážitek návštěvníků vašich webových stránek byl co nejpříjemnější a nejjednodušší. Lidé jsou vizuální a často mohou absorbovat informace, které vidí rychleji a lépe. Rychlý pohled na billboard, procházení domovské stránky před příjezdem autobusu za pět minut. Všichni tyhle situace známe. 

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 dostaneme k tématům.

  • WebP podporuje formát videa VP8, který je .B pro malé animované obrázky, jak ho známe z GIF.
  • Maximální velikost obrazu pro WebP je 16 383 x 16 383 pixelů.
  • Bitovou kopii WebP můžete také škálovat nahoru nebo dolů, podobně jako soubory SVG, ale mnoho z nich ji z bezpečnostních důvodů nepovoluje.

V tomto článku jsou dnes uvedena následující témata:

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

- Porovnávané velikosti souborů
- Barevný prostor/hloubka
- Podpora/podpora

  1. Jaké požadavky potřebuji pro WebP v aplikaci WordPress ?
  2. Jak vkládám obrázky WebP do WordPress ?

- A Plugin Použít
- Přidejte něco do .htaccess vašeho serveru
- .php složka. WordPress - Themes Doplňovat. 

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

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

WebP a PNG

Image WebP je až o 25-30 procent menší než PNG, bez ztráty kvality. Pozadí však může být stále průhledné. 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, pokud jde o výkon.

png vs webp

Oba obrázky ukazují, že bitová kopie WebP je o 30,1 procenta menší než verze PNG. Zvolil jsem zde bezvýsahovou metodu a záměrně nastavil regulátor kvality na 80 procent. Zbývajících 20 ze 100 procent téměř nikdy neuvidíte, takže 80 procent je zcela dostačující pro online aplikace. 

Nevýhody formátu PNG

PNG nejsou vhodné pro fotografy, protože vytvářejí mnohem větší obrazový soubor. 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č? - Protože screenshoty jsou často kombinací obrázku a textu. 

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

PNG je k dispozici ve formátech PNG-8 a PNG-24. PNG-8 používá barevnou hloubku 8bitovou 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. Pojďme se však s formátem JPG posunout dál:

Formát obrázku JPG

V přímém srovnání s JPG je obraz WebP asi o 25 až 35% menší - navzdory konstantní kvalitě obrazu. Mezi oběma kandidáty JPG a WebP není co říci – WebP je prostě lepší volba.

jpg vs webp

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

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

Malá poznámka:

Způsob, jakým vám obraz nakonec vypadá, 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í, pomocí kterého si prohlíževáte obrázky. Nedávno jsem měl problém s tím, že moje obrázky vypadaly na obrazovce a webu jinak. 

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

Barevný prostor/hloubka

Je to tu trochu komplikované. WebP je založen na ztrátové kompresi 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ů, z toho druhá nedává příliš smysl kvůli velké velikosti souboru,

Jako bitový proud VP8 funguje bezpáteřinné vytváření obrazů WebP pouze s 8bitovým obrazovým formátem – také známým jako formát obrazu YUV420.

Formát YUV420 bublá: Podívejme se nejprve na to, jak monitor ve výchozím nastavení zobrazuje obraz: každá barva může být reprezentována třemi barvami (tzv. model RGB), tj. červená, zelená a modrá.

Každá barva jednotlivě – červená, zelená a modrá – může být zaznamenána v 1 bajtu (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 střední 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 k uložení barvy použít 3 bajty (24 bitů). U YUV se na druhou stranu velikost sníží na polovinu kvůli způsobu, jakým se vypočítává a poté ukládá. Je to složité, ale myslím si, že v tuto chvíli jsou informace dostatečné a poskytují určitou jasnost.

Podpora/podpora

Statistiky ukazují, který prohlížeč je nejvíce používán kterým "koncovým zařízením", 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 zaměřena, což také vysvětluje, proč je pro smartphone poskytována lepší podpora WebP. Proto nezapomeňte zkontrolovat své uživatelské statistiky a zjistit, ze kterého prohlížeče a zařízení dostanete nejvíce návštěvníků.

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

Aktuální podpora stolních prohlížečů

- Firefox od verze 65.x
– Opera od verze 39.x
- Chrome z verze 23.x
- Edge z 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ší (Chromium 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 Mobile 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 se mi neshledá podpora WebP pro jiné prohlížeče a zařízení.

Jaké jsou předpoklady pro WebP v WordPress ? 

Zatím žádné, ale... Špatná zpráva je, že WordPress v současné době nepodporuje obrázky WebP sám o sobě. Proto nyní přistoupíme k dalšímu bodu.

Způsoby použití webp 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

WebP je bohužel 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 zaškrtnutí můžete umístit, jak je vidět výše. Ale předtím bych resetoval všechny obrázky, které máte, na originál a pak najednou s Plugin Optimalizovat. Pak byste měli také vidět, že máte různé typy souborů z obrázků.

Optimalizátor obrazu EWWW:

WebP pro optimalizaci obrázků Ewww
  1. Úpravy v .htaccess 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í úpravu:

<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 Nginxu:

# 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;

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

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 ve webovém hostiteli. Pokud je nevidíte, budete muset nastavit "vzdálenou masku souboru" na -la, abyste viděli skryté soubory. To samozřejmě předpokládá, že máte přístupová práva nebo se dokonce hostujete a používáte FTP program, jako je FileZilla. 

Existuje třetí - a poněkud komplikovaný - způsob, jak vytvořit něco ve vašem .php souboru 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

WebP bohužel ještě není stejný jako JPG a PNG, ale v budoucnu bude jistě stále důležitější. WebP také 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?

Jsou tu velmi dobré Plugins , který vám vezme práci během podpory WebP a optimalizuje vaše obrázky. Osobně mám Plugin Optimus. V opačném případě by určitě stálo za to zvážit jeho zahrnutí na stránku jako kód, zejména proto, že jste Plugin by ušetřilo více. Ale sečteno a podtrženo, jste Plugin v této věci dobře poučen.

Pro koho je WebP vhodný?

WebP je v podstatě užitečný pro každou stránku. Formát je samozřejmě vhodný zejména pro webové stránky s mnoha obrázky. Například pro fotografy, kteří chtějí udržet kvalitu obrazu co nejvyšší, ale stále přikládají velký význam rychlé době načítání. Ale také 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 byl uživatelský zážitek jejich potenciálních zákazníků a fanoušků co nejpříjemnější.

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

Stefan je začínající blogger se svými webovými aspiring-artist.com. Bloguje o umění, realizoval 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čku. Aspirovat 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 *.