Seznamte se s podporou WebP pro WordPress. Co přinese vašemu feedu?

Vydání třetí verze Mergado Packu je velkým milníkem pro nástroj i jeho uživatele. Za pozornost stojí i další tip z dílny páčku a potěší hlavně e-shopárov, kteří využívají WordPress s WooCommerce. Objevte s námi podporu WebP - datově úspornou alternativu ke klasickým formátem obrázků.

Co je WebP  

WebP je formát bitmapových obrázků, který představil Google v roce 2010. Aktuálně je podporován většinou prohlížečů (kromě zastaralého a obvykle málo používaného Internet Exploreru).

Podívejte se na aktuální podporu tohoto formátu napříč prohlížeči.

S čím vším vám pomůže?

  • možnost výrazného snížení datového objemu ve srovnání s JPEG i PNG
  • alfa průhlednost, kterou dosud nabízel jen formát PNG
  • podpora animací, kterou poskytuje pouze GIF

Všeobecné studie od Googlu uvádějí, že WebP je menší u bezztrátový obrázků typu PNG o 26% a u ztrátových obrázků typu JPG o 25-34 %.

Vyzkoušeli jsme výhody WebP v praxi

Nalevo je původní fotka PNG bez pozadí (480 kB) optimalizovaná pomocí funkce tinypng.com (128,3 kB). Napravo je původní fotka (480 kB) převedena do formátu WebP bez pozadí (30,2 kB). Poznáte rozdíl?

  Fotka PNG (128,3 kB)                          Fotka WebP (30,2 kB)

 

WordPress 5.8 a podpora WebP

WordPress podporuje formát obrázků WebP od posledního releasu 5. 8. Obrázek stačí jednoduše nahrát standardním způsobem do knihovny médií. WP také avizuje, že v budoucnu přidá funkci automatické konverze nahraných obrázků s WebP jako výchozí výstupní formát. V současné době však WP neumožňuje konverzi existujících obrázků na WebP.

V případě, že spravujete své weby ve WP MultiSite režimu, obrázky WebP nelze nahrát bez předchozí úpravy v kódu. Pomocí dalších úprav se můžete hrát s nastavením kvality komprese. Všechny potřebné informace najdete na této stránce WordPressu.

Co udělá WebP s vašimi feedy pro srovnávače?

Stávající obrázky zůstanou ve formátu, v jakém jste je nahráli. Pokud nahrajete obrázek ve WebP do vašeho e-shopu, do produktového feedu se přepíše URL WebP obrázku. Většina srovnávačů zboží však zatím neví pracovat s WebP formátem.

Ukázka elementu IMAGE z produktového feedu Mergado XML:

<IMAGE>https://wp533.mergadoshop.com/wp-content/uploads/2021/08/1_cup_maythefoxbewithyou_2.webp</IMAGE>

Přehled srovnávačů a podpory WebP

👉Google Shopping
Podporuje WebP.

👉Facebook Shopping, Heureka a Zboží.cz
Zatím WebP nepodporuje.

👉GLAMI a Biano
Podporuje formáty jpg, png, gif a WebP. Co se týče formátu WebP, je to v rámci srovnávače nejlepší volba v poměru komprese/kvality.

Jak to vyřešíte pomocí profesionálních nástrojů?

K dispozici máte speciální externí aplikace, které převedou vaše obrázky do formátu podporovaného srovnávače nebo plugin, který zachová více verzí obrázku na vašem webu.

1. Převod obrázků pomocí aplikace Feed Image Editor

Jedním z řešení je hromadná konverze produktových obrázků do formátu, který srovnávače podporují. Online aplikace pro úpravu produktových obrázků Feed Image Editor podporuje širokou škálu obrázkových formátů i zmíněný WebP. Princip je rychlý a jednoduchý - originální obrázky zůstanou ve vstupním feedu nezměněny a ve výstupním feedu budou převáděny do požadovaného formátu.

Jak postupovat v appce?

  • Vytvořte novou šablonu a zvolte produktový výběr, na který ji chcete aplikovat (ideálně na všechny produkty).
  • V Nastavení si vyberte jeden z výstupních formátů .jpeg nebo.png.

Výhody:

  • Aplikace nabízí více možností jak pracovat se samotnými obrázky - můžete přidat speciální grafické prvky, slevové štítky, vylepšit  rozlišení, dohledat chybějící obrázky a mnoho dalších vychytávek.
  • Feed Image Editor pracuje automatizovaně a obrázky upravuje hromadně. Není nutné řešit žádné další pluginy do Wordpressu a díky napojení na Mergado využijete mnoho dat přímo z vašeho feedu.

Aktivujte si Feed Image Editor v Mergado Store a na prvních 10 dní využijte jeho výbavu zdarma.

Feed Image Editor

Feed Image Editor je aplikace pro práci s obrázky zboží e-shopu. Umožní vám do obrázků doplňovat předchystané nálepky, barevné rámečky, pruhy, puntíky či texty. Využít přitom můžete předchystané grafiky nebo si do aplikace nahrát vlastní. Jen si to představte – vlastní logo, detail produktu nebo oblíbená reklamní postavička teď mohou být snadno součástí vaší inzerce na Facebooku a Instagramu!

2. Speciální pluginy pro optimalizaci a konverzi obrázků

Druhou možností je obejít přímé nahrávání obrázků ve formátu WebP a nadále nahrávat obrázky ve formátu JPG nebo PNG. Pro konverzi na formát WebP následně můžete použít speciální pluginy. Ty většinou optimalizují velikost již nahraných obrázků a zároveň nabízejí možnost vytvořit i WebP verzi vedle standardních JPG nebo PNG.

Výhodou této varianty je, že zachováte oba formáty obrázku současně. Plugin upraví frontend stránek použitím tagu <picture> namísto <img>. Tag <picture> vám umožní načíst různé obrázky pro různé požadavky. Může obsahovat žádné nebo několik prvků <source> a jednu značku <img> jako nouzovou variantu pro starší prohlížeče - i když je WebP rozšířen mezi většinu moderních prohlížečů, některé ho stále nepodporují.

Příklad kódu:

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

Chcete-li dosáhnout co nejširší kompatibilitu, využití pluginu je podle Css-tricks.com nejlepší řešení - funguje na všech srovnávačích a dokonce i na těch, které prvek nepodporují.

Můžete použít například plugin Imagify, který jsme vyzkoušeli na našem testovacím e-shopu.

Plugin přidal do kódu element <picture> s WebP verzí obrázku. Ve feedu, ale stále zůstane odkaz na původní JPG verzi.

Ukázka frontendu webových stránek:

Ukázka elementu z XML feedu:

<IMAGE>https://wp533.mergadoshop.com/wp-content/uploads/2020/06/tricko-nastvany-bily-tygr-white-edition.jpg</IMAGE>

Výhody:

  • zachování obou verzí obrázku - WebP i JPG / PNG (pro starší prohlížeče)
  • do feedu se stále generují původně nahrané formáty obrázků (JPG / PNG), které podporuje většina srovnávačů

Pluginy pro optimalizaci a konverzi obrázků do WebP

Zvyšte rychlost vašich stránek a využívejte moderní formáty obrázků - zachováte tak vysokou kvalitu vašich produktových feedů. S bezchybnou inzercí na porovnávačích vám zase pomůže Mergado Pack. Otestujte jeho nový design a dejte nám vědět, jak se vám s ním pracuje. Aktuální verzi pluginu pro WordPress s WooCommerce si stáhnete jednoduše na tomto odkazu.

 

 

Mohlo by vás zajímat:

Kolik recenzí můžete naráz sbírat s Mergado Packem?

Produktové recenze jsou jedním z klíčových kritérií při nákupním rozhodování. S Mergado Packem pro PrestaShop a WooCommerce je posbíráte hned pro pět známých srovnávačů zboží a marketingových služeb, jakými jsou GLAMI TOP či Heureka Ověřeno zákazníky.

24.08.2021
Přivítejte novou verzi Mergado Packu. Co všechno nabízí e-shopům na WooCommerce?

Plugin Mergado Pack je po poslední úpravě bohatší o další vylepšení. Nastavení i seznamy feedů získaly přehlednější uspořádání a novinkou je také automat, který sám doporučí počet generovaných produktů. Pojďme se podívat, jak vypadá třetí verze Packu.

11.08.2021
Mergado Pack: Jak přidat kódy produktů do vašeho WooCommerce e-shopu?

Plugin Mergado Pack se opět hlásí o pozornost s novinkami, které uživatelům přinesl poslední release. Kromě zajímavých vylepšení se v tomto článku zaměříme na novou možnost přidávat EAN kódy v produktovém feedu.

27.05.2021

Přidat komentář