825-255-1126729_21430078httpwww.sxc.huphoto1126729

TIP#062: K čemu se hodí PNG/JPG/GIF atd? Jak zvolit správně formát obrázku či fotky?

Tohle taky tak nějak patří úplně k základům, ale vždy se najde někdo, kdo tohle neví. Jde o formáty souborů pro obrázky a fotografie. Formáty, které občas hrají poměrně důležitou roli. Třeba v tom, jak bude vypadat výsledek a jak velký  bude soubor.

Obrázek či fotografii můžete na Internetu použít v několika různých podobách, ale v zásadě jsou tři. Ty uvedené v titulku. PNG, JPG/JPEG a GIF. Pokud totéž budete řešit v počítači, tak najdete ještě řadu dalších – nejčastěji asi BMP, TIFF, RAW – a je důležité vědět, že pro použití na Internetu se ani jeden z těchto formátů nehodí. V zásadě hlavně proto, že mají vždy výsledný soubor příliš velký. A jak určitě víte, velikost příloh do e-mailu si musíte hlídat, stejně jako velikost obrázků či fotek, které dáváte na web.

V zásadě se tedy můžeme vrátit hlavně k třem základním internetovým formátům.

GIF – Graphics Interchange Format

Slouží pro tzv. „rastrovou“ grafiku – což hlavně znamená pro grafy a věci, které nejsou fotografie. Obrázek umí komprimovat, tedy zmenšit jeho velikost. A je důležité vědět, že jde o komprimaci „bezeztrátovou“, takže výsledek nebude poškozený.

GIF použijete všude tam, kde jde o nápisy, plánky, loga, kresby. Můžete ho s výhodou použít také pro animace ale narazíte na jedno zásadní omezení, umí pouze 256 barev. Z čehož mimochodem také plyne, že se nehodí pro fotografie.

formattest-gif
GIF má pouze 17KB a kdyby původní fotka byla více barevná, projevila by se velká absence dostatku dostupných barev. Tady by použití GIF nic nebránilo, tento obrázek je spíše ilustrace – vždy můžete zkusit jak to vlastně dopadne a podle toho se rozhodnout.

JPG/JPEG – ve skutečnosti JFIF – JPEG File Interchange Format

Tenhle formát obrázků je charakteristický ztrátovou kompresí. Hodí se tedy v zásadě hlavně pro fotografie, kde nebude vadit, že dojde k jejich viditelnému (ale ne příliš snadno viditelnému) poškození. Úroveň komprese se dá navíc nastavit – třeba Facebook dlouhou dobu jakoukoliv nahranou fotku zcela poškodil nastavením velmi vysoké úroven komprese.

Pokud byste do JPG uložili něco co bylo typicky vhodné pro GIF, tak spoustu těch poškožení uvidíte. Rozmazání, moaré, poškozené čáry. Stejně tak dopadne text – pokud si chcete udělat screenshot obrazovky s textem, nedopadne to uplně nejlépe.

S JPG se setkáte na webu velmi pravděpodobně nejčastěji, právě fotografie se v JPG/JPEG podobě na web dávají nejčastěji. Velikosti se dost pomáhá případném nastavením vyšší míry komprese.

formattest-jpg-70
JPG s 70% kompresí má pouze 115 KB. Ale pokud si ho pečlivě prohlédnete, ideálně v ještě větším zvetšení, tak najdete místa, kde na to fotka doplatila.

PNG – Portable Network Graphics

PNG formát vznikl později, částečně jako reakce na omezení GIFů (a problémy s jeho patentováním) a nevhodnost JPEGu. Hodí se pro cokoliv, za cenu větších velikostí souborů – to hlavně proto, že používá bezeztrátovou kompresi (nepoškozuje výsledek, jako JPEG). Protože používá plně 24 bitovou barvovou paletu, hodí se i pro fotografie, byť původně pro ně být použit neměl .

PNG je ideální pro screenshoty, protože zůstane zachováno vše. Výhodné je, že stejně jako GIF, umí i průhlednost (alfa kanál), což normální JPG neumí. Co neumí, byť měl nahradit GIF, je animace.

formattest-png
PNG – 231 KB, největší z tří. Porovnejte si s předchozí JPEG variantou a uvidíte, že třeba „Z“ je zde méně rozmazané.  Ve všech třech případech je mimochodem obrázek dvakrát zvětšený, není to původní velikost – tak je k vidění v záhlaví tipu.

Co byste ještě měli vědět o obrázcích na Internetu

Ještě dlouho bude platit, že je potřeba hlídat velikost obrázků. V době mobilních telefonů a tabletu na mizerném mobilním připojením s FUP je to ještě důležitější. Dávejte si pozor, co tedy přikládáte do e-mailů a co nahráváte na web. Pokud je to obrázek co má megabajty (MB), tak je to špatně – přitom právě takovéto fotky dnes dostanete z digitálních fotoaparátů či mobilů.

TIP:V Jaké online nástroje pro práci s fotografiemi a obrázky se dozvíte o online nástrojích na práci s obrázky. A ve V čem opravovat obrázky a fotky a nekrást kvůli tomu Photoshop? najdete dostatek tipů na software, které se přímo instaluje do vašeho počítače.

Velikost výsledného obrázku snížíte uložením v JPG/JPEG formátu. Můžete zkusit vyšší kompresí (pokud půjdete až k 70 %, tak bude už výsledek hodně poškozený), ale také zmenšením fotografie – na webu určitě nebudete potřebovat fotky širší (či vyšší) zhruba 1 600 bodů (pro použití na webových stránkách). Pokud je ale budete chtít tisknout, tak samozřejmě čím vyšší počet bodů, tím lépe – pak ale také počítejte s megabajty.

TIP: Chcete na Internet dát infografiku? Tak v tomto případě se nejvíce bude hodit PNG. Pokud je ale zpracovaná tak, že mírná poškození nevadí, tak se nebojte šíření v JPG.

Pamatujte na to, že JPEG/JPG jednou provždy fotografii poničí – pokud ji chcete mít neponičenou, musíte ukládat v PNG nebo v jiných „neinternetových“ formátech – může to být třeba TIFF. Tam ale počítejte opravdu s velkými soubory.

Zmenšit velikost fotky z foťáku či mobilu můžete i tím, že necháte při ukládání odstranit informace, které tam připojil foťák – čímž často i odstraníte geolokační informace, takže to může mít smysl pro ochranu soukromí.

TIP: V DPI vs rozměry obrázků aneb jak se v tom mám proboha vyznat? se dozvíte něco o tom, že dpi nemá pro webdesign žádný smysl. Třeba se vám to bude hodit, až vás někdo bude nutit do toho, že „potřebuje obrázek co má 72 dpi“.

gif-jpg-png
GIF, JPG 70% a třetí je PNG. Tady už je hodně vidět, jak to může ve skutečnosti dopadnou. A to původní obrázek byl tak jako tak JPG, takže …

Co byste určitě neměli na Internetu používat

Do e-mailů a na Internetu opravdu příliš nepatří fotografie v čistě počítačových formátech – tedy samozřejmě pokud to právě neposíláte někomu, kdo s fotografií bude dál pracovat a potřebuje jí v této čisté podobě. Můžete se setkat hlavně například s BMP, TIFF a RAW.

BMP je čistá „bitmapa“, opravdu bod po bodu, tak jak je obrázek tvořen, ke každému budu připojena informace o barvě. Tyto obrázky bývaji opravdu hodně velké. A dnes už hodně nepraktické.

TIFF slouží pro rastrovou grafiku a pokud jste trochu starší, možná ho znáte z faxů a scannerů, kde se používal jako základní formát. Umí i řadu dalších kouzel, jako třeba více stránek v jednom souboru.

RAW jsou soubory, které lezou přímo z digitálních fotoaparátu (pokud si je tak nastavíte) a jsou vlastně výstupem senzoru. Pro profesionální fotografy bývají dost zásadní.

Můžete se setkat ještě s formátem WebP – ten vyvinula firma Google ve snaze najít univerzální formát pro bezeztrátovou i ztrátou kompresi pro rastrové obrázky. Rozšíření ale není.

Mezi obrázkové formáty nepatří PDF a měli byste vědět, že je to skvělý formát pro věrné zobrazení a následné tištění brožurek, letáků či infografik, ale pro použití na Internetu se nehodí. Používá se často i pro e-knihy.