Moderní webové prohlížeče a systémy pro správu obsahu optimalizují obrázky tak, aby se zobrazovaly v jakémkoli prostředí. Nejlepší je však připravit obrázky, které jsou optimalizovány pro každý možný tvarový faktor a umístění, kde se obrázek může objevit. Zaměřte se na tři věci: rozlišení obrázku, velikost a barevný prostor.
Barevný prostor v obrázcích
Grafičtí designéři spoléhají na dva primární barevné prostory. Barevný prostor je metoda, při které se primární barvy kombinují a vytvářejí komplexní barevné duhy.
Při přípravě snímků pro mobilní zařízení použijte režim RGB. Displeje na počítačových monitorech a chytrých telefonech se spoléhají na kombinaci červených, modrých a zelených pixelů. Tento obraz RGB je optimalizován tak, aby přesně reprodukoval zamýšlené barvy na obrazovce.
Pro tisk návrháři používají čtyřbarevný proces, kde každá barva destiluje do kombinace azurové, purpurové, žluté a černé. Někdy se z tohoto důvodu čtyřbarevné obrázky označují jako obrázky CMYK.
Rozlišení obrázku
Obrázky, zejména na mobilních platformách, by měly mít co nejmenší velikost, aby byla vyvážena kvalita s rychlostí stahování v mobilních sítích a velikostí souboru s omezením mobilních dat.
Většina programů, včetně aplikací Adobe Creative Cloud, podporuje nástroj Export for Web, který zobrazuje obrázek v různých kombinacích rozlišení a komprese. Vyberte obrázek v nejlepší kvalitě při nejnižší celkové velikosti.
Velikost obrázku v pixelech
Každý obrázek by měl mít velikost pro zamýšlený účel. Zde jsou některé příklady velikostí obrázků pro oblíbené webové použití:
- Internetové bannerové reklamy mají často 468 pixelů na 60 pixelů.
- Obrázky na obálce Facebooku by měly mít 851 pixelů na 315 pixelů.
- Twitterové profilové fotky by měly mít 400 x 400 pixelů.
- Obrázky pro sdílené odkazy by měly mít 1200 pixelů na 630 pixelů.
Když pracujete s fotografiemi pro konkrétní účely, zkontrolujte místo, kde se fotografie zobrazí (například na sociálních sítích nebo na blogu), abyste ověřili optimální rozměry obrázku a poté podle toho upravte velikost, aby nedošlo k roztažení nebo oříznutí obrázku.
Abyste předešli pixelizaci, zaměřte se na skutečnou velikost displeje. I když je obrázek správně dimenzován, pokud nemá správnou velikost, výsledný produkt může vypadat pixelově, pokud je nutné obrázek zvětšit, aby vyhovoval dostupnému prostoru.
O vektorových obrázcích
Vektorové obrázky – obrázky, které počítá a kreslí zařízení – jsou obvykle efektivnější a kvalitnější než rastrové obrázky (obrázky nakreslené po jednom pixelu), protože je lze zvětšovat a zmenšovat, aniž by to ovlivnilo kvalitu obrázku. Pro jednoduchá loga, čárové grafiky a grafy je ideální vektorová verze. U fotek se nepoužívají vektorové formáty.
