Obecná doporučení

Barevné schéma

Při výběru a vytváření obrázků a grafiky zvažte barevné schéma svého webu. Používejte barvy, které ladí s celkovým designem a vytvářejí příjemný vizuální dojem.

Přizpůsobivost

Dbejte na přizpůsobivost grafiky různým obrazovkám a zařízením. Ujistěte se, že se vaše grafika dobře měří a zobrazuje správně na různých rozlišeních obrazovky, včetně mobilních zařízení.

Organizace souborů

Ukládejte fotografie do dobře strukturovaných adresářů a používejte jasné a popisné názvy souborů. Usnadní vám to správu a nalezení správných obrázků pro váš web.

Při nahrávání na stránky se ujistěte, že názvy souborů s obrázky jsou v latince a neobsahují diakritiku a jiné speciální znaky ani mezery.

Přidání alternativního textu (alt text)

Ke každému obrázku přidejte popisný alternativní text. Tento text se zobrazí, pokud nelze obrázek načíst, a používá se také při návštěvě stránky zrakově postiženými nebo nevidomými lidmi (v SEO terminologii se tomu říká „přístupnost“). Alternativní text navíc pomáhá vyhledávačům porozumět obsahu obrázku a může zlepšit SEO.

Fotografie a další rastrové obrázky.

Rastrový obrázek (také známý jako bitmapový obrázek) je forma grafické reprezentace, ve které je obrázek složen z jednotlivých pixelů (bodů) uspořádaných do mřížky. Každý pixel má svou vlastní barvu a je nezávislý na ostatních pixelech. Rastrové obrázky se obvykle vytvářejí pomocí fotoaparátů, skenerů nebo programů pro úpravu grafiky.

Tyto pokyny se primárně zaměřují na fotografie, ale poskytují také obecné pokyny pro přípravu jakékoli grafiky použité na stránkách webu.

Definování velikosti a rozlišení

Velikost a rozlišení fotografií hrají důležitou roli při přípravě obsahu pro stránky. Určete velikosti fotografií tak, aby vyhovovaly designu vašeho webu, a nastavte rozlišení na 72 dpi pro optimální zobrazení na obrazovce.

Výběr formátu souboru

Vyberte vhodný formát souboru pro fotografie na vašem webu. JPEG a PNG jsou nejběžnější formáty pro webové stránky. JPEG poskytuje vysoce kvalitní obrázky, zatímco PNG je vhodný pro obrázky s průhledností a logy.

Kontrola kvality a optimalizace obrazu

Najděte rovnováhu mezi kvalitou a velikostí souboru. Příliš nízká kvalita může způsobit ztrátu detailů, zatímco příliš vysoká kvalita může zvětšit velikost souboru a zpomalit načítání stránky. Upravte úroveň komprese tak, abyste dosáhli optimální rovnováhy, obvykle je optimální 70 %. Někdy lze toto pravidlo porušit, například pokud se jedná o portfolio web profesionálního fotografa, kde je nejdůležitější ukázat kvalitu práce.

Oříznutí a retušování

V případě potřeby ořízněte fotografie tak, aby odpovídaly velikosti a složení vašeho webu. Možná budete muset provést retušování, abyste zlepšili kvalitu snímku nebo odstranili nežádoucí prvky.

Vektorová grafika

Optimální formát

SVG (škálovatelná vektorová grafika) nebo AI (formát Adobe Illustrator).

Důležitý aspekt

Ve většině případů vypadají lépe hladké a vyhlazené obrysy vektorových obrázků. Poskytněte přirozeně vypadající kontury bez drsných přechodů nebo nerovností.

Výhody vektorové grafiky:

• Škálovatelnost. Vektorové obrázky jsou založeny na matematických vzorcích a vektorech, což jim umožňuje škálovat beze ztrát. To znamená, že jejich velikost lze změnit bez ztráty kvality nebo jasnosti, což je zvláště důležité při vytváření grafiky pro různá média a zařízení.
• Malá velikost souboru. Vektorové soubory jsou obvykle menší než rastrové soubory, protože obsahují informace o vzorcích a vektorech spíše než o každém pixelu v obrázku. Menší velikost souboru je důležitá pro rychlé načítání webových stránek a efektivní ukládání souborů na vašem počítači nebo serveru.
• Editovatelnost. Vektorové obrázky lze snadno upravovat a měnit. Bez ztráty kvality můžete snadno měnit tvar, velikost, barvu a další vlastnosti objektů vektorové grafiky. Díky tomu je vektorová grafika flexibilní a snadno se upravuje a přizpůsobuje při práci. Moderní systémy pro správu obsahu (webu) ve většině případů umožňují provádět takové úpravy přímo v administračním panelu webu.

Vektorová grafika je ideální pro loga, ikony, animace a vizualizaci procesů. Jeho všestrannost a flexibilita z něj činí oblíbený nástroj pro vytváření akcentů a efektů.

Při přípravě grafiky pro svůj web vezměte v úvahu tyto pokyny, abyste vytvořili vizuálně přitažlivý a profesionální web.