- [Case Studies](/kategorie/case-studies)
- [E‑commerce tipy](/kategorie/e-commerce-tipy)
- [E‑shopová řešení a platformy](/kategorie/e-shopova-reseni-a-platformy)
- [Mergado Pack](/kategorie/mergado-pack)
- [Mergado tipy](/kategorie/mergado-tipy)
- [Novinky v Mergadu](/kategorie/novinky-v-mergadu)
- [Novinky ze srovnávačů](/kategorie/novinky-ze-srovnavacu)
- [Pracujeme s Mergadem](/kategorie/pracujeme-s-mergadem)
- [Rozhovory](/kategorie/rozhovory)
- [Rozšíření](/kategorie/aplikace)
- [S Mergadem do zahraničí](/kategorie/s-mergadem-do-zahranici)
- [Ze života Mergada](/kategorie/ze-zivota-mergada)
1. [ Úvod ](/)
2. [ Blog ](/blog)
3. [ Mergado Pack ](/kategorie/mergado-pack)
4. **Seznamte se s podporou WebP pro WordPress. Co přinese vašemu feedu?**
# **Seznamte se s podporou WebP pro WordPress. Co přinese vašemu feedu?**
[  Petra Marková ](/blog/petra-markova) [Mergado Pack](/kategorie/mergado-pack)
17. 8. 2021
4 minuty čtení
Vydání třetí verze [Mergado Packu](https://www.mergado.cz/blog/mergado-pack-nova-treti-verze) 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](https://pack.mergado.cz/woocommerce). Objevte s námi podporu **WebP — datově úspornou alternativu** ke klasickým formátem obrázků.
function tableOfContents() {
return {
headings_menu: [],
heading_active: '', // Added to track the active section
shouldBeSticky: false,
generateToC() {
const headings = document.querySelectorAll('.js-article-full-headings h2, .js-article-full-headings h3');
let headingMap = {};
headings.forEach((heading) => { // Use an arrow function to maintain `this` context
// Normalize heading text to remove diacritics, then replace non-alphanumeric characters with dashes
var normalizedText = heading.textContent.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); // Remove diacritics
var id = heading.id ? heading.id : normalizedText.trim().toLowerCase()
.split(' ').join('-').replace(/[^a-z0-9\-]/ig, ''); // Updated regex to replace non-alphanumeric characters
headingMap[id] = headingMap[id] !== undefined ? ++headingMap[id] : 0;
// Use the updated `id` with diacritics removed for the heading id and the TOC
const finalId = headingMap[id] ? `${id}-${headingMap[id]}` : id;
this.headings_menu.push({
id: finalId,
title: heading.textContent,
level: heading.tagName.toLowerCase(), // Track heading level
active: false, // Initially set active to false
});
heading.id = finalId;
});
},
checkStickyNeeded() {
const ul = this.$el.querySelector('ul');
if (ul) {
this.shouldBeSticky = ul.scrollHeight < window.innerHeight;
}
},
setActiveHeading() {
// disabled not working with active state on click
// add @scroll.window="setActiveHeading()" to the parent div
// const headings = document.querySelectorAll('.js-article-full-headings h2');
// let activeHeading = '';
// let closestHeadingDistance = Infinity;
// headings.forEach((heading) => {
// const rect = heading.getBoundingClientRect();
// const offset = rect.top - window.innerHeight / 2; // Consider heading in the middle of the screen as active
// if (offset < 0 && Math.abs(offset) < closestHeadingDistance) {
// activeHeading = heading.id;
// closestHeadingDistance = Math.abs(offset);
// }
// });
// // Update the active state in headings_menu
// if (activeHeading !== this.heading_active) {
// this.headings_menu = this.headings_menu.map(item => ({
// ...item,
// active: item.id === activeHeading,
// }));
// this.heading_active = activeHeading;
// }
},
setActiveItem(clickedId) {
this.headings_menu.forEach(item => {
item.active = (item.id === clickedId);
});
this.heading_active = clickedId; // Optionally update the heading_active property if used
},
};
}
1. —
Vydání třetí verze [Mergado Packu](https://www.mergado.cz/blog/mergado-pack-nova-treti-verze) 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](https://pack.mergado.cz/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](https://caniuse.com/webp).*
### 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](https://developers.google.com/speed/webp/) 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](https://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](https://wordpress.com/) 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](https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/).
## 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](https://www.mergado.cz/sites/default/files/users/documents/shopsystems/mergado-product-xml-1-10-cz.pdf):**
```
https://wp533.mergadoshop.com/wp-content/uploads/2021/08/1_cup_maythefoxbewithyou_2.webp
```
### Přehled srovnávačů a podpory WebP
👉[Google Shopping](https://www.mergado.cz/tema/google-nakupy)
Podporuje [WebP.](https://support.google.com/merchants/answer/6324350?hl=cs)
👉[Facebook Shopping](https://www.mergado.cz/tema/facebook), [Heureka](https://www.mergado.cz/tema/heureka-cz) a [Zboží.cz](https://www.mergado.cz/tema/zbozi-cz)
Zatím WebP *nepodporuje*.
👉[GLAMI ](https://www.mergado.cz/tema/glami)a [Biano](https://www.mergado.cz/tema/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](https://www.feed-image-editor.cz/) 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](https://store.mergado.com/detail/feedimageeditor/#about) 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:**
```
```
Chcete-li dosáhnout co nejširší kompatibilitu, využití pluginu je podle [Css-tricks.com](https://css-tricks.com/using-webp-images/#using-webp-in-html) **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](https://wordpress.org/plugins/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:**
[  ](https://www.mergado.cz/sites/default/files/perm/paragraph-image/image1_4.png)
**Ukázka elementu z XML feedu:**
```
https://wp533.mergadoshop.com/wp-content/uploads/2020/06/tricko-nastvany-bily-tygr-white-edition.jpg
```
**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
- [Imagify](https://wordpress.org/plugins/imagify/)
- [ShortPixel](https://blog.shortpixel.com/how-webp-images-can-speed-up-your-site/)
- [Optimole](https://wordpress.org/plugins/optimole-wp/)
- [EWWW Image Optimizer](https://wordpress.org/plugins/ewww-image-optimizer/)
- [SG Optimizer ](https://wordpress.org/plugins/sg-cachepress/)
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](https://pack.mergado.cz/). 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](https://cs.wordpress.org/plugins/mergado-marketing-pack/advanced/).
[](http://cs.wordpress.org/plugins/mergado-marketing-pack/)
### **Mohlo by vás zajímat:**
[ 
### Zahajte festivalovou sezónu nadupanou konferencí Mergado Fest
](/blog/zahajte-festivalovou-sezonu-na-mergado-festu)
[ 
### Jak optimalizace feedu zvýšila výkon Meta Ads bez navýšení rozpočtu
](/blog/optimalizace-feedu-pro-Meta-Ads)
[ 
### Jak úspěšně prodávat na idealo
](/blog/uspesny-prodej-na-idealo)
- [ Mergado Pack ](/tema/mergado-pack)
- [ WooCommerce ](/tema/woocommerce)
[  ](/blog/petra-markova)### [ Petra Marková ](/blog/petra-markova)
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í.
## Mohlo by vás *zajímat*
[ 
### Měřte pohodlně data e‑shopu. Jak vyloučit platební brány v Google Analytics 4
](/blog/vylouceni-platebnich-bran)
[ 
### Mergado Pack pro WooCommerce vám nově pomůže sbírat recenze pro Biano Star
](/blog/mpack-woocommerce-biano-star)
[ 
### Mergado Pack v. 3 pro PrestaShop zjednodušuje mnoho e‑shopařských úkonů
](/blog/pack-prestashop-treti-verze)
## Ať vám *nic neunikne*
Přihlašte se do našeho newsletteru
Přihlášením souhlasíte, že vaše údaje zpracujeme v souladu s podmínkami o [ochraně osobních údajů](/prohlaseni-o-cookies).
Děkujeme, úspěšně jste se připojili k našemu seznamu odběratelů.
function ml_webform_success_5807248() {
var r = ml_jQuery || jQuery
r('.ml-subscribe-form-5807248 .row-success').show(), r('.ml-subscribe-form-5807248 .row-form').hide()
}
