Vizuály e-shopu často definují nákupní rozhodnutí. Ukazují to statistiky, podle kterých 75 % nakupujících spoléhá na obrázky produktů při procházení e-shopu. Výzkum eBay ukazuje, že fotografie zvýší prodeje až o 65 %.

Samozřejmě musí jít ale o kvalitní a ideálně vaše vlastní fotografie (nikoli ilustrační obrázky apod.) Jenže kolik obrázků byste měli použít? Jaká velikost je nejlepší? Snižují fotky rychlost načítání stránky? Jak zajistit, aby bylo možné vyhledávat obrázky na Googlu? Jak zlepšit SEO v Shopify obchodě díky obrázkům? Tolik otázek!

V tomto příspěvku najdete odpovědi na nejčastější otázky související s optimalizací obrázků v Shopify.

Shopify za vás udělá spoustu těžké práce:

• Používá CDN, takže soubory obrázků jsou zkopírovány a distribuovány mezi servery po celém světě a každý návštěvník obchodu uvidí obrázek vykreslený ze serveru, který je mu nejblíže.
• Dělá obrázky responzivními, což znamená, že v kódu je uvedeno několik rozměrů a každý uživatel vidí obrázek přizpůsobený možnostem obrazovky svého zařízení.
• Automaticky aplikuje kompresi, což šetří zdroje pro rychlejší načítání stránek.

Všechna tato opatření jsou skvělá, ale stále existuje několik způsobů, jak optimalizovat obrázky pro e-shop. Zde je 8 věcí, které byste měli zvážit, aby byly obrázky vašeho obchodu atraktivní pro zákazníky i vyhledávače.

1. Shopify komprese nebo jiné nástroje pro kompresi obrázků

Ke zpomalení rychlosti načítání nejvíce přispívají obrázky. Rychlost je však z hlediska SEO a uživatelské zkušenosti zásadní. Ke zvýšení rychlosti webu využijte Chcete-li zrychlit web, použijte některý z nástrojů pro kompresi obrázků. 

Všimněte si, že je lepší používat formáty PNG nebo WebP protože jsou schopny bezeztrátové komprese ve srovnání s JPEG, který zmenšením velikosti ztrácí na kvalitě.

Možná vám ale postačí nativní komprese obrázků přímo v Shopify. To znamená, že poté, co na svou stránku nahrajete soubor, Shopify jej automaticky zkomprimuje. Proto Shopify doporučuje vždy nahrávat v té nejlepší kvalitě, jakou máte.

Shopify však ne vždy odvádí nejlepší práci a nenechává na vás žádnou volbu, jak velké komprese chcete dosáhnout. Někdy vypadají fotografie příliš rozmazaně a někdy naopak automatická komprese nestačí. Vlastníci e-shopů snažící vyhnout se automatické kompresi přišli s řešením, jak upravit kód a změnit poměry obrázků na „master“.

Pokud nejste spokojeni s tím, jak Shopify zobrazuje nahrané obrázky, můžete použít tento trik. Nezapomeňte však své vizuály komprimovat ručně. K tomu existuje spousta nástrojů (např. Aplikace pro optimalizaci obrázků Shopify), některé umožňují upravit úroveň komprese a porovnat výsledek s původním obrázkem.

Dekorativní obrázky, které nesouvisí s produkty, mohou také zpomalovat načítání stránky. Nezapomeňte též minimalizovat jejich velikosti. Někdy je lepší vlastní CSS místo obrázků, které slouží jako barevné stylingové prvky.

2. Používejte popisné názvy souborů a alt texty

Jména souborů, které nahrajete do Shopify jsou prohledávány vyhledávači stejně jako text na stránkách. Fotografie produktů můžete mít ve výchozím nastavení pojmenovány fotoaparátem (například IMG_421.jpg) – tyto obecné názvy budete muset upravit. Nejlepší volbou je zkombinovat název produktu a jeho značku a/nebo model: například Smoothie-Blender-Blendjet-2.

Způsob, jakým pojmenováváte obrázky produktů, by měl korelovat s tím, co píšete v názvech a nadpisech stránek produktů. Cílem je přesně popsat, co je na stránce prezentováno, stejně jako na každém jednotlivém obrázku. Analyzujte, jaké vyhledávací výrazy lidé používají pro typy produktů, které prodáváte, a začleňte tyto výrazy do názvů souborů. Nepoužívejte klíčová slova nadměrně – místo toho napište čtivou a jednoduchou frázi.

Jak vám to pomůže? Popisné názvy souborů bohaté na klíčová slova vám pomohou dosáhnout vyšší pozice v běžném vyhledávání i v Obrázcích Google.

Pamatujte, že po nahrání nelze názvy souborů změnit. Chcete-li dodatečně upravit názvy souborů, musíte je znovu nahrát.

Pro SEO je důležitější, co specifikujete v alt textu. Alt je atributem img tagu, který se zobrazí, když prohlížeč nezobrazí snímek. Slouží také jako vysvětlení pro zrakově postižené uživatele.

U každého obrázku produktu je důležité vyplnit alternativní text. Postupujte podle stejných pravidel jako u názvů souborů: Uveďte, jaký typ a model produktu je na obrázku, ale nekopírujte pouze to, co již máte v názvu stránky, názvu obrázku nebo jinde. Analytici Google doporučují popis toho, co je na obrázku, místo opakování názvu produktu. Vyhněte se také používání komerčních klíčových slov (Nakupte slunečník na terasu“).

Práce s alt texty v Shopify je jednoduchá. Otevřete produkt a v sekci Multimédia klikněte na některý ze snímků. Alt pole najdete vpravo.

Jak vám to pomůže? Užitečný alternativní text vám zpřístupní vaše stránky pro více zákazníků.

3. Ujistěte se, že jsou vaše obrázky responzivní

Jak jsme již zmínili, Shopify používá responzivní obrázky, které se přizpůsobí obrazovce každého uživatele. Může se však stát, že některé Shopify šablony  třetích stran automaticky nepodporují responzivní vizuály. Pokud uvažujete o změně Shopify šablony, věnujte tomu pozornost při jejím výběru.

V každém případě můžete vždy ručně zadat několik rozměrů. Za tímto účelem musíte upravit kód šablony a vyplnit srcset atribut v img štítku. Může to vypadat takto:

4. Ukažte více fotografií produktu a buďte konzistentní

Cílem produktových fotografií je přilákání více zákazníků. Neomezujte se proto jen na jeden obrázek – zahrňte různé fotky, které zobrazují produkty z různých úhlů a v reálném prostředí. Tímto způsobem zvýšíte důvěryhodnost produktu a zákazníci získají lepší představu o jeho kvalitě a užitečnosti.

Studie zalistování nabídek na eBay ukázala, že dva obrázky produktů zdvojnásobily míru prodejů ve srovnání s pouhým jedním. Ale o kolik více jich opravdu potřebujete? Na to neexistuje univerzální odpověď. Může ale pomoci AB testování, abyste zjistili, co prodává nejlépe: více obrázků pro předvedení funkcí produktu nebo méně obrázků pro zrychlení obchodu. Pomocí heat-map můžete také zjistit, s jakými typy produktových fotografií návštěvníci nejvíce interagují.

Totéž platí pro kolekce/kategorie produktů: experimentujte s tím, kolik produktů zobrazit na jedné stránce. Všimněte si, že Shopify nastavuje maximální limit na 50.

Když použijete více produktových obrázků, ujistěte se, že miniatury zobrazené na stránkách kolekcí jsou konzistentní. Ne úplně dobře vypadá, když jsou některé produkty nafocené zepředu a jiné zezadu. Naopak lépe vypadá, když jsou všechny prezentované produkty nafoceny ve stejném stylu. Můžete také, pokud používáte videa nebo 3D modely, vytvářet náhledy s vysoce kvalitním obrázkem – jinak Shopify tyto miniatury automaticky vygeneruje.

5. Přidejte zoomovatelné obrázky

Výzkum ukazuje, že schopnost přiblížit vysoce kvalitní obrázky vede k trojásobně vyššímu konverznímu poměru (spolu s možností vidět více pohledů a barev produktu). Existuje několik způsobů, jak toho dosáhnout.

Pokud máte ve svém týmu vývojáře (nebo si najmete specialisty), můžete  jednoduše přidat funkce zoomování pomocí JavaScriptu, konkrétně JS knihovny JQuery nebo JS frameworku Vanilla.

Můžete si také vybrat aplikace pro přiblížení obrázků, například:

• Full Page Zoom App přidá k vašim obrázkům ikony přiblížení a oddálení, což uživatelům umožní vychutnat si zobrazení produktu na celé obrazovce. Stojí 2,99 $ měsíčně a zahrnuje 30denní bezplatnou zkušební verzi.
• Magic Zoom Plus umožní přiblížení náhledu při najetí myší a úplné zobrazení po kliknutí. Doživotní licence stojí 69 USD, ale aplikace si také může účtovat měsíční poplatek za další funkce, jako je 360° ​​otočení produktu.

6. Vytvořte image sitemap

Sitemap je seznam všech stránek obchodu, které chcete zobrazovat ve výsledcích vyhledávání. Shopify automatizuje proces vytváření a formátování. A jediné, co musíte udělat, je odeslat mapu webu do vyhledávačů. Se souborem generovaným Shopify však nemáte velkou flexibilitu a bohužel neobsahuje obrázky.

Dává tedy smysl vytvořit samostatný image sitemap. Je to další způsob, jak pomoci vyhledávačům objevit fotografie vašich produktů a dobře je ohodnotit. K vytvoření takového souboru můžete použít aplikaci Image Sitemap.

7. Implementujte lazy loading

Pokud máte na e-shopu mnoho obrázků, mohlo by být efektivnější načíst je asynchronně. Technika lazy loading nenačte vše, co máte na stránce, hned, ale postupně. Zobrazí části obsahu až v momentě, kdy k nim návštěvník webu doscrolluje.  Je to skvělý spořič rychlosti načítání a zároveň SEO booster, zejména vzhledem k tomu, že aktualizace Core Web Vitals z roku 2021 nehodnotí, jak rychle se načítá celá stránka, ale jak rychle je připraveno první vykreslení (což znamená “above-the-fold” obsah).

Kontrolu můžete spustit pomocí Performance Insights v Chrome Dev Tools: bude vizualizovat, co může blokovat vykreslování stránky a jak dlouho trvá načtení LCP (“largest contentful paint”, který je pro vyhledávače zásadní) a než se stránka stane interaktivní (viz TTI, time to interactive).

8. Zvažte virtuální fotografii

Jak technologie postupuje, poptávka po inovativních, interaktivních nákupních zážitcích roste. Abyste ukázali produkty z různých úhlů a v praktickém použití,můžete kromě fotek a videí, implementovat virtuální fotografii.

Co to znamená? Existují softwarová řešení, která vytváří nebo upravují obrázky na základě digitálních návrhů – bez skutečného fotografování fyzického produktu. Umí také 3D fotky produktů, což umožní zákazníkům prohlédnout si je z více úhlů.

Tato vychytávka může být obzvlášť užitečná, pokud nabízíte customizaci produktu, např. různé barvy a tvary pohovek. Díky tomu nemusíte fotit všechny nabízené typy sedacích souprav, ale díky virtuálnímu grafickému softwaru ukážete různé tvarové a barevné varianty. Podívejte se na řešení, které má Threekit. Podobně by to mohlo fungovat ve vašem e-shopu.

Jednoduchá optimalizace obrázků v Shopify

Díky těmto tipům bude váš obchod rychlejší a bude generovat více nákupů. Navíc zvýšíte Google ranking e-shopu i jednotlivých obrázků.  Možností je mnoho. Můžete zkusit ruční optimalizaci, najmout si specialistu nebo vsadit na ty správné nástroje a SEO aplikace, které vám ušetří spoustu času a rychleji zdokonalí váš e-shop.

Pokud si přejete dosáhnout ještě lepších výsledků při optimalizaci rychlosti svého Shopify e-shopu, doporučujeme vám využít naši profesionální optimalizace rychlosti e-shopu. Naši odborníci vám pomohou vytěžit maximum z vašeho obchodu a zajistit, že vaše stránky budou rychlé a efektivní. Nechte nás zlepšit váš e-shop ještě více!