Jak vybrat správné obrázky na web: pohledem zákazníka i vyhledávačů

Obrázky tvoří neodmyslitelnou součást webových stránek. Jsou jedním z faktorů, které ovlivňují, jak rychle se bude web načítat, na jakých pozicích se bude zobrazovat (SERP) a do jaké míry bude web responzivní. Proto obrázky vybírejte nejen tak, aby zaujaly návštěvníky webu, ale také internetové vyhledávače. V tomto článku se dozvíte, jak si zajistit kvalitní obrázky pro web se správným formátem, velikostí i licencí a jak je optimalizovat (SEO), abyste zvýšili viditelnost vašeho webu ve vyhledávačích.

Kde sehnat kvalitní obrázky na web

Nejčastější otázka při tvorbě webu a obsahu zní: kde vzít obrázky a nekrást, tedy neporušit autorská práva? Máte několik možností a každá přináší výhody a nevýhody.

Bezplatné fotobanky

Obrázky na web zdarma nabízejí fotobanky jako Unsplash, Pixabay nebo Pexels, které nabízejí tisíce fotografií zdarma. Vždy si u obrázku zkontrolujte tzv. licenci. Někdy můžete obrázek použít bez uvedení zdroje, většinou ho uvést máte. Nevýhodou bezplatných fotobank je, že tam specifická témata často vůbec nenajdete, anebo nevypadají až tak dobře. A pokud je najdete, hrozí, že stejný obrázek použije i hodně dalších webů, včetně vašich konkurentů, což pak ohrožuje vaši brand recognition, tedy rozpoznání značky.

Placené fotobanky

Placené fotobanky jako Shutterstock, Getty Images nebo Adobe Stock nabízejí jednak kvalitnější fotografie, jednak širší záběr témat. Ceny začínají kolem 10 dolarů za obrázek, nebo si můžete koupit měsíční balíček. Předplatné se vám vyplatí zvlášť pokud používáte obrázky i na tiskoviny, protože placené fotobanky nabízejí obrázky i ve větším rozlišení vhodném pro velkoplošný tisk (takové rozlišení však pro web nepotřebujete, tam se naopak snažíte o co nejmenší).

AI nástroje

Například DALL-E a Midjourney získávají na popularitě. Jejich ovládání je čím dál jednodušší, výstupy dosahují kvality nerozeznatelné od reality a autorská práva momentálně nikdo nepostihuje. To se však může do budoucna změnit, jelikož generativní AI čerpá z obsahu, který je autorskými právy chráněný.

Canva

Canva tvoří samostatnou kategorii, protože demokratizovala grafický design. V jednoduše ovladatelném prostředí se orientuje i laik a pomocí šablon a drag&drop funkce (táhni a pusť, tedy kliknutím myši) vytvoří obrázky všeho druhu. Když přidáte teoretické znalosti o grafickém designu, budete schopní vytvořit obrázky i na profesionální úrovni. Navíc tento program je dnes propojený jak s fotobankami, tak s AI funkcemi, takže představuje kompletní řešení. Existuje jak bezplatná omezená verze, tak placená.

Vlastní ilustrace a fotky na web

Nechat si obrázky vytvořit na míru by samozřejmě bylo nejlepší, co se týče unikátnosti i kvality. Na druhou stranu to je poměrně nákladné řešení. Vždy se musíte řídit vlastním rozpočtem, strategií a situací. Obecné doporučení je, že na blog a do newsletterů stačí převzaté obrázky. Na hlavní web by bylo lepší mít vlastní. Pokud dáváte na web recenze nebo reference s fotografiemi, vždy by měly být reálné. Nic nenaruší důvěru zákazníka tolik jako reference od „pána z fotobanky“, i kdyby text byl reálný.

Pozor na falešné autory práv

Mějte se na pozoru před podvodníky, kteří rozesílají falešné pokuty za údajné porušení autorských práv. Skuteční vlastníci licencí vás většinou nejdřív kontaktují přímo s žádostí o odstranění obrázku. Pokud dostanete podezřelý e-mail s požadavkem na okamžitou platbu, raději si práva k obrázku ověřte u oficiálních zdrojů.

Formáty obrázků a jejich použití

• Správný výběr formátu přímo ovlivňuje rychlost načítání webu a kvalitu zobrazení na různých zařízeních. Každý formát má specifické využití založené na typu obsahu a technických požadavcích.
• JPEG zůstává standardem pro fotografie s bohatou barevnou paletou. Kompresní algoritmus efektivně redukuje velikost souborů na úkor mírné ztráty kvality. Optimální nastavení kvality se pohybuje mezi 75–85 %. Nižší hodnoty způsobují viditelné zhoršení kvality obrázku, jako je rozmazání ostrých hran, barevné posuny a „duchy“. Vyšší zbytečně zvyšují velikost souboru. JPEG nepodporuje transparentnost.
• PNG využívejte pro grafické prvky, loga nebo snímky s transparentním pozadím, což JPEG neumí. Pro jiné obrázky však spíš PNG nepoužívejte, protože při stejné kvalitě bývají větší. JPEG se dokáže s fotografií s rozumnou kvalitou (kolem 80 %) vejít do 50–80 kB, zatímco stejná fotka v PNG by měla třeba 300–500 kB.
• WebP představuje moderní alternativu s 25–35 % menší velikostí než JPEG při srovnatelné kvalitě. Podporuje transparentnost i animace. Hlavní nevýhodou je nekompatibilita se staršími prohlížeči, jako je starší Safari a Internet Explorer. Pokud tyto prohlížeče vaše cílová skupina používá (což zjistíte v Google Analytics), máte 2 možnosti. Buď raději použijte JPEG, nebo implementujte fallback řešení, což zjednodušeně znamená, že vy nahrajete oba a prohlížeč si vybere, který zobrazí. Toto ale řešíte jen s frontend vývojářem, ne pokud máte krabicové řešení webu typu Wordpress.
• AVIF dosahuje ještě vyšší kompresní účinnosti než WebP, ale podpora v prohlížečích je zatím omezená.
• SVG slouží pro vektorovou grafiku – ikony, loga nebo jednoduché ilustrace. Soubory jsou malé, škálovatelné na jakékoliv rozlišení a editovatelné pomocí CSS. SVG se načítá jako kód, což umožňuje interaktivní efekty.

Podpora formátů v prohlížečích. Zdroj: https://photutorial.com/image-format-comparison-statistics/

Jak optimalizovat velikost obrázků

Při optimalizaci obrázků řešíte dvě nezávislé věci – rozměry v pixelech a velikost datového souboru. Obě přímo ovlivňují rychlost načítání a uživatelský zážitek.

Rozměry v pixelech

Rozměry určují, jak velký obrázek bude na obrazovce. Větší rozměry neznamenají automaticky větší datový soubor, ale zbytečně velké obrázky zpomalují rendering stránky.

• Pro články a blogové příspěvky používejte šířku 800–1200 pixelů. Tato velikost dobře funguje na desktopu i mobilech a nepůsobí „rozpixelovaně“ ani při zvětšení. Menší obrázky (600–800 px) stačí pro doprovodné fotografie v textu.
• Náhledy a thumbnaily optimalizujte na 300–400 pixelů šířky. Větší rozměry jsou zbytečné. Náhled slouží jen k rychlé orientaci a při kliknutí se většinou otevře větší verze.
• Hero obrázky a bannery vyžadují minimálně 1920 pixelů šířky kvůli velkým monitorům. Na mobilech se automaticky zmenší, ale na desktopu musí pokrýt celou šířku obrazovky.

Velikost datového souboru

Datová velikost určuje, kolik času zabere stažení obrázku. Každý kilobajt navíc znamená delší čekání, zejména na pomalém připojení.

• Běžné obrázky v článcích by měly mít maximálně 100–150 kB. Této velikosti dosáhnete u JPEG s kvalitou 75–80 %. Pokud potřebujete menší soubory, snižte kvalitu na 70 % nebo zmenšete rozměry.
• Hero obrázky a důležité vizuály můžete zvětšit až na 300 kB, ale jen výjimečně. Návštěvníci očekávají rychlé načtení hlavní stránky.
• Thumbnaily a ikony udržujte pod 50 kB. Často se jich načítá více najednou a každý kilobajt trvá.

Pro kompresi využijte nástroje jako TinyPNG, který automaticky odstraní zbytečná data bez viditelné ztráty kvality. Photoshop nebo GIMP umožňují ruční nastavení kvality při exportu. Experimentujte s různými hodnotami a najděte optimální poměr kvality a velikosti.

Obrázky a SEO

Správně optimalizované obrázky zlepšují pozice ve vyhledávání a usnadňují indexaci stránky.

Alt texty popisují obsah obrázku pro nevidomé uživatele a vyhledávače. Pište konkrétně – místo „obrázek produktu“ použijte „černé kožené boty Nike Air Max velikost 42“. Nezapomeňte klíčová slova, ale nepřehánějte to.

Názvy souborů ovlivňují SEO více, než si myslíte. „IMG_1234.jpg“ nic neříká, „moderni-kuchyne-bila-leskla.jpg“ ano. Používejte pomlčky místo mezer a udržujte názvy krátké.

Správně zvolený obrázek pocítíte ve vyhledávačích i v chování zákazníků

Kvalitní webové obrázky nejsou luxus, ale nutnost pro konkurenceschopný web. Kombinace správného formátu, optimálních rozměrů a promyšleného obsahu rozhoduje o rychlosti načítání i konverzních poměrech. Investujte čas do výběru vhodných zdrojů a technické optimalizace – rozdíl pocítíte jak ve vyhledávačích, tak v chování návštěvníků. Začněte s jednoduššími nástroji a postupně přidávejte pokročilejší techniky podle potřeb vašeho projektu.