Formát obrázků WebP není žádná novinka v internetovém prostředí, přesto se až v posledních pár letech učíme s tímto formátem souznít. Především proto, že až 80 % návštěvníků webu přichází skrze mobilní zařízení, které nám s každým novým modelem nabízí ještě dokonalejší rozlišení, kde neodpouštíme žádný zmrzačený pixel. Také netolerujeme dlouhé načítání, každá mikrosekunda strávená na webu navíc nás odrazuje.

A právě do těchto těžkých okolností přichází zachránce kvality – formát WebP.

Co je WebP?

Psal se rok 2010, kdy společnost Google uvedla do světa nový formát obrázků, který se inspiroval u formátu WebM. Google měl cíl jasný. Vytvořit formát, který zcela nahradí JPEG a PNG, ale přitom zachová kvalitu a zároveň minimalizuje velikost a rychlost přenosu. WebP kombinuje algoritmy pro kompresi bez ztráty kvality (lossless) a s kompresí s viditelnou ztrátou kvality (lossy). Díky tomu může dosahovat velkých úspor v velikosti souborů bez ztráty kvality.

Od uvedení do digitálního světa uběhlo spoustu let a přesto jsme my, uživatelé, zaseklí při tradičních verzích JPEG, PNG nebo GIF, protože se bojíme změn a je opravdu náročné je aplikovat.

Nikdo nemá čas na změnu! A možná nedostatek času by měl být ten důvod, proč nahradit své obrázky na webech na WebP, neboť právě rychlost přenosu je u WebP formátu klíčová.

Jaký je vlastně rozdíl mezi formáty JPEG, PNG a WebP?

Ať se nám nihilisticky zdá, že na formátech obrázků nezáleží, pojďme se přesvědčit o opaku. Protože detaily jsou to, na čem koneckonců záleží nejvíce.

JPEG (Joint Photographic Experts Group)

Formát JPEG byl vyvinut jako standard pro ukládání a sdílení digitálních fotografií. Hlavní výhodou formátu JPEG je to, že podporuje ztrátovou kompresi, což znamená, že soubory mohou být zmenšeny na mnohem menší velikosti.

PNG (Portable Network Graphics)

PNG je formát souboru určený pro zobrazování obrázků na webu, který podporuje bezeztrátovou kompresi. To znamená, že soubory jsou menší, aniž by došlo ke ztrátě kvality obrazu. Hlavní výhodou formátu PNG je to, že podporuje průhlednost, což umožňuje vytvářet obrázky s čistými hranami, jako jsou loga a ikony.

WebP

WebP je moderní formát souboru vyvinutý společností Google. Tento formát kombinuje ztrátovou i bezeztrátovou kompresi, což umožňuje dosáhnout menší velikosti souborů při zachování vysoké kvality obrazu. Hlavní výhodou WebP je to, že se jedná o komprimovaný formát, který nabízí lepší kvalitu než JPEG při zachování malé velikosti souboru.

Zároveň podporuje průhlednost a animace, takže nahrazuje PNG a GIF zároveň. Formát WebP se rychle stává populárním v oblasti web designu a vývoje webových aplikací, protože umožňuje vytvářet soubory obrázků, které se načítají rychleji a snižují tak dobu načítání stránek, což je pro uživatele klíčové.

Šetříme data

Skutečné množství dat, které můžete ušetřit při použití formátu WebP, závisí na mnoha faktorech, jako jsou velikost a složitost obrázku, kvalita komprese a typ zařízení, na kterém je obrázek zobrazen. Nicméně jsou k dispozici statistiky a testy, které ukazují, že WebP může poskytnout až 30% úsporu dat v porovnání s formátem JPEG a až 50% v porovnání s formátem PNG. A to se vyplatí.

Podpora formátu WebP

Simpujeme už na všech webových projektech, které běží na WordPressu a občas si troufneme i bez fallbacku, protože drze tvrdíme, že pokud někdo používá neaktuální prohlížeč, tak si nezaslouží dokonalý doprovodný obrázek vidět.

Apple po smrti Jobse zaspal tak moc, že podporu WebP formátů zpřístupnil až v ostudném roce 2020. Tedy konkrétně, u kterých verzí prohlížečů můžete mít problém s formátem WebP?

• Internet Explorer: Verze před 9 nezvládají formát WebP. Od verze 9 je podpora WebP součástí prohlížeče. Verze Internet Exploreru 9 byla vydána 14. března 2011.
• Safari: Verze před 14 (včetně) nepodporují formát WebP. Od verze 14 je podpora WebP k dispozici. Verze Safari 14 byla vydána 16. září 2020.
• Opera: Verze před 11.10 nezvládají formát WebP. Od verze 11.10 je podpora WebP součástí prohlížeče. Verze Opera 11.10 byla vydána 12. dubna 2011.
• Android: Verze před 4.0 (Ice Cream Sandwich) nezvládají formát WebP. Od verze 4.0 je podpora WebP k dispozici. Verze Android 4.0 (Ice Cream Sandwich) byla vydána 19. října 2011.
• iOS: Verze před 14 (včetně) nepodporují formát WebP. Od verze 14 je podpora WebP k dispozici. Verze iOS 14 byla vydána 16. září 2020.

Tedy i přesto, že nechceme spoléhat na svéprávnost uživatelů a jejich pravidelnou aktualizací prohlížečů, tak bychom měli být v suchu. Teoreticky.

E-shopy a WebP

Shoptet, jakožto jednička v CMS (Content Management System), WebP obrázky stále nepodporuje. Pro kompresí si připlaťte doplněk Pobo Page Builder nebo službu Cloudflare. Zdarma vám nikdo nic nedá. Kromě Shoptet e-shopu o max. 10 produktech, bez doplňků, které mohou brzdit funkčnost vašeho e-shopu. To be honest, stejně je to více, než byste měli žádat.) 

Další české CMS se rozhodly ignorovat WebP také. Eshop-rychle WebP nepodporuje. A FastCentrik, vyvíjen společností NetDirect, zaspal dobu a žije v minulosti a už si ani nesnaží.

Použití nám tak v českých vodách zůstává pouze u WordPressu, zatímco se zkříženými prsty doufáme, že i české CMS dovolí používat dokonalý formát WebP.

A co socky?

Sociální sítě nepotřebují nižší komprese obrázků, protože je úspěšně deformují sami, aby ušetřili, co největší množství dat. Nahrávejte, jako vždy, formát PNG a doufejte, že vám pár pixelů pro rozpoznání vaší tváře či produktu postačí.

Zároveň na sociálních sítích není vaše starost, jak rychle se FYP vykreslí, jakožto pouhý uživatel buď berte, či nechte být.

Konvertujte na WebP

Téměř všechny grafické programy, které za to stojí, nabízí export do WebP. Pravděpodobně sáhnete po klasice jako Adobe Photoshop nebo online nástroji WebP Converter. Zde ale stojí za zmínku i český grafický software Photopea, se kterým je život jednodušší.

Větší ≠ lepší

I přesto, že převedete své dokonalé obrázky do WebP, tak to neznamená, že ušetříte mega moc dat. Nezapomínejte, že i samotné rozlišení obrázků nahraných na web hraje roli. Opravdu potřebujete extra/ultra/mega Full HD obrázek své večeře na blog v rozlišení 4000x4000px, když maximální zobrazení je 400x400px? Nepotřebujete. Zkrátka nahrávejte obrázky v požadovaném rozměru, vyhnete se tak zbytečnému chroustání dat a komprese je jednodušší.

Pokud tedy máte rádi rychlost a kvalitu, vsaďte na WebP a vytrvejte s námi než i ostatní redakční systémy podlehnou a zpřístupní manipulaci s moderními formáty. 

Jaké jsou klíčové prvky úspěšného e-shopu? A jaký by měl být jeho obsah? Tuto otázku si nepochybně klade každý začínající podnikatel. Mnoho majitelů e-shopů si dozajista přeje, aby ten jejich byl tím nejkrásnějším a nejdokonalejším e-shopem ze všech.

Jelikož krása je velmi subjektivní pojem, pojďme se spolu spíše podívat na to, jakým způsobem dosáhnout toho, aby byl váš e-shop ani tak ne dokonalý, jako spíše funkční, aby obsahoval vše, co je pro jeho správnou funkčnost nezbytné a hlavně a především, aby dobře prodával vaše produkty, či služby.

Co všechno byste si tedy měli při vytváření vašeho e-shopu pohlídat? Postupně si zde rozebereme a shrneme ty nejdůležitější principy.

Stavba webových stránek

Kvalitní e-shop by měl klientovi umožnit příjemný nákup vašeho zboží, a to bez jakýchkoliv překážek, či bez nutnosti se nad čímkoliv hluboce zamýšlet. Pokud si něco zákazník kupuje na kamenné prodejně, důvodem proč jej nevzhlednost, či nepřehlednost dané prodejny neodradí od nákupu v ní, je čas, který by v takovém případě musel věnovat cestě do jiné kamenné provozovny.

V internetovém prostředí je toto ale otázkou několika kliknutí a pár vteřin. Nedejte tedy vašemu zákazníkovi sebemenší důvod k tomu, aby byl nespokojen a šel daný výrobek hledat u konkurence.

Vaše e-shopové stránky by proto měly být přehledné a srozumitelné a to v maximální možné míře. Před tím, než si vytvoříte, či necháte vytvořit návrh grafický, měli byste mít zpracovaný návrh informační architektury webu – tedy to, jaké stránky a v jaké struktuře bude daný web obsahovat.

Může se jednat o různé kategorie a podkategorie daného zboží, detaily vašich produktů, nákupní poradna nebo stránka, obsahující základní informace o vás, případně o vašem blogu, na kterém se vašemu sortimentu, či oboru podnikání, věnujete.

Takto správně navržená struktura pak pomůže návštěvníkům ke snadné orientaci na vašem webu a bývá také základem pro e-commerce marketing jako SEO, PPC nebo e-mailing.

Zkuste se na vaše stránky podívat očima klienta. Na první pohled by mu mělo být jasné, kde se co nachází, kam se po kliknutí na dané tlačítko dostane a co tam najde, a také, jak se vrátí zpět na předchozí stránku. Pozvěte například třetí osobu, která o struktuře stránek nic neví a nechte ji najít konkrétní produkt. Podle toho, jak se to dotyčnému člověku podaří či nikoliv, zjistíte, zda se to bude dařit i vašim klientům.

Detaily produktů jsou dalším klíčovým prvkem úspěšného e-shopu

Při navrhování vašich stránek nechte grafiky, aby jako první navrhli detail vámi prodávaného produktu. Až poté se pak mohou věnovat vytvoření titulní stránky vašeho webu. Kvalitní a propracovaný detail produktu je totiž tím, co potencionálního zákazníka bude motivovat k tomu, aby si produkt koupil u vás. Dominantními prvky této stránky detailu produktu by pak měly být:

• • název produktu,
  • jeho cena,
  • případná dostupnost, ideálně s odhadovaným datem dodání,
  • klíčové vlastnosti, přednosti a parametry daného produktu,
  • a kvalitní obrázek.

Produktový obrázek by měl být dostatečně velký (v současnosti jsou trendem opravdu velké obrázky, které dominují dané stránce) a v dostatečném rozlišení. Tento obrázek mějte pro zákazníky k dispozici ideálně z několika úhlů pohledu, včetně kompletního příslušenství dodávaného spolu s daným produktem (např. u mobilního telefonu je součástí příslušenství baterie, nabíječka, případně i sluchátka). Jak na kvalitní fotografie jsme se rozvášnili v našem předchozím článku o produktových fotografiích.

Výpisy vašich produktů

Výpisy produktů jsou také velmi důležitým prvkem. Nahrazují totiž zákazníkovi regály se zbožím, mezi nimiž se může procházet po kamenné prodejně a vybírat si z vystaveného zboží. Nároky e-shopů na výpisy se v různých segmentech liší, nicméně je ale důležité umožnit zákazníkovi to, aby si mohl pohodlně prohlédnout přesně ty výrobky, o něž se v daný okamžik zajímá.

Na výpisech produktů by rozhodně měly být následující informace:

• • Možnost filtrovat produkty podle parametrů, které jsou pro klienta při výběru klíčové (ty vám může pomoci odhalit i analýza klíčových slov).
  • Řazení produktů (podle jejich ceny, výrobce, či názvu, apod.).
  • Rozsah výpisů podle ceny od/do.
  • Omezení pouze na produkty, jenž jsou skladem.
  • Jejich dostatečně velké a odpovídající obrázky, včetně názvů.
  • Ceny daných produktů, jež jsou při výběru snad tím nejdůležitějším (výjimkou z tohoto pravidla může být velmi drahé zboží, spadající do kategorie toho luxusního).
  • Dostupnost jednotlivých produktů.

Také nezapomínejte na pojmenování daného výpisu pomocí textu, například nadpisu. Klient se nemusí na určitý výpis vždy dostat skrze navigaci z titulní stránky e-shopu. Může do něj vstoupit například z vyhledávače, či z odkazu v e-mailingové kampaně.

Ukáže-li se to vhodným, popište několika slovy, či větami, vámi nabízený sortiment a především jeho přednosti. Předpokládáte-li, že by zákazníci mohli při výběru tápat, napovězte jim, opravdu jen velmi stručně, podle jakých kritérií si z dané nabídky vybrat, nebo je odkažte na článek na vašem webu, kde jim danou problematiku vysvětlíte.

Snažte se ale vyhnout tzv. SEO textům, tedy blokům textu bez výpovědní hodnoty, které existují pouze proto, aby se v nich bezduše omílala potřebná klíčová slova. Tímto si vůbec nepomůže, ba naopak, vaše stránka se může pro zákazníka stát natolik nepřehlednou, že jej to může od nákupu u vás i odradit.

Nákupní košík – hlavní klíčový prvek

Názory na to, jaké by mělo být nejvhodnější zpracování nákupního košíku se různí. Za všech okolností však platí, že by měl být co možná nejjednodušší. Nedoporučujeme na poslední chvíli zákazníka lákat na všechny slevy a akční nabídky. To nejdůležitější je, aby zákazník objednávku dokončil. Budete-li jej zahlcovat informacemi, které s nákupem daného výrobku nijak nesouvisí, hrozí zde nebezpečí, že svůj nákup spíše nedokončí.

Pokud to jde, rozhodně umožněte zákazníkům i nákup bez nutnosti registrace. Ne každý má totiž v daný okamžik čas a chuť zdlouhavě vyplňovat registrační formulář. A mnozí ze zákazníků jej nebudou chtít vyplnit nikdy, v obavě z obtěžujících reklamních e-mailů, či ze strachu o bezpečnost svých osobních údajů. Nebo jen chtějí mít nákup co nejrychleji dokončený.

Přestože většina lidí nakupuje ráda, samotný “akt útraty peněz” je příjemný jen málokomu. Nákupní košík si představte jako nákup v kamenném obchodě: zcela jistě nemáte v lásce fronty, ani dotěrné pokladní, které se vás snaží přesvědčit k založení klubové kartičky.

Samotný košík by měl být dobře viditelný, většina lidí si zvykla hledat ho v pravém horním rohu obrazovky pod klasickou ikonou košíku, proto jej tam umístěte.

Titulní stránka vašich webových stránek

Přestože by si mnozí mohli myslet, že titulní stránka je tím nejdůležitějším, není tomu tak. Pokud jde o e-shopy, tak ekonomická síla tkví ve stránkách produktových, titulní stránka zde zastává funkci pomyslného rozcestníku, ze kterého se lidé “ponořují” hlouběji do daného webu.

Tuto titulní stránku berte jako takový ukazatel na rozcestí, případně jako reklamní a uvítací plakát před kamenným obchodem. Jejím cílem by mělo být to, aby potencionálním klientům jasně a srozumitelně sdělovala, o jaký e-shop se jedná a co si v něm mohou zakoupit, tedy co na něm prodáváte.

Také by z ní měly vyzařovat vaše konkurenční výhody, tedy to, proč je váš e-shop pro klienty zajímavější, než ty ostatní. Lze na ní například vyzdvihnout to, co je v daný okamžik nejzajímavější z vaší nabídky: jako je naskladnění nového zboží, produkty za zvýhodněnou cenu, či slevy na službách, jako je například doprava zdarma.

Responzivní design – oč se jedná?

Naprostou nezbytností pro to, aby váš e-shop a vaše webové stránky správně fungovaly, je tzv. responzivní design. Jedná se o způsob, jak funkčně a konzistentně zobrazit stejný web uživatelům různých zařízení, ať už se jedná o klasické počítače, notebooky, ultrabooky, chytré telefony, či tablety. Jeho význam roste úměrně tomu, jak se zvyšuje počet uživatelů mobilních zařízení a dostupnost rychlého mobilního internetu.

To, že budete mít dobře vytvořený tento responzivní design jednoduše znamená, že klienti u vás budou moci pohodlně nakoupit, ať už svůj nákup budou provádět na jakémkoliv zařízení, schopném prohlížet webové stránky. Vzhled vašeho webu se totiž pružně přizpůsobí jejich obrazovce i systému. Pokud jde o přizpůsobení se pro mobilní zařízení, bude nezbytné provést různé technické změny, aby jej zákazníci mohli pohodlně ovládat nejen za pomocí myši, ale také i na dotykovém displeji.

Mezi ty méně příjemné aspekty patří u tohoto druhu designu jeho cena. Jeho zpracování vyžaduje již poněkud pokročilejší znalosti, které zatím bohužel řada designérů příliš neovládá. Zpracování vašeho webu do responzivní verze se může stát poměrně nákladnou investicí.

Dle našich statistik vyplývá, že průměrně 92 % lidí navštěvuje e-shop skrze mobilní zařízení.

Dokonalý design není jen tak

Rozhodně nepočítejte s tím, že vám váš designér připraví hned na první pokus naprosto dokonalý návrh vašich webových stránek! Jen málokdo trefí vaše představy napoprvé a je naopak běžné, že i úspěšné e-shopy se věnují neustálému drobnému dolaďování a rozvoji svých webových stránek. Neustále se zkouší nejrůznější změny, od těch nejmenších drobností, jako je styl, či velikost písma, přes konverzní tlačítka, až po kompozici celého webu a nejrůznější barevná schémata.

Do ladění webu byste se ale rozhodně neměli pouštět vy sami a už vůbec ne bez předchozí opravdu důkladné úvahy. Dnes již naštěstí existuje celá řada pomocníků, kteří vám pomůžou svými argumenty pro a proti vámi zamýšleným změnám. Můžete využít dat z webové analytiky, např. Google Analytics. Změny se testují v experimentálním prostředí, případně i za ostrého provozu (různým návštěvníkům se zobrazí různé varianty designu a následně se pak vyhodnocuje, která přinesla více peněz – jinak je tento způsob znám jako AB testování).

Jak tedy na vybudování vašeho e-shopu?

Kromě výše uvedeného bychom chtěli zdůraznit ještě několik důležitých aspektů, které jsou při tvorbě webových stránek nezbytné:

• Při tvorbě grafiky, či návrhu webu se snažte přemýšlet jako zákazník.
• Pokládejte sami sobě otázky, zda je například daná funkce opravdu nezbytná.
• Vše, co není bezpodmínečně nutné, odstraňte. Nejste si jisti, zda a jak často budete psát novinky? Tak je tam jednoduše nedávejte!
• U webových formulářů požadujte opravdu jen ty položky, které nezbytně potřebujete. Hlavně se vyvarujte informacím typu “muž/žena”, “název firmy” a pod.
• Návrh vašeho webu vždy konzultujte s odborníkem.

Přehlednost je klíčovým prvkem úspěšného e-shopu

Každý dobře zpracovaný design by měl mít v patičce webu (dolní strana) uvedené základní informace, tedy název firmy, fakturační údaje, kontakty, popřípadě informace o volných pracovních pozicích, či kamenných pobočkách.

Stránka vašeho e-shopu by měla obsahovat i záložky s přepravními podmínkami, kde si bude moct klient jednoduše spočítat poštovné a balné. To je totiž až v 60% případů tím hlavním důvodem, proč zákazník nakonec dané zboží neobjedná. Buď tyto informace nenajde vůbec a nebo je částka pro něj příliš vysoká. Nezapomeňte ani na obchodní podmínky, a jiné právní náležitosti, o nichž jsme psali v našem předchozím článku. Ty by také měly být dohledatelné a nejčastěji ji zákazníci hledají právě v patičce webu.

Hladký proces objednávky

Je také určitě nezbytné před samotným spuštěním webových stránek e-shopu zkontrolovat, zda vše dokonale funguje. A to především pak proces objednávky. Jde zboží vložit bez problémů do košíku? Funguje vám platební brána? Výběr způsobu doručení? Dbejte na to, aby vše bylo funkční a neposkytujte zákazníkovi důvod odcházet ke konkurenci!

Taktéž si pohlídejte rychlost načítání vašeho webu. Rychlé načítání zvyšuje pravděpodobnost, že klienti nakoupí právě u vás. Podle průzkumů zákazníci očekávají, že se stránky otevřou již do dvou sekund! Pomalý web mnohé odradí, hlavně v dnešní uspěchané době.

Dbejte i na výstižné popisky, které mají za úkol vaše zákazníky zaujmout. Měly by být poutavé, bez zbytečně prázdných frází. Je nezbytné je jasně strukturovat, aby je zákazník mohl jen “skenovat” očima.

Dejte si práci i se SEO. Vhodně použitá klíčová slova a pečlivě zpracované meta description mohou vaši pozici ve vyhledávačích výrazně zlepšit. Vaši pozici však může výrazně poškodit kopírování textů z jiných e-shopů! Vaše popisky musí být proto vždy unikátní. O tom, jak správně psát popisky, jsme již také psali v našem předchozím článku.

Sociální sítě

Přestože nikdo nemusí být všude, dnes se jaksi již očekává, že daná firma, či společnost, bude minimálně na Facebooku nebo Instagramu. Vyjděte tedy vstříc přáním a potřebám svých zákazníků a dopřejte jim možnost spojit se s vámi pomocí sociálních sítí. Zákazník tak dostane možnost vás kontaktovat a vašemu e-shopu to dodá na důvěryhodnosti. Mimo to tam můžete například představovat své novinky. Nebo sdílet příběhy z firemních událostí, atd. O tom, jak psát příspěvky na sociální sítě, jsme se již bavili v našem předchozím článku.

A v neposlední řadě je samozřejmě potřeba rozjet i vhodný marketing. Levnou reklamu vám poskytnou již výše zmíněné sociální sítě. Je vhodné zvolit správné komunikační kanály, publikovat na nich kvalitní obsah a zaměřit se mimo jiné i na potřeby svých klientů, na to, co je trápí a ideálně jim nabídnout řešení, je-li to ve vašich silách. Je nezbytné osvojit si jejich jazyk a udržovat jednotný tón konverzace s nimi.

Několik slov na závěr

V našem článku jsme pro vás sepsali klíčové prvky pro vytvoření úspěšného e-shopu, tedy to, na co byste měli dbát při tvorbě vašich webových stránek. Byť se tento proces může zdát poměrně náročným, nemusí tomu tak být, pokud budete dbát výše uvedených rad nebo si ideálně necháte stránky vytvořit od odborníků.