- [Case Studies](/kategorie/case-studies)
- [E‑commerce tipy](/kategorie/e-commerce-tipy)
- [E‑shopové riešenia a platformy](/kategorie/e-shopove-riesenia-platformy)
- [Mergado Pack](/kategorie/mergado-pack)
- [Mergado tipy](/kategorie/mergado-tipy)
- [Novinky v Mergade](/kategorie/novinky-v-mergade)
- [Novinky z porovnávačov cien](/kategorie/novinky-z-porovnavacov-cien)
- [Pracujeme s Mergadom](/kategorie/pracujeme-s-mergadom)
- [Rozhovory](/kategorie/rozhovory)
- [Rozšírenia](/kategorie/aplikacie)
- [S Mergadom do zahraničia](/kategorie/s-mergadom-do-zahranicia)
- [Zo života Mergada](/kategorie/zo-zivota-mergada)
1. [ Domov ](/)
2. [ Blog ](/blog)
3. [ Mergado Pack ](/kategorie/mergado-pack)
4. **Zoznámte sa s podporou WebP pre WordPress. Čo prinesie vášmu feedu?**
# **Zoznámte sa s podporou WebP pre WordPress. Čo prinesie vášmu feedu?**
[  Petra Marková ](/blog/petra-markova) [Mergado Pack](/kategorie/mergado-pack)
17. 8. 2021
4 minúty čítania
Vydanie *tretej verzie* [Mergado Packu](https://www.mergado.sk/blog/mergado-pack-nova-tretia-verzia) je veľkým míľnikom pre nástroj i jeho užívateľov. Za pozornosť stojí aj ďalší tip z dielne Packov a poteší hlavne e‑shopárov, ktorí využívajú *WordPress* s [WooCommerce](https://pack.mergado.cz/woocommerce). Objavte s nami podporu **WebP — dátovo úspornú alternatívu** ku klasickým formátom obrázkov.
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. —
Vydanie *tretej verzie* [Mergado Packu](https://www.mergado.sk/blog/mergado-pack-nova-tretia-verzia) je veľkým míľnikom pre nástroj i jeho užívateľov. Za pozornosť stojí aj ďalší tip z dielne Packov a poteší hlavne e‑shopárov, ktorí využívajú *WordPress* s [WooCommerce](https://pack.mergado.cz/woocommerce). Objavte s nami podporu **WebP — dátovo úspornú alternatívu** ku klasickým formátom obrázkov.
## Čo je WebP
WebP je **formát bitmapových obrázkov**, ktorý predstavil *Google v roku 2010*. Aktuálne je podporovaný väčšinou prehliadačov (okrem zastaraného a zvyčajne málo nepoužívaného Internet Exploreru).
*Pozrite sa na aktuálne podporu tohto formátu [naprieč prehliadačmi.](https://caniuse.com/webp)*
### S čím všetkým vám pomôže?
- možnosť výrazného **zníženia dátového objemu** v porovnaní s *JPEG aj PNG*
- **alfa priehľadnosť**, ktorú doteraz ponúkal len formát *PNG*
- podpora **animácií**, ktorú poskytuje len *GIF*
[Všeobecné štúdie od Googlu](https://developers.google.com/speed/webp/) uvádzajú, že WebP je menšia u bezstratovách obrázkov typu PNG o *26 %* a u stratových obrázkov typu JPG o *25 – 34 %*.
## Vyskúšali sme výhody WebP v praxi
Naľavo je pôvodný fotka PNG bez pozadia (480 kB) optimalizovaná pomocou nástroja [tinypng.com](https://tinypng.com/) (128,3 kB). Napravo je pôvodná fotka (480 kB) **prevedená do formátu WebP bez pozadia** (30,2 kB). *Spoznáte rozdiel?*
#### *Fotka PNG (128,3 kB) Fotka WebP (30,2 kB)*
## WordPress 5.8 a podpora WebP
[WordPress ](https://wordpress.com/)podporuje formát obrázkov WebP od posledného *releasu 5.8.* Obrázok stačí jednoducho **nahrať štandardným spôsobom do knižnice médií**. WP taktiež avizuje, že v budúcnosti pridá funkciu automatickej konverzie nahratých obrázkov s WebP ako východiskový výstupný formát. V súčasnej dobe však WP **neumožňuje konverziu existujúcich obrázkov** na WebP.
V prípade, ak spravujete svoje weby vo **WP MultiSite režime**, obrázky WebP nie je možné nahrať bez predchádzajúcej úpravy v kóde. Pomocou ďalších úprav sa môžete hrať s nastavením kvality kompresie. Všetky potrebné informácie nájdete [na tejto stránke WordPressu](https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/).
## Čo urobí WebP s vašimi feedmi pre porovnávače?
Existujúce obrázky **zostanú vo formáte** v akom ste ich nahrali. Ak nahráte obrázok vo WebP do vášho e‑shopu, do produktového feedu sa **prepíše URL** WebP obrázku. Väčšina porovnávačov tovaru však zatiaľ nevie pracovať s WebP formátom.
**Ukážka elementu IMAGE z produktového feedu [Mergado XML](https://www.mergado.sk/product_xml_specifikace.pdf):**
```
https://wp533.mergadoshop.com/wp-content/uploads/2021/08/1_cup_maythefoxbewithyou_2.webp
```
### Prehľad porovnávačov a podpory WebP
👉[Google Shopping](https://www.mergado.sk/tema/google-nakupy)
Podporuje [WebP.](https://support.google.com/merchants/answer/6324350?hl=cs)
👉[Facebook Shopping](https://www.mergado.sk/tema/facebook), [Heureka](https://www.mergado.sk/tema/heureka) a [Zboží.cz](http://www.mergado.sk/tema/zbozi-cz)
Zatiaľ WebP *nepodporuje.*
👉[GLAMI ](https://www.mergado.sk/tema/glami)a [Biano](http://www.mergado.sk/tema/biano)
Podporuje formáty *jpg, png, gif a WebP.* Čo sa týka formátu WebP, je to v rámci porovnávača **najlepšia voľba v pomere kompresie/kvality.**
## Ako to vyriešite pomocou profesionálnych nástrojov?
K dispozícii máte špeciálne **externé aplikácie**, ktoré prevedú vaše obrázky do formátu podporovaného porovnávača alebo **plugin**, ktorý zachová viac verzií obrázku na vašom webe.
###
1.Prevod obrázkov pomocou aplikácie Feed Image Editor
Jedným z riešení je **hromadná konverzia produktových obrázkov** do formátu, ktorý porovnávače podporujú. Online aplikácia na úpravu produktových obrázkov [Feed Image Editor](https://www.feed-image-editor.sk/) podporuje širokú škálu obrázkových formátov i spomínaný WebP. Princíp je rýchly a jednoduchý – originálne obrázky zostanú vo vstupnom feede nezmenené a vo výstupnom feede budú prekonvertované do požadovaného formátu.
**Ako postupovať v appke?**
- Vytvorte novú šablónu a zvoľte produktový výber, na ktorý ju chcete aplikovať (ideálne na všetky produkty).
- V *Nastaveniach* si vyberte jeden z výstupných formátov *.jpeg alebo.png.*
**Výhody:**
- Aplikácia ponúka **viac možností ako pracovať so samotnými obrázkami** – môžete pridať špeciálne *grafické prvky, zľavové štítky, vylepšiť rozlíšenie, dohľadať chýbajúce obrázky* a mnoho ďalších vychytávok.
- Feed Image Editor pracuje **automatizovane a obrázky upravuje hromadne**. Nie je nutné riešiť žiadne ďalšie pluginy do *Wordpressu* a vďaka napojeniu na Mergado môžete využiť mnoho dát priamo z vášho feedu.
Aktivujte si Feed Image Editor [v Mergado Store](https://store.mergado.com/detail/feedimageeditor/#about) a **prvých 10 dní využite jeho výbavu zadarmo**.
### 2.Špeciálne pluginy pre optimalizáciu a konverziu obrázkov
Druhou možnosťou je obísť **priame nahrávanie obrázkov vo formáte WebP** a naďalej nahrávať obrázky vo formáte JPG alebo PNG. Pre konverziu na formát WebP následne môžete použiť špeciálne pluginy. Tie väčšinou **optimalizujú veľkosť** už nahraných obrázkov a zároveň ponúkajú možnosť vytvoriť aj WebP verziu vedľa štandardných JPG alebo PNG.
Výhodou tejto varianty je, že **zachováte oba formáty obrázku súčasne**. Plugin upraví front-end stránok použitím tagu *<picture>* namiesto *<img>*. Tag *<picture>* vám umožní načítať rôzne obrázky pre rôzne požiadavky. Môže obsahovať žiadne alebo niekoľko prvkov *<source>* a jednu značku *<img>* ako núdzovú variantu pre staršie prehliadače – aj keď je **WebP rozšírený medzi väčšinu moderných prehliadačov**, niektoré ho stále nepodporujú.
**Príklad kódu:**
```
```
Ak chcete dosiahnuť čo **najširšiu kompatibilitu**, využitie pluginu je podľa [*Css-tricks.com*](https://css-tricks.com/) najlepšie riešenie – funguje na všetkých porovnávačoch a dokonca aj na tých, ktoré prvok *nepodporujú*.
Môžete použiť napríklad plugin [Imagify](https://wordpress.org/plugins/imagify/), ktorý sme vyskúšali na našom **testovacom e‑shope**.
Plugin pridal do kódu element *<picture>* s WebP verziou obrázku. Vo feede, ale stále zostane odkaz na **pôvodnú JPG verziu**.
**Ukážka frontendu webových stránok:**
[  ](https://www.mergado.sk/sites/default/files/perm/paragraph-image/image1_4.png)
**Ukážka elementu z XML feede:**
```
https://wp533.mergadoshop.com/wp-content/uploads/2020/06/tricko-nastvany-bily-tygr-white-edition.jpg
```
**Výhody:**
- zachovanie **oboch verzií obrázku** – *WebP aj JPG/PNG* (pre staršie prehliadače).
- do feedu sa stále generujú pôvodne nahrané formáty obrázkov (JPG/PNG), ktoré podporuje väčšina porovnávačov
### Pluginy pre optimalizáciu a konverziu obrázkov 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/)
Zvýšte rýchlosť vašich stránok a využívajte moderné formáty obrázkov – **zachováte tak vysokú kvalitu vašich produktových feedov**. S bezchybnou inzerciou na porovnávačoch vám zase pomôže [Mergado Pack](https://pack.mergado.cz/). Otestujte jeho nový dizajn a dajte nám vedieť, ako sa vám s ním pracuje. Aktuálnu verziu pluginu pre WordPress s WooCommerce si stiahnete jednoducho[ na tomto odkaze](https://cs.wordpress.org/plugins/mergado-marketing-pack/advanced/) v sekcii Rozšírené možnosti a Vývojová verzia.
[](http://cs.wordpress.org/plugins/mergado-marketing-pack/advanced/)
### **Mohlo by vás zaujímať:**
[ 
### Úspešná migrácia feedov e‑shopu s pomocou Mergada – 40+ feedov v 5 jazykoch
](/blog/sikeres-webshop-feed-migracio-mergado-segitsegevel)
[ 
### Ako pripraviť produktové dáta tak, aby dávali zmysel pre GPT Shopping?
](/blog/optimalizace-dat-pro-gpt-shopping)
[ 
### Zahájte festivalovú sezónu nadupanou konferenciou Mergado Fest
](/blog/zahajte-festivalovu-sezonu-na-mergado-feste)
[  ](/blog/petra-markova)### [ Petra Marková ](/blog/petra-markova)
Slovenský trh a ľubozvučnú slovenčinu má v Mergade na starosti content špecialistka Petra. Textuje, bloguje, prekladá a s vášňou tvorí obsah na sociálne siete. A keď práve nehľadá tie správne slová, venuje svoj čas bytovej džungli, pečeniu, kaviarňam alebo cestovaniu.
## Mohlo by vás *zaujímať*
[ 
### Merajte pohodlne dáta e‑shopu. Ako vylúčiť platobné brány v Google Analytics 4
](/blog/google-analytics-platobne-brany)
[ 
### Mergado Pack pre WooCommerce vám pomôže zbierať recenzie pre Biano Star
](/blog/mergado-pack-recenzie-biano-star)
[ 
### Mergado Pack v. 3 pre PrestaShop zjednodušuje mnoho e‑shopárskych úkonov
](/blog/mergado-pack3-prestashop)
## Nenechajte si nič *ujsť*
Prihláste sa k odberu nášho newslettera
Prihlásením súhlasíte s tým, že vaše údaje budeme spracovávať v súlade s našimi [zásadami ochrany osobných údajov](/vyhlasenie-o-cookies).
Ďakujeme, úspešne ste sa pripojili k nášmu zoznamu odberateľov.
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()
}
