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ů.
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ů.
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.
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 %.
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?
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.
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>👉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.
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.
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?
Výhody:
Aktivujte si Feed Image Editor v Mergado Store a na prvních 10 dní využijte jeho výbavu zdarma.
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:
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.
Slovenský trh a libozvučnou slovenštinu má v Mergadu na starosti content specialistka 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í.
