1. Styly

Obrázky

Slouží k vizuální podpoře sdělení a ilustraci obsahu

Doporučení pro použití

Obrazovým doprovodem lze vizuálně podpořit celkové sdělení textu. Snímky v záhlaví stránky tak například usnadňují orientaci mezi stránkami a mohou uživatelům pomoci pochopit záměr a kontext textu. Obrázky v obsahu stránky sloužící k ilustraci textu však používejte s rozmyslem a pouze v případě, že to uživatel skutečně potřebuje.

Licenční pravidla

Na obrázky a fotky se vztahuje autorský zákon a licence, vyvarujte se tedy použití fotografií stažených bez vědomí autora, resp. držitele autorských práv. Doporučujeme používat vždy jen fotografie s jasným původem a ošetřenou licencí.

Zdroje fotek

Fotografie lze zakoupit na placených fotobankách, případně na některé z bezplatných databází. Vždy si však před stažením obrázku přečtěte licenční podmínky daného serveru či sekce. Mezi volnými obrázky se mohou nacházet i placené nebo na ně odkazují na placený server.

Placené fotobanky

Bezplatné fotobanky

Použití obrázků

Obrázky pomohou lépe strukturovat text, přitáhnout pozornost tam, kde je potřeba a vylepšit celkový uživatelský dojem. Je ale nutné dodržovat některá pravidla.

Rozlišení fotek

Vždy používejte fotky v dostatečném rozlišení. Pokud se rozhodnete použít obrázek, jehož rozměry jsou menší než v cílovém umístnění, obrázek bude nekvalitní. Otestujte vhodné velikosti pro konkrétní stránku a zařízení a ujistěte se, že se zdroje nezobrazují rozpixelované. Image resolution

Rozměry

Pokud je na stránce fotka přes celou plochu, např. na pozadí hlavní stránky, její šířka by měla mít alespoň 2500 px.

Objekt na fotce

Počítejte s tím, že obrázek může být oříznutý v závislosti na daném umístění či zařízení, na kterém je stránka zobrazena. Vybírejte tedy obrázky tak, aby ústřední motiv fotky byl co nejlépe vidět za všech okolností. Image crop right Image crop wrong

Text na obrázku

Vyhněte se použití obrázků, které samy obsahují text. Text se může stát nečitelným nebo rozostřeným při změně velikosti obrázku. Pokud pracujete s obrázkem, přes který je text generován, dbejte na dostatečný kontrast. Na příliš světlém, příliš tmavém či vizuálně příliš složitém obrázku v pozadí může být text obtížně čitelný.

Správný a špatný kontrast

Image with text dark bg Image with text light bg

Příliš členité pozadí

Image with text busy bg

Užitečné odkazy

Přístupnost

Aby byly stránky přístupné pro zrakově postižené, snímky by měly zahrnovat alternativní text, který je čten pomocí čteček obrazovky. Bez alternativního textu uživatelé čtečky obrazovky slyší slovo „image“ bez jakýchkoli vizuálních podrobností.

Více o přísupnosti