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

Článek zveřejněn 17. 08. 2021
| 4 minuty čtení

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 JPEGPNG
  • 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 si 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 neumí 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, HeurekaZboží.cz
Zatím WebP nepodporuje.

👉GLAMI 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.

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:

Napsal / Petra Marková / 17. 08. 2021

Slovenský trh a libozvučnou slovenštinu má v Mergadu na starosti copywriterka Petra. Textuje, bloguje, překládá a s vášní tvoří obsah na sociální sítě. A když zrovna nehledá ta správná slova, věnuje svůj čas své bytové džungli, pečení, kavárnám nebo cestování. 

Témata: Mergado Pack

Přidat nový komentář

Obsah tohoto pole je soukromý a nebude veřejně zobrazen.
Přidáním komentáře souhlasíte se zpracováním osobních údajů.