Pokud na svůj web dáváte fotky, nákresy, loga, prostě jakoukoliv grafiku, rozhodně není jedno, jaký formát obrázků použijete.

To, co považují profesionálové za naprostou samozřejmost, je denodenně porušováno armádou laiků, kteří jsou navíc občas ochotni se do krve hádat, že to dělají správně.

Na webu se používají v podstatě jen tři formáty pro obrázky a to JPG, PNG a občas GIF. Který se hodí na co a proč?

Kdy použít JPG

Formát JPG (JPEG) používá tzv. ztrátovou kompresi, což zjednodušeně řečeno znamená, že ubírá na kvalitě obrázku, aby zmenšil jeho velikost v bytech. Lidské oko je nedokonalé a když mu z obrázku některé informace odstraníte, nepostřehne to. JPG používáme zásadně pouze tam, kde nejsou jednolité barevné plochy, to znamená, že se hodí pro fotografie. Podívejte se na příklad:

JPG Hory 36 KB

36 KB formát JPG

 

PNG Hory 235 KB

235 KB formát PNG

Poznáte okem rozdíl mezi oběma fotografiemi? Pravděpodobně ne a přesto je ta ve formát JPG 6,5x menší než ta ve formátu PNG. Pokud dáte na stránku takových fotografií více a zvolíte formát nevhodně, bude se stránka načítat mnoho a mnoho sekund. Při správně zvoleném formátu bude načítání podstatně rychlejší.

Kdy použít PNG

Bystrému čtenáři už je pravděpodobně jasné, že PNG se hodí na pravý opak toho, na co JPG. Najde využití všude tam, kde potřebujete dát na web ilustrační grafiku, loga, mapy a pod. Zjednodušeně řečeno vše, co nejsou fotky. Pokud na grafiku použijete JPG, dopadne to tak jako v dalším příkladu:

TIP: Už jste viděli, co dokáže asi nejlepší WordPress šablona Divi?Podívejte se na video.
26 KB formát PNG

26 KB formát PNG

 

30 KB JPG

30 KB formát JPG

Vidíte, že PNG verze je o 4 KB menší a navíc je obrázek ve formátu JPG výrazně méně kvalitní. Všimněte si „rozpatlanosti“ barev na velkých plochách. Je to dáno ztrátovou kompresí, kterou zde oko bohužel postřehne. Formát PNG je navíc v tomto případě kvůli datové úspoře stažen na pouhých 256 barev a nijak zásadně to nevadí.

Kdy použít GIF

Asi jediná větší výhoda formátu GIF je ta, že do něj lze ukládat animace. Dejte si ale pozor na to, abyste animace nepoužívali nadbytečně a bez účelu. V dnešní době nikoho neohromí vznášející se obálka signalizující e-mailovou adresu – tohle frčelo na přelomu tisíciletí a na moderní web to nepatří.

Závěr

Pokud si zapamatujete to, že na fotky je JPG a na vše ostatní PNG, tak v 90 % případů neuděláte chybu.

Pokud použijete na grafiku JPG, bude návštěvník často koukat na ošklivé obrázky. Pokud použijete na fotky PNG, bude návštěvník koukat sice na kvalitní obrázky, ale bude čekat pěkně dlouho, než se mu načtou. A možná to nevydrží a odejde. A to nechcete.

Související články: