Jak je důležité se párat s fotkami na webu? 
Přijde na to… :) Já bych zde rád přednesl svůj úhel pohledu (především v rámci WordPressu). Teoreticky totiž název ani velikost obrázku nemusejí hrát velkou roli, především ten název. Nicméně prakticky už je to věc (úplně) jiná.
Velikost
Pokud máte totiž fotky na webu o velikosti v řádu jednotek MB nebo nedej bože ještě více, tak už začíná být hodně zajímavé se jejich velikostí zabývat. Typická velikost fotky z fotoaparátu může být klidně +/- 10 MB. Když vezmu v potaz použití takové fotky ve WordPressu, tak se nemusí hned jednat o velký problém. To ovšem jen, pokud máte správně napsanou šablonu, která používá zmenšené, přesně definované velikosti. Když pak navíc používáte např. plugin pro kompresi kvality obrázků (nebo třeba online službu tinyjpg), tak z uživatelského pohledu by mělo být vše v pořádku.
Nicméně zůstává problém se zaplňováním místa na disku vašeho webhostingu. Originální fotka cca 10 MB + n zmenšených velikostí může být třeba dalších 5 MB zabraného prostoru a to při pouhých 100 fotkách může udělat dohromady až 1500 MB. Jinými slovy, když nebudete brát ohled na velikost nahrávaných fotek na web, tak 100 fotek ve WordPressu může klidně zabrat 1,5 GB prostoru vašeho hostingu, což v případě levnějších variant hostingových programů je téměř celá kapacita, kterou zde máte k dispozici. Přičemž po nějakém rozumném zmenšení takových fotek by celková velikost mohla být celkem snadno 10x menší a to se vyplatí.
Rozměry
Když zůstanu u standardních fotek z fotoaparátu o velikosti cca 10 MB, tak rozměry takových fotek budou nejspíš +- 5184×2912 px (tj. z fotoaparátu s rozlišením 18 Mpx v poměru 16:9). Když vezmu tři výchozí velikosti obrázků ve WordPressu a jejich rozměry, tak ten zbytečný nepoměr je hned zřejmý, tedy:
- thumbnail – 150×150 px
- medium – 300×300 px
- large – 1024×1024 px
Typické rozlišení uživatele PC je v dnešní době snad už 1920x1080px (Full HD), velikost pracovní plochy záleží na prohlížeči, velikosti okna i stránce samotné, takže je ve skutečnosti ještě (mnohem) menší. Proto na webu nejsou potřebné zbytečně velké velikosti fotek. Já osobně aktuálně používám maximální šířku 1280 px, resp. 1024 px, či 768 px dle webu a responzivity.
Pojmenování
Jedno ze základních pravidel dobrého programátora by mělo být správné pojmenovávání funkcí a já si myslím, že to samé by mělo platit i v případě názvů obrázků a fotek na webech obecně. Jednak je ten obrázek pak lépe vyhledatelný ve vyhledávačích, rozuměj v Googlu. A dále může být pak problém s jeho voláním především v případně diakritiky. Protože Windowsy nedělají takové rozdíly v pojmenování souborů, např. velká a malá písmena jsou jim lhostejné, ale většina webhostingů běží na Linuxu, kde už je to rozdíl a tím pádem potenciální problém. „Vynikající“ jsou také mezery, které se v URL adresách v prohlížečích nahrazují sekvencí „%20“ => mezery do URL nepatří. Je vhodné je nahrazovat pomlčkou + obecně zde platí raději menší písmena, než velká.
Diakritika
WordPress sám diakritiku v rámci souborů ponechává. Takový název se pak může dostat do URL adres a byť technicky je to možné, tak si myslím, že to není dobré. Diakritiku v názvech obrázků a fotek na webu raději nepoužívejte, vyhnete se tím potenciálním problémům se zobrazením.
Příklad
Název fotky pro web – špatný: „Franta Vomáčka.JPG“ vs. dobrý „franta-vomacka.jpg“ nebo špatný: „PC310338.JPG“ vs. dobrý „brilo-team-na-konferenci.jpg“.
Metadata
V případě obrázků na webu metadata = alt (tj. HTML atribut), ve WordPressu políčko „Alternativní text“, které popisuje daný obrázek v kódu. To může být přínosné jednak pro vyhledávače a kdejaké webové roboty, ale hlavně pro nevidomé uživatele, kterým tento popisek přečte čtečka. Tyto popisky sice není (vysloveně) nutné vyplňovat, ale osobně to doporučuji a mají kladný vliv na vyhledávání (rozuměj „SEO“). Vaše obrázky tím získají přidanou hodnotu. Stejně tak titulky odkazů (atribut title).
Fotobanky
Zde bych se nechtěl pouštět na tenký led, takže jen zmíním, pro ty, co třeba nevědí, že je možné si na internetu vybrat fotky z katalogů – tzv. fotobank. Nicméně většina z nich je poměrně hodně drahá a já bych právě rád uvedl jednu celkem dobře zdarma využitelnou výjimku – Pixabay. Ovšem vždy je třeba myslet na to, že když píšete třeba originální článek o nějakém typicky českém tématu, který bude obsahovat naopak typicky americké fotky plné smějících se asiatů a afroameričanů, tak výsledný uživatelský dojem asi nebude ten správný, ale to už je jiná pohádka… ;-)
Všechna tato „dogma“ můžete v praxi a obecně vídat na našem vlastním webu i blogu.
