Na internetu se používají především dva rastrové formáty obrázků s koncovkou .jpg a .png. Občas se setkáme ještě s formátem s koncovkou .gif a to především v podobě krátké animace, protože jako statického obrázku ho překonal PNG. Výše zmíněné formáty mají své specifické využití a je dobré znát jejich možnosti. Zvolením správného formátu lze snížit velikost datového objemu a zároveň zachovat kvalitu obrázku.
Dalším formátem, který se dnes hojně používá na internetu je .svg. Jedná se o vektorový formát, který je v jakékoli velikosti stejně kvalitní a ostrý narozdíl od rastrového formátu (např. jpg,), ketrý se po zvětšení „rozkostičkuje“ na pixely.
Popularita formátu SVG je především díky v dnešní době již standardním responzivním šablonám webových stránek. Jedná se hlavně o grafiku a prvky, které mění svou velikost dle rozlišení prohlížeče (bez ztráty kvality). Jsou to např. loga, ikony ale i složitější jakoby malované obrázky. Tento sofistikovaný formát však klasický uživatel zatím úplně nevyužije, proto se mu v tomto článku dále věnovat nebudeme.
JPG (JPEG)
Jedná se o nejčastější obrázkový formát na internetu, který používá ztrátovou kompresy (JPEG) a obrázky ukládá ve fotorealistické kvalitě. Je to výborný formát právě pro úpravu digitálních fotografií, protože dokáže výrazně snížit datový objem při zachování kvality obrazu. Nehodí se však pro obrázky tvořené jasnými velkými plochami, nebo ostrými liniemi (obrázky tvořené uměle), zobrazení textu nebo ikon, protože komprese vytváří v obrazu viditelné a rušivé artefakty. Tento formát neumožňuje průhlednost (alfa kanál).
Ukázka použití obrázku JPG
Obrázek ukazuje vhodné užití formátu JPG (levá část) a nevhodné použití (pravá část). V horní části jsou obrázky bez komprese, ve spodní pak můžete vidět artefakty které jsou patrnější, čím je komprese větší. Se zvyšující se kompresí se snižuje datová velikost. Cílem je vždy co nejméně datově objemný obrázek, který bude ale i koukatelný a nebude ho příliš degradovat komprese. Pro obrázek autobusu zde jasně vyplývá, že bude pro něj lepší zvolit formát PNG-8.
JPG jasná volba při úpravách digitálních fotografií pro web.
PNG (Portable Network Graphics)
Je formát s bezstrátovou kompresí a byl vytvořen jako náhrada za starší formát gif. Jeho velkou výhodou je osmibitová průhlednost (alfa kanál), která zaručuje jemný přechod okraje objektu na obrázku do průhledného pozadí. Tento formát ocení především tvůrci webových stránek, právě kvůli alfa kanálu. Hodí se pro obrázky obsahující jednobarevné oblasti, plynulé přechody a ostré hrany (umělé obrázky). Pro tento formát existují i návrhy pro jednoduché animace podobně jako u GIFu, ale do praxe se zatím neprosadily.
S PNG formátem se můžeme setkat nejčastěji ve dvou formách a to PNG-8 a PNG-24
- PNG-8 (hodně podobný GIF)
- zvládne 256 barev
- zvládne alfa kanál (jen s jednobitovou průhledností) – pixel je buď průhledný, nebo není, obrázek tedy má zubaté okraje
- PNG-24
- dokáže pracovat s cca 17 milióny barev
- má osmibitovou průhlednost – pixel může mít 8 úrovní průhlednosti, výsledkem je jemný přechod do pozadí
Ukázka průhlednosti PNG
Na obrázku je vidět, že PNG-8 dělá při použití průhlednosti zubaté okraje (úplně stejně se chová i formát GIF). PNG-24 je ale jiné kafe – průhlednost do pozadí je perfektní, vč. přechodu.
PNG jasná volba při vytváření „umělých obrázků“ pro web, nebo nutnosti použít alfa kanál.
GIF (Graphics Interchange Format)
Je také formát s bezstrátovou kompresí, ovšem má jen 256 barev. GIF má také omezené možnosti alfa kanálu (neumožňuje přechod průhlednosti) – dělá tedy zubaté okraje.
Jediná výhoda, ktrerá drží tento formát ještě při životě, je možnost jednoduché animace.
Ukázka jednoduché animace GIF
GIF použijte jen, pokud potřebujete rychle vytvořit krátkou animaci, nebo animovaný banner.
Optimální velikost obrázků pro web
Častým nešvarem na webových stránkách bývají vložené fotografie ve větším rozlišení, než se skutečně zobrazují. Například vložený obrázek přes redakční systém zmenšený jen nastavením šířky na 315px, ale skutečný rozměr je 1200px. Na první pohled rozdíl není vidět, ale poznáte jej při stahovaní dat prohlížečem. Pokud takto vložených obrázků je na stránce víc, výrazně to sníží rychlost načítaní.
Ukázka nesprávně vloženého obrázku s větším rozlišením vlevo. Vpravo správně vložený obrázek ve skutečné velikosti 315px. (Skutečné velikosti obrázků si můžete ověřit kliknutím na obrázek pravým tlačítkem myši a zobrazením vlastností.)
Obrázky by tedy měly mít stejné rozměry v pixelech jak na stránce, tak ve skutečném zobrazení. Rozlišení by mělo být 72 obrazových bodů na palec (to je v podstatě hustota informací). Vyšší rozlišení je užitečné hlavně pro tisk, pro elektronické použití je ideální rozlišení 72 DPI (Dots Per Inch, tedy počet bodů na palec).
Pokud vytváříte i náhledové obrázky (zvětšené náhledy po kliknutí na obrázek), měly by mít rozměry v pixelech ideálně 800×600 a maximálně 1200×800. Pokud by byly náhledy větší, nemusely by se některým uživatelům zobrazit celé. Někteří uživatelé by mohli mít problém zavřít náhledového okno.
Programy pro úpravu a ukládání obrázků
Teď už víte, kdy a jaký formát obrázku použít a v jakém rozlišení je pro web ukládat. Nyní potřebujete grafický program, který umí upravovat a hlavně ukládat JPG, PNG, případně GIF. Takových programů jsou stovky – od profesionálních jako je Photoshop až po jednoduché a zdarma, např. Easy Thumbnails. Většina prohlížečů obrázků (IrfanView, Picasa, FastStone Image Viewer) nabízí alespoň ořez a zmenšení obrázků, příp. jednodušší práci se světlem, efektem červených očí atd. Toto je postačující pro většinu uživatelů, kteří chtějí na web umístit vlastní fotky z digitálního fotoaparátu. Jsou tu samozřejmě i programy určené primárně na úpravu fotografií, jako například Zoner Photo Studio apod.
Osobně používam program Photoshop a pro rychlé hromadné zmenšení obřích fotek z digitálního fotoaparátu pak Easy Thumbnails. Pro klasického uživatele bych mimo Easy Thumbnails doporučil FastStone Image Viewer. Je to perfektní prohlížeč obrázků, který nabízí i úpravy jasu, kontrastu, použití barev a několik dalších praktických grafických filtrů, je zdarma a podporuje i češtinu.
Pro pokročilé uživatele je dobrá volba program Gimp, což je free alternativa za profesionální Adobe Photoshop. Skvělou free alternativou za Photoshop je i online editor Photopea.
Dalším skvělým nástrojem na optimalizaci rastrových obrázků je i další online nástroj TinyPNG který spolehlivě zmenší jpg a png formáty při zachování skvělé kvality.