Články

Odkud získat fotografie pro váš web?

Cest k získání fotografií se nabízí více. Následuje jejich stručný výpis, který podrobněji rozeberu dále:

• váš stávající archiv fotografií,
• nafocení nových fotografií svépomocí,
• zadání zakázky profesionálnímu fotografovi,
• využití snímků z "free" fotobanky (zdarma),
• využití snímků z komerční fotobanky.

Nafocení vlastních fotografií se stává stále dostupnějším díky rozšíření digitálních fotoaparátů. Je to většinou finančně velmi výhodná varianta a někdy i nezbytná. Jejím záporem však můžou být horší výsledky (kompozičně i technicky), než od profesionálního fotografa nebo z komerční fotobanky.

Zadání zakázky profesionálnímu fotografovi je kromě předchozí varianty asi jedinou další volbou, jak získat např. nafocený katalog vašich vlastních produktů. Nebývá to cesta levná, ale v případě šťastné ruky při volbě fotografa může vést k velmi kvalitním a skutečně profesionálním výsledkům. Výhodou oproti fotobankám je právě zmíněný individuální přístup k zakázce. Co se týká volby techniky, nemá smysl požadovat fotografování analogovým – filmovým – přístrojem, protože digitální technologie v posledních letech pokročily natolik, že pro účely internetu jsou v 99 % jejich výsledky více než dostačující.

Využití snímků z "free" fotobanky je častou volbou, pokud nepotřebujete pro svůj web výjimečně kvalitní fotografie ve velkém rozlišení, a nevadí vám menší výběr. Free fotobank je celá řada, zpravidla je nutné hledat požadované fotografie na více z nich, neboť jejich databáze snímků nebývají tak obsáhlé. Další nevýhodou je již zmiňovaná nižší kvalita snímků proti komerčním fotobankám, a obecně větší kvalitativní skoky – dá se narazit jak na snímky neostré a v malém rozlišení, tak na ostré snímky v rozlišení výrazně převyšujícím požadavky webu. Autorům fotografií (pokud jsou uvedeni a pokud to požadují), stačí zpravidla výměnou za použití jejich fotek poslat adresu finálního projektu, pro který posloužily.

Využití snímků z komerční fotobanky je cesta, která při dobrém výběru vede vždy alespoň k technicky kvalitním snímkům, ale daní za to je poměrně vysoká cena. Existují tři základní možnosti jak koupit snímky:

• jednotlivé snímky s licencí rights-managed,
• jednotlivé snímky s licencí royalty-free,
• předem sestavené kolekce royalty-free snímků.

Rights-managed jsou nejdražší, ale jejich výhodou je to, že si u nich lze v některých případech koupit práva i na výhradní použití, a tudíž se vám pak nemůže stát, že byste na stejnou fotografii narazili někde jinde. Také bývají často kvalitnější, ale přestává to být pravidlem. Pro představu o cenách jsem si na Gettyimages.com  nechal vyhledat obrázek brýlí ležících na popsaném papíře (snímek č. ameakjel52056). Pokud bych si tento snímek chtěl zakoupit pro použití na své webové prezentaci, s plánovaným umístěním na úvodní stránce, licencí pro dvouleté použití, a moje prezentace by se zabývala prodejem kosmetiky, zaplatil bych za jeho neexkluzivní použití 630 EUR, což je po hrubém přepočtu necelých 20 tisíc korun. Odvozenou výhodou vysoké ceny je také fakt, že na trhu je méně subjektů ochotných si takový snímek koupit.

Snímky royalty-free jsou vždy snímky s nevýhradním užitím, neomezenou dobou a libovolným účelem použití. Jejich ceny jsou výrazně nižší než u fotografií rights-managed. Pokud vezmu jako příklad opět velkou fotobanku Gettyimages.com  , tak fotografie samotných brýlí z kolekce StockByte (snímek č. skd187460sdc), stojí v rozlišení dostačujícím pro použití na webu "jen" 55 EUR, tedy zhruba něco kolem 1800 korun.

Třetí zmíněnou možností jsou ucelené fotografické kolekce royalty-free snímků, které obsahují zpravidla sérii několika desítek snímků na dané téma. Cena za jednotlivou fotografii u nich vychází nejlépe, ale je třeba zvážit, kolik z nabídnutých snímků využijeme – snadno bychom se tak mohli dostat k tomu, že by nakonec taková kolekce byla dražší než zakoupení 5ti konkrétních snímků. Pro představu o cenách jsem vybral kolekci Corporate Momentum (na Gettyimages.com  číslo EP105) od dodavatele Photodisc, která obsahuje 98 snímků, a stojí 299 EUR, tj. necelých 9500 Kč – v případě využití všech snímků vychází cena na snímek pod 100 Kč.

Všechny tři možnosti pořízení snímků nabízí i námi spravovaná fotobanka SundayPhoto  , která navíc disponuje poměrně jedinečnou funkcí – registrovaní uživatelé mají možnost stažení některých fotografií bez vodotisku a ve větším rozlišení pro účely grafických návrhů (pro finální realizaci je snímky nutné zakoupit). Prakticky všechny ostatní fotobanky nabízí podobnou možnost, ale obvykle pouze s vodotiskem a v menším rozlišení.

Vhodné úpravy snímků

Před optimalizací a umístěním snímků na web je většinou třeba provést základní úpravy, mezi které patří:

1. oříznutí na požadovaný formát a poměr stran, odstranění zbytečných detailů a okolí ořezem,
2. zmenšení na velikost vhodnou pro web,
3. citlivé doostření,
4. srovnání barevného vyvážení a celkového jasu snímku.

Při zmenšování je třeba mít na paměti rozlišení monitoru u většiny návštěvníků a zda bude fotografie umístěna přímo do stránky nebo jen jako náhled s možností zvětšení do nového okna (tzv. pop-up). V případě řešení pomocí pop-up okna doporučuji dělat fotografie o něco menší, než je převažující rozlišení cílové skupiny návštěvníků webu, např. 740 x 500 pixelů pro rozlišení 800 x 600, protože musíme počítat s tím, že každé nově otevřené okno má ještě okraje a část obrazovky zabírají ovládácí prvky operačního systému.

K rychlému a poměrně kvalitnímu doostřování lze použít více cest. Mně se nejlépe osvědčilo používat filtr Filter > Sharpen > Sharpen (Filtry > Zostření > Zostřit), a potom podle citu zeslabit jeho účinek pomocí funkce Edit > Fade... (Úpravy > Zeslabit...), aby se kolem doostřených objektů netvořily viditelné kontury. Tyto dvě funkce nabízí Adobe Photoshop, ale jejich ekvivalenty se nebo podobné funkce jsou i v konkurenčních programech.

Srovnání barev a jasu už je záležitostí toho, kdo fotografie upravuje, neboť automatika nemůže nikdy přesně vědět, jak si výsledný snímek představujeme. Pokud chceme pouze základní srovnání kontrastu, jasu a barevného ladění, pro většinu snímků dobře poslouží automatická funkce Image > Adjust > Auto Levels (Obraz > Přizpůsobit > Úrovně automaticky). Pro případné následující ruční úpravy nabízí Photoshop mocné nástroje v podobě Image > Adjust > Color Balance... (Obraz > Přizpůsobit > Vyvážení barev...) a více názorného Image > Adjust > Variations... (Obraz > Přizpůsobit > Variace...).

Pokud to bude možné, vyhněte se nevkusným fotografickým kolážím a podobným experimentům. Těm už odzvonilo. Koláže (snad jen s výjimkou cílených fotomontáží) se většinou do webových prezentací vůbec nehodí.

Optimalizace a uložení snímků

Optimální velikost snímků vložených přímo ve stránce je zhruba do 50 kB na jeden obrázek při počtu tří až pěti snímků na stránku. Vychází z toho, že jeden takový obrázek se bude na standardním modemu s rychlostí 56 kbps (který je stále velmi rozšířený v domácnostech) stahovat zhruba 7 vteřin, což je ještě akceptovatelné. V případě většího počtu obrázků na stránku je vhodné umístit pouze zmenšené náhledy v menším rozlišení, a kvalitní fotografii nabídnout po kliknutí otevřenou v novém okně, jak jsem již zmínil v předchozí kapitole. Tyto náhledy mívají nejčastěji velikost mezi 10 a 20 kB, což je úplně dostačující pro jejich malé rozměry. Fotografie, které se následně zobrazují v pop-up okně, mohou mít velikost výrazně větší než fotografie umístěné ve stránce, avšak ani v tomto případě se nedoporučuje překračovat zhruba 100-150 kB (tj. kolem 20 vteřin stahování na modemu).

Vhodných formátů pro uložení snímků není mnoho. V zásadě jsou dva, které jsou rozšířené v prohlížečích výborně (GIF a JPEG), a jeden, jehož rozšíření se začalo rozmáhat až v posledních letech a zatím není tak podporovaný (PNG). Na masové rozšíření progresivnějších formátů si asi budeme muset ještě počkat (JPEG2000).

• GIF – Bezztrátový formát, vhodný spíše pro plošnou grafiku (ovládácí prvky stránky, grafy), jeho největším omezením je v možnosti použití maximálně 256 barev, což pro větší fotografie nedostačuje.
• JPEG – Ztrátový formát, vycházející při kompresi z nedokonalosti našeho zraku a zobrazovacích zařízení. Je ideální pro fotografie a obrázky s převažujícím podílem gradientů. Umožňuje plynulé nastavení kompresního poměru, a několik metod komprese – standardní, optimalizovanou, progresivní. Čím větší je nastavená komprese, tím neostřeji působí obraz, ostré hrany v obraze nejsou čisté, ale jakoby rozptýlené. Nicméně téměř vždy se dá dojít kompromisem mezi kvalitou a velikostí k uspokojivým výsledkům. Je s ním možné uložit informaci o použitém barevném profilu, avšak pro použití na webu je tato funkce zbytečná (prohlížeče nedisponují správou barevných profilů), a proto odškrtnutí této volby při exportu v Adobe Photoshop může ušetřit několik cenných kilobajtů.
• PNG – Bezztrátový formát, který poskytuje dvě hlavní volby, a to export s počtem 256 barev, a export s plnou barevnou paletou. Při exportu plochých grafik do 256 barev disponuje lepším kompresním poměrem než GIF. Je vhodný hlavně pro kombinaci ploché grafiky a fotografie v jednom obrázku. Při použití pouze na fotografie jsou výsledné snímky datově poměrně velké. Unikátní vlastností PNG je však možnost použít alfa kanál (masku) s definicí různé intenzity průhlednosti v různých místech snímku. Tuto funkci bohužel nepodporuje současná verze Internet Exploreru. Od chystané verze 7 by však již měla být průhlednost implementována. Částečně lze tento hendikep obejít již nyní – více informací si můžete přečíst v článku na serveru A List Apart  .

Příklady komprese na výřezu z ukázkové fotografie s částí výřezu zvětšenou na 200%:

Umístění fotografií na stránce

Při umísťování fotografie do stránky je třeba dbát na to, aby fotografie příliš nenarušila okolní obsah nebo nezpůsobila nevyrovnanost ploch grafického designu. Když umísťujeme fotografii obtékanou textem, nejlépe působí snímek o šířce třetiny šířky odstavce. Bez obtékání potom přes celou šířku odstavce (na doprovodné ilustraci varianta 1 a 3).
Vedle fotografie by na stránce nikdy nemělo vznikat nevyužité prázdné místo.

V případě použití obtékaných fotografií (varianta 2) bychom měli dbát na to, aby měly po stranách potřebný odstup od textu. Občas se člověk setká s fotografiemi "nalepenými" na okolní text, což nepůsobí z estetického hlediska dobře. Nehledě na to, že i z hlediska sazby jde o naprosto nesprávné řešení.

Pokud by na webu mělo být více fotografií, než kolik by se dalo rozumně umístit do textu, je vhodnější vytvořit samostatnou sekci "fotogalerie", kterou prolinkujeme z relevantních stránek, nebo zařadíme přímo do hlavní navigace. Ve fotogaleriích bývá zvykem navigace pomocí zmenšených náhledů – s tím, že každý z nich vede po kliknutí na velkou fotografii (buď do nového pop-up okna, nebo na vlastní stránku, která obsahuje zvětšenou fotografii a navigační tlačítko "zpět").

Rovněž můžete v některých případech narazit na nutnost použít u fotografií popisek. Ten by měl být umístěný přímo u fotografie, nejčastěji pod ní, a neměl by nikdy přesáhnout na šířku fotografie. Jako ideální se jeví takové řešení, kdy fotografie i její popisek tvoří ucelený blok, který je jako celek okolním textem obtékán.

Technické řešení vkládání fotografií do XHTML kódu

Co se týká technického řešení, musím zmínit zejména nutnost dbát na správně vyplněný parametr ALT. Parametr ALT je u elementu IMG povinný. Značí alternativní text, který se použije v případě, kdy není možnost zobrazit obrázek, nebo v případě čtení stránky hlasovou čtečkou. Jeho obsahem by měl být stručný a výstižný popis obsahu fotografie. V případě, že je obsah fotografie stěžejní i pro pochopení okolního textu, je možné dát elementu IMG ještě parametr LONGDESC, ve kterém specifikujeme adresu na stránku s podrobným popisem obsahu fotografie. Často se také můžete setkat s tím, že pokud používáte pro správu obsahu webu nějaký CMS, není v něm možné zadat k fotografii alternativní text, což je poměrně velký nedostatek. Z tohoto důvodu CMS OrangeGate od SYMBIA vkládání alternativních textů umožňuje, stejně jako řadu dalších prvků pro podporu přístupnosti, použitelnosti a optimalizace pro vyhledávače.

Ukázka validního řešení včetně parametru LONGDESC:

<img
src="fotografie/chata.jpg"
alt="Fotografie naší horské chaty"
longdesc="fotografie/chata_popis.html" />

Při otevírání fotografií do pop-up okna bychom měli v ideálním případě vedle každé fotografie umístit i textový odkaz na otevření této fotografie, protože ne každý uživatel je zvyklý na zvětšování fotografií kliknutím na její zmenšený náhled. U otevírání fotografií do nového okna ještě zůstaneme. Zpravidla jej provádíme pomocí Javascriptu, který je však potřeba napsat tak, aby bylo možné otevřít větší verzi fotografie i v případě, že je JavaScript vypnutý. Takové řešení nebývá časté, ale z pohledu přístupnosti by mělo být samozřejmé. Docílíme toho tak, že odkaz, který obklopuje fotografii, by měl mít adresu na větší fotku umístěnou v parametru HREF, a ještě mu přidáme na konec atributu ONCLICK funkci "return false;", která zajistí, že v případě povoleného JavaScriptu se použije obsah atributu ONCLICK a zablokuje další provádění otevírání normálního odkazu. S vypnutým JavaScriptem však zůstane možnost fotografii otevřít normálně do stávajícího okna. Viz následující zjednodušený příklad:

<a
href="../fotografie/chata_velka.jpg"
onclick="window.open(this.href); return false;">
vnitřek odkazu
</a>

Asi posledním, na co je třeba při otevírání fotografií do pop-up okna myslet, je snadná možnost zavření nově otevřeného okna. Když návštěvník narazí na web, kde tato možnost není, zbytečně ho zdržuje přemístování kurzoru na "křížek" pro zavření okna. Uživatelé jsou nejvíce navyklí na to, pokud kliknutím do plochy fotografie pop-up zavřou, proto je dobré se tohoto řešení držet - nenuťte návštěvníky přemýšlet.