Obrázky pro web - optimální formáty, velikosti a programy pro úpravy

Napsal(a) Napsáno úterý, 21 říjen 2014 Zveřejněno v Rady a návody Přečteno 14922 krát
Ohodnotit tuto položku
(4 hlasů)

Na internetu se používají především dva 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.



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.

Po kliknutí se zobrazí zvětšený náhled stejného rozměru obrázku (jakoby pod lupou).

jpg-nahled

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-nahled

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

animovaný 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í.)

obrazek-1200x685obrazek-315x178

 

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ě 800x600 a maximálně 1200x800. 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 Gimb, což je free alternativa za profesionální Adobe Photoshop.

 



Naposledy změněno úterý, 31 březen 2015 06:23

Zaujal Vás tento článek? Sdílejte ho a šiřte dál...

Martin Vinš

Pracuji jako grafik a kodér pro firmu WebPrezent.



Komentáře   

 
Marek
+3 # Marek 2015-03-30 23:58
Skvělej článek, hezky napsaný a spoustu cenných informací, díky :-)
Odpovědět | Odpovědět citací | Citovat
 
 
Boris
+2 # Boris 2016-11-26 14:47
Moc děkuju za užitečné informace.
Odpovědět | Odpovědět citací | Citovat
 
 
orphan
0 # orphan 2017-10-27 13:40
Pro pokročilé uživatele je dobrá volba program Gimb, což je free alternativa za profesionální Adobe Photoshop.

Chyba v texte: Gimb namiesto Gimp
Inak velmi pekny a uzitocny clanok.
Odpovědět | Odpovědět citací | Citovat
 

Přidat komentář

Bezpečnostní kód Obnovit