Optimalizace obrázků pro e-shopy a webové stránky

Každý uživatel dnes při používání internetu očekává skvělý uživatelský zážitek a co nejvyšší rychlost webových stránek. Obrázky tvoří větší část načteného obsahu a mají zásadní vliv na rychlost načítání webové stránky. V tomto úvodu do zpracování obrázků na webu shrnu, jak tento postup použít na vaše projekty, a uvedu několik praktických tipů. 

Co je to optimalizace obrázků?

Optimalizace obrázků pro e-shopy a webové stránky představuje proces, který se zaměřuje na zlepšení rychlosti načítání obrázků s cílem zlepšit uživatelský zážitek. Pravidla pro optimalizaci obrázků jsou samozřejmě také obecná, ale mohou mít i svá specifika v závislosti na typu podstránky, pro kterou obrázky připravujete. Budou se tedy lišit pro domovskou stránku, produkt, kategorii a blog. 

Lepší velikosti obrázků dosáhneme změnou vlastností obrázku pomocí různých parametrů, které nám poskytnou nejkvalitnější a nejvhodnější obrázek s co nejmenší velikostí souboru. Cílem je najít ideální stav s ohledem na kvalitu fotky a rychlost e-shopu. Velikost je ovlivněna především:

• Rozlišení – pokud má fotografie nevhodné rozlišení, je buď nepoužitelná nebo příliš velká.
• Formát – nejčastěji používáme JPG, WebP, SVG a příležitostně PNG.
• Komprese – můžeme ji použít k optimalizaci pro JPEG, WebP, AVIF. Používáme také SVG nebo PNG bez komprese. Ideální je najít rovnováhu mezi kvalitou a velikostí fotky. Další informace o formátech najdete na blogu o formátech obrázků.
• DPI – při auditech jsme i v roce 2022 našli na webové stránce fotky s DPI 240 až 300.

Zásadní je také výběr zdrojové fotky. Pokud je fotografie nesprávná (zejména ostrá, s hloubkou a barvami), bude se hůře optimalizovat. Často je také důležitá správná volba formátu. Například pro logo je vhodný formát SVG.

Někdy se používají obrázky s průhledností, pak je řešením formát PNG. Pokud se ovšem jedná o velké plochy a kvalitní obrázky PNG, může to zásadně zpomalit rychlost webových stránek nebo e-shopu, a proto je lepší se jejich použití při návrhu designu raději vyhnout.

 Příklad optimalizace pro zlepšení velikosti fotografie

Zadání může znít jednoduše. Optimalizujte obrázek pro nový produkt, například silniční kolo Pinarello. Zdroj od výrobce má velikost 6,5 MB ve formátu JPEG. Takto upravený obrázek nemůžeme v e-shopu použít, proto použijeme jednoduchý proces optimalizace.  

1. Otevřeme obrázek v editoru PS. DPI a rozlišení změníme z 8000 x 6000 px na 1600 x 1600 px a 96 DPI.
2. Následně uložíme v kvalitě 12. Obdržíme obrázek v rozmezí 400 až 500 kB.
3. Otevřeme nástroj v cloudu nebo v počítači a uložíme soubor JPEG v kvalitě například 84 ze 100. Získáme 199 kB výstupu ve formátu JPEG.
4. Pokud uložíme stejný soubor ve formátu WebP, jeho velikost klesne na 100 kB.
5. Takto postupujeme i u miniatury produktu, kde při rozlišení 400 x 400 px a formátu WebP získáme na výstupu velikost 10 kB.

Konkrétní obrázky jsou k dispozici ke stažení v článku s příkladem optimalizace obrázků.

Proč se zabývat optimalizací obrázků?

Jak jsem se zmínil v úvodu, celková velikost obrázků se obvykle pohybuje mezi 60 % až do 98 % celkové velikosti načtených dat. Použijte například nástroj Web Page Test a zjistěte kolik % je to u vás.

Při optimalizaci obrázků pro klienty můžeme v extrémních případech zlepšit rychlost načítání až o 900 %, vycházejíc z projektů za posledních 10 let.

Optimalizace však pravděpodobně nikdy nebude zcela optimální, jak by doporučovaly různé nástroje pro kontrolu rychlosti webových stránek, protože je vždy nutné brát ohled i na kvalitu obrázků, nejen na rychlost.

Obrázky tvoří velkou část dat načtených e-shopem a webovou stránkou.

Lepší výsledky v organickém vyhledávání

Pozitivní vliv to může mít i na výsledky vyhledávání. Google upřednostňuje webové stránky, které se rychle načítají. Pokud jsou obrázky optimalizované, organické vyhledávání z toho celkově těží. U jednoho z projektů jsme optimalizovali velikost a formát obrázků pouze v náhledech v kategorii a v detailu produktu. KPI Search Visibility, které sledujeme na vzorku 300 klíčových slov, nám bez jiné aktivity stouplo o 12 %. 

Na příkladu je tedy vidět, že i malé změny a vylepšení optimalizace obrázků mohou pomoci. To samozřejmě zjistíte pouze tehdy, pokud budete pravidelně a dlouhodobě sledovat své pozice a pozice svých konkurentů ve výsledcích vyhledávání.

Drobná změna formátu obrázku pro seznam produktů a produkt přinesla na vzorku dlouhodobě sledovaných 300 klíčových slov zlepšení pozic v organickém vyhledávání o 12 %.

Optimalizované obrázky se budou snadněji zobrazovat ve výsledcích vyhledávání pro obrázky, které jsou stále populárnější. Tam nebude potřeba optimalizovat jen výše zmíněné parametry, ale také pomocné texty obrázků, jako jsou alt tag a atribut title, již přímo ve zdrojovém kódu. Každý moderní e-shop nebo CMS systém by měl mít možnost tyto parametry editovat. 

Lepší uživatelská zkušenost a vyšší míra konverze

Rychlost načítání v kombinaci s použitelným webovým designem znamená lepší uživatelský zážitek. To má také velký vliv na míru konverze. Pokud velké procento obrázků není optimalizováno, může to zhoršit uživatelský zážitek i konverzní poměr. Proto by se na tento proces nemělo zapomínat ani při vytváření e-shopu nebo webové stránky. Při vytváření nového obsahu a přidávání nových produktů mějte nastavený proces, který zajistí, aby byly obrázky co nejlépe optimalizované.

Při pomalejší rychlosti načítání webové stránky klesá konverzní poměr.

Zdroj: CloudFlare blog

Proces optimalizace obrázků

Výše jsme vysvětlili základní výhody optimalizace fotografií a obrázků v e-shopu a na webových stránkách. Níže najdete podrobný návod, jak optimalizovat obrázky, abyste zajistili správnou rovnováhu mezi kvalitou a rychlostí vašeho webu.

Definujte si pravidla a postupy pro konkrétní typy podstránek

Například pro formáty obrázků napříč e-shopem si definujete jednoduchá pravidla pro váš tým a dodavatele. Nevadí, pokud se občas něco poruší, důležité je mít napsáno, co je to optimální.

• Domovská stránka, banner: 1920 x 600 px, JPEG, velikost 50 – 200 kB.
• Produktový obrázek, galerie, detail: 1600 x 1600 px, WebP, velikost 10 – 100 kB.
• Produktový obrázek v detailu produktu, náhled: 600 x 600 px, WebP, velikost 10 – 50 kB.
• Produktový náhled, kategorie: 400 x 400 px, WebP, velikost 5 – 30 kB.
• Blog, článek: 1200 x 800 px, JPEG, velikost 30 – 150 kB.

Tato pravidla pak můžete dodržovat a kontrolovat. Měl by o nich vědět interní tým, ale také externí dodavatel marketingových produktů, obsahu blogů a správy bannerů. Častou chybou je, že agentura vytvoří banner, ale samotný výstup již neoptimalizuje, což může klientovi více uškodit, než mu prospět.

Proces při zpracování obrázků pro web nebo e-shop

• Vyberte si část e-shopu nebo webu, kterou chcete optimalizovat, a definujte si pro ni vlastní postup – soubor kroků, které zrealizujete jednou nebo je budete pravidelně opakovat. Blog bude mít jiný proces než produkt. Rozdílný proces bude mít e-shop prodávající ponožky a e-shop s nábytkem, kde kvalita fotek může být výrazně odlišná.
• Zdrojové obrázky nahrajte na sdílené cloudové úložiště ve zdrojové a optimalizované formě, ať máte vždy k dispozici zdroj pro případ, že budete chtít změnit svůj postup nebo pravidla.
• Vyberte si 1 nebo 2 nástroje, které budete používat. Příklady offline a online nástrojů pro optimalizaci obrázků:
  • Adobe Resize 
  • Compress Now 
  • JPEG Optimizer
  • Tiny PNG
  • Optimizilla
  • JPEG.io
  • ImageRecycle
  • Compressor.io
  • Irfan View
  • Adobe Photoshop
• Prostřednictvím tohoto nástroje oříznete zdrojový obrázek na vámi definované cílové parametry. Zaměřte se na parametry, jako je šířka, výška, DPI, kvalita (komprese) a formát.
• Pokud nejste s výsledkem spokojeni, můžete při ztrátové kompresi (JPEG) použít uložení v jiném nástroji s nižší kvalitou nebo použít jiný formát, například WebP. Dejte však pozor, abyste nepoužili příliš velkou kompresi a nesnížili příliš kvalitu obrazu.
• Takto exportovaný soubor přejmenujte v češtině bez diakritiky a mezery nahraďte pomlčkami, ideálně s hledaným klíčovým slovem. Soubor je připraven k nahrání na webové stránky nebo do e-shopu.
• Je vhodné někde v tabulce evidovat co, kde, kdy a jak s jakými popisnými poli se vytvořilo, abyste mohli v budoucnu systémově přistupovat ke změnám.

Nahrávání obrázků na e-shop nebo web

Ruční přidávání obrázků

Váš e-shop nebo webový CMS systém by měl mít při nahrávání možnost vyplnit základní popisná pole obrázku, která jsou nezbytná pro lepší zobrazení ve výsledcích vyhledávání, indexaci obsahu (robot získá informace o tom, co je na obrázku) a také zlepší přístupnost webové stránky.

• Vyplníme tato popisná pole:
  • Alt je zobrazen v tagu img. Ten je pro vyhledávání a indexaci nejdůležitější. Zobrazí se i v případě, pokud obrázek není načten. Měl by být definován popisem toho, co je na obrázku, ideálně s využitím klíčového slova.
  • Titulek je definován parametrem title v tagu img. Jedná se víceméně o alternativní text.
• WordPress má kromě toho i tato další pole:
  • Nadpis je krátký textový popis, který můžete přidat k obrázkům. Obvykle se používá k poskytnutí dalších podrobností o obrázku.
  • Popis představuje část, která může být matoucí. Obrázky v knihovně médií WordPressu mají vlastní adresu URL. K tomu lze přistupovat na stránce Zobrazit přílohu, kde se tento text zobrazí. Indexování této stránky závisí na nastavení systému CMS.
• Pokud je obrázek již nahraný, stačí jej přiřadit k produktu, kategorii nebo přidat do článku.

Pokud jde o podrobnější možnosti optimalizace obrázků pro Google, tak doporučuji dodržovat i SEO best practices.

Automatizace procesu zpracování obrázků

Výše uvedený postup je méně použitelný pro produktové obrázky z feedů nebo tisíce produktů. Dobrou zprávou však je, že tato pravidla můžete ve spolupráci s programátory uplatnit i na tento typ obsahu. Opět jde jen o to, abyste pravidla, která používáte manuálně, použili a zautomatizovali.

V podstatě vše výše uvedené lze změnit i po technické stránce e-shopu. Pokud vám například váš dodavatel posílá přes feed nebo rozhraní API obrázky PNG v rozlišení 2000 x 2000 px, můžete je změnit na požadované rozlišení 1600 x 1600 px, použít kompresní nástroje a změnit formát například na WebP. Zároveň z nich můžete vygenerovat potřebné velikosti miniatur, do kterých můžete vložit například ještě o něco kvalitnější kompresi.

Totéž platí pro popisná pole. V nich můžete dynamicky generovat a nahrazovat prázdná pole jako alt a titulek s daty z meta titulku a H1. Lepší než mít prázdná pole, je mít tam duplicitní alt. Větší společnosti mají také možnost více pracovat s generováním těchto polí podle určitého klíče na základě analýzy klíčových slov.

Kontrola rychlosti po optimalizaci

Ke kontrole rychlosti vaší webové stránky můžete použít různé nástroje, které často používáme pro vstupní audity webových stránek a e-shopů. Můžete použít například tyto nástroje:

• https://webspeedtest.cloudinary.com/ je nástroj pro analýzu a porovnávání výstupu obrázků v různých formátech.  
• https://www.webpagetest.org představuje nástroj pro detailní analýzu výkonnosti webové stránky.
• https://pagespeed.web.dev/ je nástroj pro základní kontrolu výkonnosti webových stránek s doporučeními na zlepšení přímo od společnosti Google.

Možnosti optimalizace obrázků na straně e-shop řešení

• • Použijte síť CDN (Content Delivery Network). CDN je síť serverů, která slouží k distribuci obsahu po celém světě. Pokud používáte síť CDN, obrázky se načítají rychleji, protože jsou uloženy na serveru v blízkosti uživatele.
  • Nastavte šířku a výšku obrázku v HTML nebo CSS. Tímto způsobem se obrázek načte v požadované velikosti, což znamená, že prohlížeč nemusí zmenšovat nebo zvětšovat obrázek během načítání webové stránky.
  • Používejte „lazy loading“ pro obrázky, které se nacházejí mimo okno prohlížeče. Tímto způsobem se obrázky načítají teprve tehdy, když se uživatel dostane k jejich zobrazení. To znamená, že se obrázky načítají rychleji a uživateli se stránka zobrazí rychleji.

• Využívejte „browser caching“, což je proces, při kterém si prohlížeč ukládá součásti webové stránky jako obrázky, CSS soubory a JavaScript soubory do své vyrovnávací paměti během prvního načtení stránky. Když uživatel stránku znovu navštíví, prohlížeč může použít tyto součásti z mezipaměti, čímž se stránka načte rychleji.

• VPS místo klasického hostingu celkově pomůže rychlosti.

Checklist aneb na co nezapomenout při optimalizaci obrázků v e-shopu

• Na domovskou stránku nepřidávejte mnoho obrázků a bannerů, abyste ji nezpomalovali.  
• Optimalizujte všechny obrázky a nepoužívejte pro fotky formát PNG.
• Používejte obrázky s popisnými poli, nezapomeňte zkontrolovat, zda nejsou prázdné.
• Generujte miniatury obrázků v kategorii ve velikosti, kterou skutečně používáte.
• Využívejte novější formáty WebP, AVIF.
• Využívejte možnosti optimalizace obrázků na straně technického řešení webové stránky.
• Nastavte co nejefektivnější proces optimalizace obrázků, ať už ruční při vytváření blogu nebo automatizovaný.
• Pravidelně analyzujte, testujte a zlepšujte. Na základě zkušeností doporučuji validaci a jednoduchý čtvrtletní audit s návrhy na zlepšení.  
• Nedělejte všechno, protože neuděláte nic. Pokud nemáte lidské zdroje, optimalizujte po částech. Zahrňte optimalizaci obrázků do vašeho projektového plánu při vývoji nebo správě webového projektu. 
• Zkontrolujte také, co vám to přineslo.