Mnoho uživatelů WordPress se zajímá o formát obrázků WebP, protože kombinuje výhody JPG a PNG. Zároveň však nenahrazuje dva běžné obrazové formáty. Pro uživatele WordPress, kteří používají mnoho obrázků, by měl být WebP obzvláště užitečný. Proč tomu tak je, vysvětlíme v tomto článku.

V dnešní době je stále důležitější, aby uživatelská zkušenost vaší cílové skupiny byla 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 tyto 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ů.
• Můžete také zvětšit nebo zmenšit obrázek WebP, podobně jako soubory SVG, které mnoho z bezpečnostních důvodů neumožňuje.

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

WebP a PNG

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

Na základě těchto dvou obrázků lze říci, že obrázek WebP je o 30,1 procenta menší než verze PNG. Zvolil jsem zde bezeztrátovou metodu a záměrně nastavil regulátor kvality na 80 procent. Zbývajících 20 ze 100 procent lze téměř nikdy rozpoznat, takže 80 procent je zcela dostačujících 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 snímky obrazovky jsou často kombinací obrázku a textu. 

PNG se používá například pro obrázky, 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 8 bitů a maximálně 256 barev. PNG 24 používá 24bitovou barevnou hloubku s až 16,7 miliony barev. PNG 24 je tedy srovnatelný s formátem JPEG. Pokračujme tedy ve formátu JPG:

Formát obrázku JPG

V přímém srovnání s JPG je obrázek WebP o 25 až 35% menší - navzdory konzistentní kvalitě obrazu. Mezi těmito dvěma kandidáty JPG a WebP není co říci - WebP je prostě lepší volbou.

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

Formát JPG je vhodný, pokud můžete žít se ztrátami kvality a nezávisí na ostrosti a detailech. Formát se často používá pro barevné obrázky, protože kompozice JPG umožňuje zobrazit mnoho barev a gradací.  

Malá poznámka: Jak obrázky nakonec vypadají, závisí na mnoha faktorech: například rozlišení obrazovky (HD, QHD, UHD / 4K, 8K atd.), Nastavení obrazovky, jako je sRGB, Adobe RGB, příslušný režim zobrazení vašich monitorů a zařízení, se kterým si snímky prohlížíte. V posledních několika dnech jsem sám měl problém, že moje obrázky vypadaly jinak na mé obrazovce a na webových stránkách. 

Barevný prostor/hloubka

To je místo, kde se to trochu komplikuje. WebP je založen na ztrátovém algoritmu komprese 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á z nich nedává smysl kvůli velké velikosti souboru,

Jako VP8 Bitstream funguje bezeztrátová generace obrázků WebP pouze s 8bitovým obrazovým formátem - také známým jako obrazový formát YUV420.

Formát YUV420 se rozpadl: Podívejme se nejprve na to, jak monitor zobrazuje obraz ve výchozím nastavení: Každá barva může být reprezentována třemi barvami (tzv. Model RGB), tj. Červenou, zelenou a modrou.

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ů). S YUV, na druhé straně, velikost je snížena na polovinu kvůli způsobu, jakým je vypočtena a poté uložena. Je to komplikované, ale myslím si, že v tomto okamžiku jsou informace dostatečné a přinášejí 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ě je 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 se nezapomeňte podívat na statistiky uživatelů 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čů již využívají WebP na kterých zařízeních.

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

• Firefox z verze 65.xOpera z verze 39.xChrome z verze 23.xEdge z verze 17.xInternet Explorer z verze 11.x

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

• Prohlížeč Android od verze 5.6 (Chromium 67)Android Chrome od verze 73.xOpera Mini všechny verzeOpera Mobile od verze 12.xAndroid Firefox od verze 66.xInternet Explorer Mobile od verze 11.x

WebP VP8 (animované obrázky)

• Google Chrome (Desktop a Android) z verze 32.xMicrosoft Edge z verze 18.xFirefox z verze 65.xOpera z verze 19.x

Podpora WebP pro další prohlížeče a zařízení, které jsem v tuto chvíli nemohl najít.

Požadavky na WebP ve WordPressu

Zatím žádné, ale... Bohužel špatnou zprávou je, že WordPress v současné době nepodporuje obrázky WebP sám o sobě. Proto se nyní dostává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:

WebP je bohužel podporován pouze placenou verzí Optimusu. Tam Raidboxes již integroval ukládání do mezipaměti na straně serveru, nepotřebujete plugin "Cache Enabler", jak doporučuje Optimus.

ShortPixel :

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:

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;

U Raidboxes Mimochodem, toto pravidlo přepisu je již ve výchozím nastavení podporováno.

Kde je najdu?

Soubor lze nalézt na webovém serveru, kde byl nainstalován WordPress. Kořenový adresář je kořenový adresář, ve kterém je doména umístěna s webovým hostitelem. Pokud je nevidíte, musíte nastavit "masku vzdáleného souboru" na -la, abyste mohli vidět i skryté soubory. To samozřejmě vyžaduje, abyste měli přístupová práva nebo se dokonce hostovali a používali program FTP, jako je FileZilla.

Existuje třetí - a poněkud komplikovaný - způsob, jak přidat něco do funkce.php souboru vašeho tématu WordPress, abyste mohli ve výchozím nastavení nahrávat obrázky ve formátu WebP. Jak to funguje, si můžete přečíst v tomto článku.

Pro koho je WebP vhodný?

WebP má v zásadě smysl 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 přesto přikládají velký význam rychlé době načítání. Ale ostatní uživatelé WordPress, jako jsou kreativci nebo ti, kteří mají co ukázat ve vizuální podobě, by měli také udělat vše pro to, aby uživatelská zkušenost jejich potenciálních zákazníků a fanoušků byla co nejpříjemnější.

Závěr o WebP a WordPress

WebP bohužel ještě není samozřejmostí jako JPG a PNG, ale v budoucnu bude určitě stále důležitější. Koneckonců, WebP může zlepšit výkon vašeho webu a tím i uživatelskou zkušenost a spokojenost vaší cílové skupiny.

Plugin: Ano nebo ne?

Existují vynikající pluginy, které vás zbaví vaší práce na podpoře webP a také optimalizují vaše obrázky. Osobně jsem k tomu použil plugin Optimus. V opačném případě by určitě stálo za to zvážit jeho zahrnutí do stránky jako kódu, zejména proto, že byste si pak ušetřili plugin více. Ale pointa je, že jste dobře informováni s pluginem pro tuto záležitost.

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