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 (viz Proč je nutné hlídat, jak velké obrázky dáváte na web či do e-mailů? a Jak změnit velikost obrázku či fotografie?).
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.
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.
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.
SVG – Scalable Vector Graphic
Formát co se nehodí pro fotografie (ty jsou bitmapové) ale zato třeba pro loga a jakékoliv „kreslené“ věci. Umí je libovolně zmenšovat a zvětšovat. Více ve V čem otevřít SVG a co to vůbec je a také v Co to znamená “logo v křivkách” a jaký formát souboru budete potřebovat
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“.
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.
TIP: Jak na web vkládat obrázky. Co všechno byste měli vědět. Nejen o velikosti a rozměrech
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í. Podrobněji viz Co s obrázky a fotkami ve formátu WebP? Jak převést WEBP na JPG/PNG?
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.
TIP: Další praktické čtení najdete v Jak ve Windows zmenšit fotku či obrázek?
