Uniobchod

WebP obrázky: Aké sú ich výhody a prečo ich používať?

WebP obrázky: Aké sú ich výhody a prečo ich používať?

Obrázky sú neodmysliteľnou súčasťou webov a obzvlášť e-shopov » Pútajú pozornosť ľudí a smerujú ich k nákupu. Mnohé e-shopy však obsahujú veľké množstvo produktových obrázkov. A množstvo obrázkov = množstvo dát. Preto vôbec nie je jedno, aká je ich veľkosť a kvalita. A práve z tohto hľadiska je zaujímavý formát WebP, ktorý Google predstavil už v roku 2010 a neustále mu silnie podpora v bežne používaných prehliadačoch. 

Optimalizujte obrázky na svojom webe a e-shope

Áno, nekvalitné a rozmazané obrázky vzbudzujú nedôveru u potenciálnych klientov. No mať, napr. pri produktových obrázkoch s malým výrezom nahratý obrázok s vysokým rozlíšením 2400 x 3600 px tiež vôbec nie je vhodné. Pri bežnom e-shope nie je potrebné a ani žiaduce nahrávať obrázky v kvalite pre tlač, či vo veľkom pôvodnom rozlíšení:

  • Zbytočne sa tým zaťažuje e-shop, jeho rýchlosť a výkonnosť.
  • Užívateľom sa pomaly načítavajú stránky a tak predčasne odchádzajú. 
  • Navyše sa tým e-shop pripravuje aj o lepšie umiestnenia vo výsledkoch vyhľadávania.

Vlastný e-shop? Skúšobná verzia: 100 dní zdarma »

Optimalizácia webových obrázkov sa týka viacerých oblastí: zdroje obrázkov, ich pomenovanie, popisky, ukladanie obrázkov, optimálne veľkosti a rozlíšenie obrázkov ... a v neposlednom rade kompresia obrázkov. 

Kompresia obrázkov je cesta k zefektívneniu e-shopu aj samotného nákupného procesu. Znížením veľkosti obrázkov sa zrýchli načítanie stránok. Rozoznávame dva základné typy kompresie: stratovú a bezstratovú. V rámci zachovania čo najvyššej kvality obrázkov, ale pritom s čo najmenšou veľkosťou, sa využíva bezstratová kompresia. A ako je na tom WebP formát obrázkov?

WebP obrázky a efektívnejší kompresný algoritmus

WebP formát poskytuje bezstratovú aj stratovú kompresiu pre menšie a bohatšie obrázky na webe. Tento formát bo vyvinutý tak, aby boli obrázky po vizuálnej stránke okom nerozoznateľné od obrázkov vo formáte JPG a PNG, ale pritom mali omnoho menšiu veľkosť a tým pádom sa rýchlejšie načítavali na webe. Pri WebP obrázkoch sa využíva efektívnejší kompresný algoritmus a preto sa dosahuje výrazné zmenšenie veľkosti súborov.

uniobchod-obrazky-webp-vs-png-formatScreenshot z prehliadača: vľavo pôvodný obrázok v PNG formáte, vpravo WebP obrázok

Zjednodušene povedané: WebP obrázky sú zvyčajne menšie v porovnaní s bežnými formátmi (JPG, PNG, GIF), ale vďaka vynikajúcej kompresii majú rovnakú kvalitu.

Ak hovoríme o menšej veľkosti WebP obrázkov, tak tento formát dokáže znížiť veľkosť obrázku bez straty kvality až o 30%. A to sú už skutočne zaujímavé hodnoty v prospech zvýšenia výkonu stránky.

Google uvádza, že bezstratové WebP obrázky sú o 26% menšie ako PNG. Stratové WebP obrázky sú menšie o 25-34% v porovnaní s JPG obrázkami. Využitím WebP obrázkov tak šetríme vzácne sekundy pri načítaní stránok, najmä na mobilných telefónoch.

Používanie WebP obrázkov prináša množstvo výhod a benefitov. Neustále rastie na popularite a to aj preto, že dokáže nahradiť štandardné formáty súborov: JPEG, PNG a GIF.

WebP obrázky vs. JPEG, PNG a GIF

Univerzálnosť je to, čo WebP formát predurčuje k úspechu. Pred tým ako bol vyvinutý WebP formát bolo potrebné na priehľadné pozadie používať PNG a na animácie GIF. WebP obrázky zahŕňajú aj transparentnosť a animáciu. Kombinujú sa tak vlastnosti troch klasických formátov: JPG (nízka dátová veľkosť) PNG (transparentnosť) a GIF (možnosť animácie).

webp-obrazky-gif-png-jpg-porovnanie

WebP je jedným z novších formátov obrázkov, ktoré sú primárne určené pre webové stránky a e-shopy.  Hlavnou výhodou formátu WebP oproti bežným formátom ako PNG alebo JPG je výsledná veľkosť obrázkov.

Výhody WebP obrázkov 

Google vyvinul tento formát obrázkov, aby sa zvýšila efektivita a rýchlosť práce na internete. Aj na základe našich skúseností a výsledkov testovaní môžeme len potvrdiť, že implementácia WebP obrázkov sa oplatí a to hneď z viacerých dôvodov:

  • Efektívnejšia kompresia – pri ktorej nedochádza k viditeľnému zhoršeniu kvality obrázkov
  • Univerzálnosť formátu – podpora animácií a priehľadnosti
  • Dátovo úsporná alternatíva – k štandardným formátom (jpg, png, gif)
  • Zníženie úložiska dát – využitím tohto formátu bude e-shop potrebovať menej úložného priestoru
  • Rýchlejšie načítanie stránok – zvyšuje okrem výkonu webu aj užívateľský komfort
  • Podpora SEO – pozitívny vplyv na umiestnenie vo vyhľadávačoch
  • Podpora prehliadačov – väčšina moderných prehliadačov podporuje tento formát

Používanie WebP obrázkov prispeje k optimalizácii vášho e-shopu a podporíte tým aj nákupný proces a samotný on-line predaj.

Samozrejme nájdu sa aj tí, ktorí majú výhrady voči používaniu tohto formátu. Jednou z nich je aj to, že podpora od prehliadačov by mohla byť ešte vyššia (aktuálne cca na 80%). Podporu tohto formátu si môžete overiť na tejto stránke » 

Riešením sú v tomto prípade, tzv. záložné obrázky: implementácia a zabezpečenie alternatívneho zobrazovania obrázkov v štandardných formátoch JPG alebo PNG. V prípade, že WebP obrázok nebude podporovaný prehliadačom načíta si záložný obrázok v podporovanom formáte. To však už nemožno hovoriť o riešení s dátovou úsporou.

Použitie WebP obrázkov

Všetko závisí od toho, akým spôsobom budete s WebP obrázkami pracovať. S ukladaním a následným zobrazením obrázkov WebP, či zobrazovaním v jednotlivých grafických programoch je to ešte stále trošku komplikovanejšie. To je ale v prípade, ak si nájdete obrázok vo vyhľadávači, chcete si ho uložiť a následne ho zobraziť alebo s ním ďalej pracovať v programoch. 

Pravdepodobne ste sa už stretli s týmto formátom obrázkov a pamätáte si ho aj preto, že sa vám nedal po stiahnutí štandardným spôsobom zobraziť. Na to však existuje viacero riešení. Podrobnejšie sú popísané, napr. v tomto článku »

V prípade, že pracujete s JPG alebo PNG obrázkami, tie upravíte a následne uložíte pre potreby webu alebo e-shopu do WebP formátu – tento spôsob práce je menej komplikovanejší. 

Navyše, je dostupné množstvo doplnkov pre grafické programy a aj on-line nástrojov, ktoré vám obrázky v štandardných formátoch JPG, či PNG konvertujú na WebP formát úplne zadarmo, napr.: online-convert.com » 

Ako to funguje v UNIobchod systéme od WEBY GROUP? 

Redakčný systém UNIobchod » pre tvorbu e-shopov podporuje WebP formát obrázkov. V rámci optimalizácie rýchlosti načítania e-shopu sme implementovali tento typ novej generácie obrázkov. Je to veľmi jednoduché. Náš systém automaticky prevedie obrázky do formátu WebP. To znamená, že pre našich klientov sa pri spracovaní a nahrávaní obrázkov nič nemení. Tak ako doteraz je možné nahrávať obrázky v štandardnom podporovanom formáte .jpg. a .png a systém to automaticky prevedie do formátu WebP.

Záverom: Odporúčanie k WebP obrázkom

Na otázku, či používať WebP obrázky alebo nie je v prípade optimalizácii webov a e-shopov jednoznačná odpoveď. Áno a bola by škoda nevyužiť potenciál tohto formátu obrázkov. 

V súčasnosti je to jeden z najlepších formátov, ktorý  zmenšuje súbory bez vizuálne viditeľných strát. Samozrejme, prísnejším okom sa na túto otázku budú pozerať weby a e-shopy, ktoré sa prezentujú náročnejšou grafikou, resp. ich predáva samotný dizajn. 

----

Mohlo by vás tiež zaujímať:

Samoobslužný e-shop Samoobslužný e-shop

Potrebujete poradiť pri výbere e-shopového riešenia?

Spravujeme už viac ako 1050 E-shopov/450 riešení na mieru

Je tu doba e-shopová. Rozbehnite svoj online predaj s nami. WEBY GROUP je tu pre vás už 20 rokov. Vytvorte si eshop už dnes » všetky výhody UNIobchod systému »