Myslím, že i na @365tipu je vidět, že obrázky jsou hodně podstatnou součástí každého textu na Internetu, ať je to blog nebo cokoliv jiného. A že jejich správné velikosti hrají spolu s dalšími prvky designu poměrně podstatnou roli. Pokud si myslíte že snad ne, tak srovnejte www.pooh.cz a 365tipu.cz. Ten rozdíl je velký, zejména proto, že Pooh.cz vznikl postupným vývojem bez jakéhokoliv zásahu a práce grafika.
V řadě případů, včetně toho u @365tipu, budete potřebovat nejenom obrázky v článku, ale také nějaký ten obrázek v záhlaví, upoutávkové obrázky a tomu podobné věci. A je hodně důležité na ně pamatovat. Hlavně, pro zdejší šablonu Twenty Fifteen je nutné si zjistit, jaké rozměry se vás vlastně budou týkat. Ten první je, že obsah je 660 px (bodů) široký. A ten druhý, že obrázek v záhlaví (featured image) je 825 x 510 bodů.
TIP: Pokud si nevíte rady se software pro úpravu obrázků, tak mrkněte třeba do TIP #014: Tipy na hodně užitečné software, které navíc můžete mít zdarma kde je například GIMP nebo Paint.NET.
První znamená, že nemá smysl se pokoušet do článků dávat cokoliv co je širší. Samozřejmě s výjimkou toho, že budete počítat s možností rozkliknutí (obrázek je zmenšený, po kliknutí se zobrazí v plné podobě) a váš blogovací/publikační systém to potřebuje.
To druhé, hlavně, znamená, že je vhodné vyrábět obrázky v záhlaví 825 bodů široké (budou sahat od kraje do kraje prostoru článku). A výškou můžete uzpůsobit to, jak budou působit na čtenáře. Oněch 510 se samozřejmě může hodit tam, kde do záhlaví dáte přímo něco, co už patří k obsahu článku.
Pokud tam dáte čistě ilustrační fotku/obrázek, tak můj názor je, že se hodí maximálně poloviční výška. Což by, při snaze o snadnou zapamatovatelnost, mohlo být třeba 825 x 225. U TIPu #053 to například působí použitelné.
Jenže, v okamžiku sdílení na prokletý Facebook zjistíte, že 825 je sice perfektních, ale 225 je málo. To proto, že jsem samozřejmě zapomněl na to, že pro plné zobrazení fotografie u odkazu (tedy nad odkazem) je vyžadováno aby se vešla do 484 x 252 bodů. Takže budu muset změnit názor a zkusit 825 x 252 bodů.
Mimochodem předchozí „omezení“ dané potřebou sdílet „správně“ na Facebook se dá obejít tím, že článek bude obsahovat jakýkoliv jiný dostatečně velký obrázek. Ale možná není od věci prostě těch pár minut navíc věnovat právě obrázku v záhlaví. Nakonec se u @365tipu bavíme o jednom článku denně.
Do úvah o obrázcích je navíc vhodné zapojit třeba ještě sdílení na Google+ a další sítě (Twitter naštěstí můžete vynechat, ten nic takového neřeší, naopak tam musíte obrázek nahrát).Těch 825×252 asi pro Google+ budu muset ještě doladit. Ale docela dobře se pamatuje, takže možná Google+ řešit nebudu. Uvidíme. 🙂
Pár dalších tipů, týkajících se používání obrázků v článcích
- Pokud chcete používat obrázek užší než poloviny šířky článku, tak je možné ho dát doprava a nechat vlevo obtékat textem.
- V žádném případě nepatří obrázky vlevo s textem obtékajícím vpravo, výrazně to komplikuje čtení.
- Obrázky by měly mít takové ty drobnosti jako popisky (v HTML kódu) ale samozřejmě je dobré je doplnit textem, legendou, pokud je to potřeba.
- Pokud je obrázek širší než polovina šířky článku, tak zcela určitě středit. A je vhodné se vyhnout tomu, že bude opravdu „nadoraz“ na šířku dostupného prostoru
- Fotografie mohou být JPG/PNG, JPG tam kde nebude vadit komprese a poškození (výměnou za podstatně menší velikost). Grafy, screenshoty a podobné věci jsou rozhodně lepší v PNG, nedojde k poškození.
- Velikost obrázku v KB (Kilobajtech) je potřeba hlídat, jak u jednotlivých, tak celkově v článku. Jednotlivé by rozhodně neměly přesahovat 100-200KB, ale bude hodně záležet na obsahu obrázku.
- Pokud je obrázek po zmenšení na šířku článku nečitelný, musí publikační/blogovací systém umožnit jej po kliknutí otevřít v plné velikost. V nejhorším případě jako samostatný odkaz, v tom správném „rozbalit“ nad textem.
- Nezapomínejte, že je rozdíl mezi tím jak obrázek působí na mobilu/tabletu a klasickém LCD. Hodně velké rozdíly způsobují nastavení monitorů.
- Obrázky se umisťují buď k textu ke kterému patří nebo se dají používat jako oddělovače. V takovém případě mohou nahradit mezititulky.
A poslední nejpodstatnější věc. Pro ilustrační obrázky nutně potřebujete mít vlastní, nebo si je kupovat a nebo je mít ze zdrojů, které je poskytují zdarma. A tady opravdu hodně pomůže Služby se zdarma použitelnými fotografiemi aneb Kde získat fotky k použití zdarma?. Já osobně už hodně dlouho používám Sxc.hu (které se někdy před pár měsíci přeměnilo na www.freeimages.com) v kombinací s vlastními fotkami – za tu spoustu let mám výběr stovek vlastních, které se pro tyto účely dají používat .
