Jak správně integrovat obrázky na webové stránky: osvědčené postupy

Ve Webkompletu často vytváříme webové stránky pro klienty, zejména na WordPressu. Tento CMS (Content Management System) vám umožňuje snadno spravovat svůj web i bez pokročilých znalostí programování.

Při auditech různých webových stránek si však často všímáme, že práce s obrázky nebývá vždy optimální.

Obrázky jsou přitom klíčovým prvkem každé webové stránky. Pomáhají vizuálně podpořit sdělení, přitahují pozornost čtenářů, zvýrazňují produkty a motivují k nákupu. Nicméně, krásná fotografie může mít i svou stinnou stránku: čím větší je její velikost (datová náročnost), tím více zpomaluje načítání stránky. Vzhledem k rostoucímu počtu zařízení a různým rychlostem internetového připojení jsou výkon webu a rychlost načítání stránek naprosto zásadní.

V tomto článku vám proto nabízím přehled osvědčených postupů pro práci s obrázky na webu a tipy, jak správně optimalizovat váš vizuální obsah.

Vyberte vhodné obrázky

Kvalita a relevance

• Zvolte obrázky, které odpovídají vašemu obsahu. Může to znít jako samozřejmost, ale pokud například píšete článek týkající se péče o koně, neměli byste jej ilustrovat fotografií pračky.
• Vyhýbejte se rozmazaným nebo pixelovým obrázkům. Pokud je to nutné, ořízněte je nebo upravte tak, aby byly vizuálně atraktivnější. Níže vám představíme užitečné nástroje pro úpravu obrázků.
• Obrázky by měly ladit s hodnotami a image vaší značky. Například fotografie punkové skupiny, která ukazuje prostředníček, pravděpodobně nebude nejvhodnější volbou pro web domova důchodců.

Používejte originální vizuály

V ideálním případě byste měli využívat unikátní obsah – tedy fotografie nebo grafiky, které jste sami vytvořili. Vyhnete se tak duplicitě, která může negativně ovlivnit SEO (Google penalizuje duplicitní obsah, včetně obrázků).

Pokud však musíte použít obrázky z fotobank, postupujte podle pravidel v sekci níže.

Pokud chcete mít vizuály, které vás odliší, můžete využit nástroje jako Canva, který umožňuje snadnou tvorbu vlastních grafik.

V dnešní době je možné generovat obrázky pomocí umělé inteligence. Existuje řada nástrojů, které umožňují vytvářet vizuální obsah na základě textového zadání, například DALL·E, Midjourney nebo Stable Diffusion. Tyto technologie mohou být užitečné pro rychlou tvorbu grafiky, ilustrací nebo konceptů.

V profesionálních projektech je důležité ověřit si práva k použití obrázků generovaných umělou inteligencí v souvislosti s jejich zamýšleným využitím. To zahrnuje kontrolu podmínek používání daného nástroje, které specifikují práva a povinnosti uživatelů. Některé platformy, jako například Adobe Firefly, zaručují, že vygenerované obrázky jsou bez autorských omezení a mohou být použity pro komerční účely. Tato záruka je možná díky databázi trénovacích dat nástroje, která obsahuje pouze licencovaný nebo volně dostupný obsah.

Používejte obrázky s volnou licencí

Ačkoli internet nabízí miliony volně dostupných obrázků, neznamená to, že je můžete použít bez omezení. Veškerý obsah publikovaný na webu podléhá autorským právům – včetně příspěvků na sociálních sítích. Každé užití cizího obrázku teoreticky vyžaduje souhlas jeho autora.

Jak tedy legálně používat fotografie na internetu? Máte tři hlavní možnosti:

• Používat obrázky pod licencí Creative Commons
• Používat obrázky, které spadají do veřejné domény
• Kupovat obrázky s placenou licencí

Licence Creative Commons (CC)
Creative Commons je nezisková organizace, která usnadňuje sdílení a využívání kreativních děl. O různých typech licencí si můžete přečíst zde: https://creativecommons.org/share-your-work/cclicenses/ (v angličtině).
Mnoho obrázků s CC licencí můžete volně kopírovat, upravovat i remixovat. Nicméně, v mnoha případech musíte uvést autora a přidat odkaz na původní dílo. Vždy si ověřte, zda můžete obrázek použít bez uvedení zdroje; například na webu Unsplash je to jasně uvedeno:

Zde jsou dva příklady webů, kde můžete najít obrázky, které nevyžadují uvedení zdroje:
✔ Unsplash (https://unsplash.com/)
✔ Pixabay (https://pixabay.com/)

Obrázky z veřejné domény.
Veřejná doména znamená, že obrázek lze používat bez jakýchkoli omezení, a to i pro komerční účely. Obrázky můžete najít například na tomto webu:
✔ Public Domain Pictures (https://www.publicdomainpictures.net/). Před použitím obrázku se ujistěte, že obsahuje zmínku „Licence: CC0 Public Domain“.

Placené fotobanky.
Možná si říkáte – proč platit za obrázky, když existuje tolik bezplatných zdrojů?
Za prvé, kvalita bezplatných obrázků je někdy náhodná. Pak nejsou exkluzivní: riskujete, že stejnou fotografii uvidíte u svých konkurentů. Kromě toho jejich „obecná“ a neosobní stránka nutně nevybízí čtenáře, aby se ponořil do obsahu.

Mezi nejznámější placené databáze patří:
✔ Shutterstock (https://www.shutterstock.com/)
✔ Getty Images (https://www.gettyimages.com/)
✔ Adobe Stock (https://stock.adobe.com/)

Můžete si sami vytvořit vlastní obrázky bez autorských práv!

Nejjednodušším řešením pro ilustraci vašeho webu může být pořízení vlastních fotografií. I když to není možné ve všech oborech, tato metoda zaručuje originalitu a eliminuje problémy s autorskými právy. K dosažení dobrých výsledků často stačí i obyčejný smartphone.

Pokud nenajdete vhodné obrázky, můžete si vytvořit vlastní ilustrace pomocí nástrojů, jako jsou Canva nebo Photopea. Tyto platformy vám umožní přidávat text a přizpůsobit vizuální obsah podle vašich potřeb.

Doufám, že nyní máte jasnější představu o tom, jaké obrázky můžete na svůj web použít. Ale tím vaše práce nekončí – než obrázky zveřejníte, musíte je optimalizovat pro web!

Zvolte formát optimalizovaný pro web

V digitálním světě, kde se výkonnost webu a rychlost načítání stránek stávají klíčovými strategickými faktory, je výběr správného formátu obrázků zásadní.

Obecně existují čtyři hlavní formáty obrázků: JPEG (JPG), PNG, GIF a SVG.

Abychom vám pomohli vybrat ten nejlepší, mějte na paměti následující doporučení:

• JPEG (JPG) – Nejlepší volba pro fotografie a obrázky s širokou paletou barev. Tento formát je nejrozšířenější na webu, protože umožňuje dosáhnout vysoké kvality při zachování optimální velikosti souboru.
• PNG – Vhodný zejména pro schémata, jednoduché ilustrace, loga nebo obrázky s průhledností. Tento formát je ideální pro prvky vyžadující průhledné pozadí nebo různé úrovně opacity. Pozor! PNG soubory mohou být 5–10krát větší než JPEG. Pokud průhlednost nepotřebujete, volte raději JPEG.
• GIF – Doporučuje se pro animované prvky. GIF může obsahovat více snímků v jednom souboru, ale podporuje pouze 256 barev, což znamená, že není vhodný pro kvalitní fotografie. Důležité: GIF soubory mohou být velmi velké, proto je doporučuji před nahráním na web komprimovat pomocí nástroje Ezgif.
• SVG – Jedná se o vektorový formát, který místo pixelů používá matematické výpočty k vykreslení obrázků. Díky tomu je škálovatelný na jakoukoli velikost bez ztráty kvality. Ideální pro loga, ikony a další grafické prvky, které se používají na více místech webu.
• WebP – Google doporučuje používat svůj vlastní formát WebP, který dokáže snížit velikost obrázků o 30 % nebo více při zachování vysoké kvality. Nevýhoda? WebP není zatím podporován všemi prohlížeči, například starší verze Safari nemusejí formát plně podporovat.

Vyberte formát podle potřeb vašeho webu a optimalizujte obrázky pro rychlé načítání a plynulý uživatelský zážitek!

Optimalizujte velikost obrázků

Aby se webová stránka dobře umístila ve výsledcích vyhledávání, Google bere v úvahu (mimo jiné) rychlost jejího načítání. Protože obrázky často tvoří více než polovinu celkové velikosti stránky, je nezbytné je před nahráním optimalizovat. Obecně platí, že velikost stránky by neměla přesáhnout 2 MB. Jen několik příliš velkých obrázků (a někdy i jediný) může tento limit rychle překročit.

Přizpůsobte rozměry obrázku

Prvním krokem optimalizace je kontrola rozměrů a rozlišení souboru. Často se stává, že fotografie jsou nahrány se šířkou přes 3 000 px a se zbytečně vysokým rozlišením, což způsobuje, že jejich velikost přesahuje 1 MB. Takové chyby výrazně zpomalují načítání stránky.

Ideální je přizpůsobit rozměry obrázků podle jejich použití. Například pokud potřebujete profilový obrázek o šířce 150 px, není nutné nahrávat soubor široký 3 000 px! Naopak, pokud obrázek pokrývá celou šířku stránky, doporučuje se šířka kolem 2 000 px. Pokud je obrázek příliš malý, zobrazí se rozmazaně nebo pixelizovaně, což působí neprofesionálně.

Exportujte obrázek pro web

Při exportu pro web můžete:

• Zvolit správný formát
• Změnit rozměry (pokud jste to ještě neudělali)
• Upravit úroveň komprese (vyvážit kvalitu a velikost souboru)

Neexistuje univerzální pravidlo pro maximální velikost obrázků, ale obecně platí:

• Běžné obrázky by neměly přesáhnout 100 KB
• Velké obrázky by měly být pod 300 KB
• Středně velké obrázky mohou výjimečně přesáhnout 100 KB

Níže vám vysvětlím, jak můžete své obrázky optimalizovat pomocí dvou bezplatných nástrojů: Photopea a Squoosh.

Optimalizovat obrázek pomocí Photopea (https://www.photopea.com/).

V pracovním prostoru Photopea otevřete svůj obrázek.
Pak klikněte na „Soubor“ > „Uložit jako“ > jpg (Pamatujete? Vyberte JPG formát, pokud je obrázek komplexní fotografie ;)).

Snižte velikost obrázku (který vidíte dole v kB) snížením kvality.

Záleží pak na vás, abyste našli dobrý kompromis mezi kvalitou a velikostí obrázku. Obecně je lepší mít větší obrázek (v pixelech) s nižší kvalitou (v kB).

Optimalizovat obrázek pomocí Squoosh (https://squoosh.app/).

Nahrajte obrázek kliknutím na ikonu.

Vlevo vidíte původní soubor, vpravo možnosti komprese a úrovně kvality obrazu. Můžete si hrát s posuvníky, dokud nenajdete správný poměr komprese/kvalita.

Poznámka:
Poměr kvalita/komprese může být skutečná výzva, pokud váš web vyžaduje velmi kvalitní obrázky – například pokud jste fotograf a chcete prezentovat svou práci.
Displeje s vysokým rozlišením u některých zařízení, jako jsou produkty Apple, vyžadují nahrání obrázků dvakrát větších, než je dostupný prostor, aby nevypadaly rozmazaně.
Například: Pokud má váš oddíl šířku 600 px, ideální je nahrát obrázek široký 1 200 px. Abyste ale udrželi přijatelnou velikost souboru, bude nutné výrazně snížit kvalitu…

Udělejte své obrázky SEO-friendly

SEO znamená Search Engine Optimization (optimalizace pro vyhledávače). Když mluvíme o SEO u obrázků, máme na mysli jejich optimalizaci pro vyhledávače.

Kromě zlepšení výkonu vašeho webu může optimalizace obrázků také zvýšit vaši viditelnost. Ve skutečnosti je optimalizace obrázků pro vyhledávání důležitou disciplínou – vyhledávání přes Google Images se může stát významným zdrojem návštěvnosti pro vaši firmu.

Abyste maximalizovali své šance objevit se na předních pozicích ve výsledcích Google Images, je klíčové přidat relevantní informace na správná místa. Je žádoucí pomáhat vyhledávacím robotům tím, že jim poskytneme srozumitelné textové prvky.

Správně pojmenujte své obrázky

Prvním krokem je přejmenování souboru před jeho nahráním. Například fotografie koně na poli s názvem „DSC_00059871.JPG“ by měla být přejmenována na „kun-na-poli.jpg“. Tím poskytneme první informaci, která definuje obsah obrázku.

Důležité doporučení:

• Používejte spojovníky „-“ místo podtržítek „_“.
• Nepoužívejte velká písmena ani diakritiku.

Google totiž neinterpretuje podtržítka a chápe například „kun_na_poli“ jako „kunnapoli“, což není ideální pro SEO.

Optimalizujte atribut „alt“ pro SEO

Atribut alt (alternativní text) slouží k popisu obrázku a zobrazí se, pokud se obrázek nepodaří načíst (například kvůli pomalému připojení nebo chybě na stránce).

Dva hlavní důvody, proč je alt text důležitý:

1. Zlepšuje přístupnost webu pro uživatele, kteří nemohou vidět obrázky – například nevidomí, kteří používají čtečky obrazovky. Google uvádí, že tento atribut se čte nahlas pomocí čtečky obrazovky a pomáhá lidem s postižením.
2. Pomáhá vyhledávačům pochopit obsah obrázku a tím zlepšuje jeho indexaci ve vyhledávání.

Ve WordPressu můžete atribut „alt“ snadno upravit v knihovně médií:

Nezapomeňte vyplnit tento atribut u každé své fotografie, je to důležité. Cílem je stručně a informativně popsat váš obrázek, přirozeně do něj začlenit klíčové slovo (bez nadměrné optimalizace) – tak, jako byste jej popisovali někomu, kdo ho nevidí.

Například pro tuto fotografii bych napsala:
„Žena v bílém tričku stojící vedle hnědého koně.“

Co se týče délky alt tagu, neexistuje žádné přesné pravidlo. Doporučuje se krátký formát (několik slov stačí) a je lepší nepsat dlouhý odstavec.

Shrnutí

• Používejte kvalitní a relevantní obrázky
• Využívejte legální zdroje obrázků
• Optimalizujte velikost a formát
• Nezapomínejte na SEO – správné názvy souborů a ALT texty

Díky těmto krokům zlepšíte výkon svého webu, přispějete k lepšímu SEO a zajistíte, že vaše obrázky budou vypadat skvěle!