Byznys fotka, která má rychle předat klíčové sdělení o vašem podnikání, by se měla při zobrazení webu okamžitě načíst. Pokud první tři rozhodující vteřiny fotka není načtená, přicházíte o její přednosti. Vyvstává tedy otázka: jak připravit fotku pro web, aby se rychle načítala? Dnes se tomu podíváme na zoubek.
V této problematice bývá běžná otázka: „jak uložit fotky pro web tak, aby se rychle načítaly?“ Jenže tato otázka nemíří na samou podstatu příprav fotek pro web. Začíná od konce. Dobře položená otázka zní jinak.
Jak připravit fotky pro web tak, aby se rychle načítaly?
Celý proces přípravy fotky pro web, lze rozdělit do tří základních kroků.
Než se do jednotlivých kroků pustíme, ujasníme si pojmy. Co je to velikost fotek? Máme velikost rozměrovou, a velikost datovou. Velikost rozměrová se obvykle uvádí v pixelech (zkráceně se používá pxl nebo px, ale také se může uvádět v cm). Velikost datová se počítá na bajty (uvádí se kB, MB apod.). My se tu budeme věnovat datové velikosti.
Čím je fotka datově větší, tím pomaleji se načítá.
Překvapení na úvod: o datové velikosti fotky nejvíc rozhodujete už při jejím focení. Prvním krokem je tedy u samotného focení přemýšlet, zda mohu datovou velikost nějak snížit.
Nejpodstatnějším parametrem, který ovlivňuje datovou velikost, je množství detailů na fotce.
Čím víc zaostřených detailů fotka obsahuje, tím bude výsledná fotka datově větší.
Abychom si rozuměli, tím detailem nemám na mysli velikost záběru. Zda na fotce bude horské panorama (celek) nebo makro fotka brouka (detail).
V tomto případě mám na mysli, zda budou na fotce velké plochy beze změny barvy, a nebo zda bude fotka členitá, strukturovaná, zkrátka plná drobných detailů.
Co typicky zvětšuje datovou velikost fotky: jemné detaily jako například vlasy, srst, tráva, textura (dřevo, detail látky, kámen), listí na stromech, dále pak nastavené vysoké ISO na foťáku apod. Zmíněné detaily musí být zaostřené, aby datovou velikost zvětšovaly.
Co naopak úspěšně snižuje datovou velikost fotky: malá hloubka ostrosti (více rozostřených částí fotky), velké plochy bez textury.
Pojďme se podívat, jak malá hloubka ostrosti zásadně ovlivňuje datovou velikost.
Dvě fotky jsou vždy stejné, až na jeden parametr. Liší se hloubkou ostrosti. Tu určuje různé clonové číslo nastavené při samotném focení.
Na ukázkách vidíte, že malá hloubka ostrosti (rozmazané pozadí) snižuje datovou velikost fotek téměř o polovinu.
Komprese výsledného JPG souboru byla ve všech případech nastavená na Kvalitu 70.
Nejdůležitější ze všeho je samozřejmě sdělení fotky a její atraktivita. Nemůžeme měnit téma fotky jenom pro to, aby byla datově menší. Provedení už je ale na nás, a tak se můžeme zabývat i tím, jak fotku připravit, aby se načítala co nejrychleji.
Překvapení číslo dvě. Postprodukcí, to znamená úpravou fotky na počítači, také mnoho ovlivníte. Čím více fotku doostřujete nebo také posunujete v programu Lightroom parametr Texture nebo Clarity víc do plusových hodnot, tím bude fotka datově větší.
Při postprodukci tedy zvažujte míru ostrosti a míru zvýraznění detailů. Většinou je účelné zvýrazňovat pouze vybrané části obrazu, nikoliv vše.
Ukážeme si to na následující fotce. Uložil jsem jí v poměrně malém rozlišení 900x600pxl. Kvalitu JPG jsem nastavil na 60.
Jestli dobře počítám, druhá fotka je o 30 % větší soubor než předchozí.
V čem jsou jiné? V Lightroomu jsem při postprodukci v prvním případě nastavil oba parametry Texture a Clarity na hodnotu 0. V druhém případě obojí na hodnotu 50.
Zvýraznění detailů v postprodukci zvyšuje datovou velikost výsledných soborů. Je proto dobré vyvažovat atraktivitu fotky (s výraznějším detailem bývá fotka líbivější) a její datovou náročnost.
Teprve teď se dostáváme k tomu, co většina návodů zmiňuje. Je to ale až poslední krok, kterým výslednou velikost souboru můžete ovlivnit.
Nejprve je potřeba chápat, co znamená slovo komprese. Podívejme se na příklad ze života. Do malé krabičky od sirek, lze dát zhruba 37 sirek. Tyto všechny zápalky váží celkem zhruba 5g. Do téže krabičky lze ale také dát 50g zlata. Zlato má na každý gram váhy velmi dobře „komprimované“ rozměry.
Fotky jsou bitmapové (rastrové) obrázky. Jedná se o matici tisíců nebo i milionů bodů. Pokud jsou bez komprese, obrázek si lze představit, jako soubor uložených čísel, která popisují barvu všech jednotlivých bodů na fotce. Čím větší mají nekomprimované fotky rozměrovou velikost, tím jsou větší i datově.
Popis prvních 5 bodů na nekomprimované fotce by mohl vypadat třeba takto: 50, 56, 49, 52, 54
Komprese fotky může říct: prvních pět bodů má stejnou barvu. Pak by popis prvních 5 bodů mohl vypadat třeba takto: 5x53
Vidíte, že druhý popis je daleko kratší, tedy datově menší. Komprese vždy neprobíhá pouze tímto způsobem, jsou i jiné metody. Toto je pouze příklad, pro představu, co slovo komprese může znamenat.
Fotky pro web se obvykle ukládají ve formátu JPG. Jeho výhodou je možnost fotku poměrně úspěšně datově zmenšit.
Čím víc detailů JPG fotka má, tím je soubor datově větší.
Je to dané způsobem komprese. Zároveň ale také kolem ostrých hran vznikají nevzhledné čtverečky. Při nastavení komprese je proto nutné vyvažovat narušení detailů a výslednou datovou velikost souboru.
Nevýhodou formátu JPG je nemožnost pracovat s průhledností. To ale nebývá až tak běžné, že byste ve fotce chtěli použít průhlednost. Nicméně na mém webu takovou specialitku najdete. Podaří se vám ji najít?
Pokud chcete pracovat ve fotce pro web s průhledností, používá se pro to formát PNG. Ten je ale datově náročnější. Pro znatelné snížení datové velikosti můžete použít PNG, které fotku uloží jen s 256 barvami. To je použitelné pro fotky, kde není příliš mnoho různých barev.
Při ukládání fotek pro web ve formátu JPG, obvykle volím ve Photoshopu Kvalitu mezi 55 a 75. Používám Exportovat pro web (starší verze), protože mám nad nastavením větší kontrolu než u novějšího modulu Exportovat jako.
Vraťme se zpět k příkladu fotky textury dřeva. Podíváme se na vliv komprese na výslednou fotku.
Abych se dostal na stejnou datovou velikost u verze se zvvýrazněnou texturou pomocí postprodukce, musel jsem snížit parametr Kvalita (zvýšit kompresi).
A ještě jeden příklad navazující na první krok.
Abych se dostal na datově stejnou velikost, jako má fotka s malou hloubkou ostrosti, musel jsem snížit nastavení Kvalita na hodnotu 45. Připomínám, že fotka s malou hloubkou ostrosti byla ukládána s parametrem Kvalita 70. Na tomto příkladu je vidět, že otázka: „jak uložit fotky pro web, aby se rychle načítaly“ nedává úplně smysl. Protože samotná fotka má znatelný vliv na výsledný datový objem.
Možná si právě teď říkáte: „já ale nepoužívám na svém webu vlastní fotky. Takže datovou velikost stejně nemohu ovlivnit.“ Můžete.
Když vybíráte fotku ve fotobance, můžete si všímat, kolik je na ní oblastí s úplnou ostrostí, s výraznými texturami apod. A naopak, kolik míst má víceméně neměnnou plochou nebo je rozmazaných díky malé hloubce ostrosti.
Pokud najdete víc fotek, které se vám budou líbit, můžete při vybírání fotky vzít v úvahu i parametr, jak rychle se vámi vybraná fotka bude načítat.
Můžete si svůj odhad zkusit potvrdit stažením náhledu a porovnáním jejich datové velikosti. V takovém případě je důležité dávat si pozor, aby náhledy byly rozměrově stejné (na pixely).
Pokud od nějaké konkrétní fotky na svém webu očekáváte, že návštěvníkovi stránky rychle předá sdělení, musí se rychle načíst.
Příprava fotky pro web tak, aby se rychle načítala, probíhá už při jejím focení. Můžete zvažovat míru jemných detailů. Můžete volit hloubku ostrosti, vybírat jemnost detailů pozadí atd.
Druhým krokem pro snížení velikosti souboru je postprodukce. Opět můžete optimalizovat míru detailů. Fotka by si měla zachovat svou atraktivitu, ale zároveň by neměla být datově přehnaně náročná.
Až posledním krokem je samotné ukládání fotky pro web. Nejčastěji se používá komprimovaný formát JPG. Nejedná se o mávnutí kouzelného proutku, který z datově obří fotky udělá malou. Je to jenom počítačový algoritmus, který nad fotkou nepřemýšlí.
Jste to vy, kdo má ve své moci docílit daleko zásadnějšího snížení konečné datové velikosti fotky, v porovnání s tím, co dovede komprese v závěru procesu.
Zkuste si sami vytvořit nějaké příklady, podobné těm v mých ukázkách. Díky tomu že si to sami vyzkoušíte, budete mít příště na to cvičenější oko.
Poznáváte se v následujících větách? „Nevím, co mám na foťáku nastavit, abych měl pěkné fotky.“ „Fotím na automat, nic nenastavuji. A tak výslednou fotku nemohu ovlivnit.“ Věty mají jeden společný jmenovatel. Obojí předpokládá, že nastavení foťáku je synonymum pro tvorbu fotky.
Přečíst článek
Kde získávat fotky pro svou internetovou propagaci, blog, sociální sítě a při tom nikomu neubližovat? Možná vám někdo dal radu, že si můžete stáhnout jakoukoliv fotku z internetu. Uvedete zdroj, a máte hotovo? Bohužel, nemáte hotovo. Jen si zaděláváte na problém. V tomto článku se dozvíte, jak to je správně.
Přečíst článekUnikátním propojením byznys fotografie, grafiky a marketingu pomáhám firmám i živnostníkům vizuálně prezentovat jedinečnost jejich podnikání a tím zvyšovat zisky.
