Prihláste sa na Mergado Fest 2024! Prebehne 6. júna v Brne. Vstupenky v 1. vlne si zaobstaráte tu.
Vydanie tretej verzie Mergado Packu 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. Objavte s nami podporu WebP — dátovo úspornú alternatívu ku klasickým formátom obrázkov.
Vydanie tretej verzie Mergado Packu 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. Objavte s nami podporu WebP — dátovo úspornú alternatívu ku klasickým formátom obrázkov.
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.
Všeobecné štúdie od Googlu 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 %.
Naľavo je pôvodný fotka PNG bez pozadia (480 kB) optimalizovaná pomocou nástroja 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?
WordPress 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.
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:
<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
Zatiaľ WebP nepodporuje.
👉GLAMI a 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.
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.
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 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?
Výhody:
Aktivujte si Feed Image Editor v Mergado Store a prvých 10 dní využite jeho výbavu zadarmo.
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:
<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>Ak chcete dosiahnuť čo najširšiu kompatibilitu, využitie pluginu je podľa 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, 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:
Ukážka elementu z XML feede:
<IMAGE>https://wp533.mergadoshop.com/wp-content/uploads/2020/06/tricko-nastvany-bily-tygr-white-edition.jpg</IMAGE>Výhody:
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. 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 v sekcii Rozšírené možnosti a Vývojová verzia.
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.
