Jak nepokazit dojem z webu nesprávným formátem obrázku

Obrázky jsou jedním z hlavních prvků, se kterými Vaši klienti přijdou do kontaktu po tom, co kliknou na Vaše webové stránky nebo e-shop. Obrázky vytvářejí první dojem, který je důležitý pro to, aby u Vás zákazníci zůstali, podívali se na Vaši nabídku a nakoupili.  

Ten důležitý první dojem, na který máme pár vteřin, můžeme vylepšit, ale i pokazit nejen výběrem obrázků, ale i tím, jaký formát obrázků použijeme. Nevhodným formátem obrázku můžete znehodnotit celkový dojem z Vaší webové stránky. Dnes se proto podíváme na obrázky ne z obsahové stránky, ale z pohledu nejvhodnějších formátů.

Pomůžeme Vám zjistit, jaký formát se Vám kdy nejlépe hodí, jak s obrázky správně pracovat, abyste z jejich potenciálu vytěžili co nejvíc a podpořili tak uživatelský zážitek z Vašeho webu/e-shopu.

V digitální podobě se využívá více formátů obrázků, ale mezi nejpopulárnější patří 3 základní formáty – PNG, JPG a GIF.

Čím se liší různé formáty obrázků a kde který použít?

Ukážeme si rovněž, jaké jsou silné stránky jednotlivých formátů, a naučíme se, jak pracovat s jejich slabinami.

1. GIF

Zkratka GIF znamená „Graphics Interchange Format“. Obrázek uložený v tomto formátu má koncovku .gif.

Věděli jste, že…?

Tento formát obrázku využíváme od roku 1987. Vznikl za cílem dosažení zmenšení obrázků, aby se snadněji přeposílali přes síť (lokální nebo internetovou).

Jsou to 8bitové barevné soubory, což v praxi znamená, že obrázky v tomto formátu jsou složeny do kupy z 256 různých barev. Ale nedejte se zmást – černobílé obrázky, resp. obrázky složené jen z odstínů šedé jsou rovněž 8bitové soubory. Tedy formát .gif je ideální na ukládání uvedeného typu obrázků.

Výhody formátu GIF

• kvalita obrázků v šedém spektru,
• ukládání obrázků bez ztráty kvality,
• možnost ukládat animace i obrázky s průhledným pozadím.

Do GIFu se doporučuje ukládat obrázky, u kterých potřebujete uchovat ostré hrany, jako například u log, ikon, perokreseb, geometrických objektů.

Nevýhody formátu GIF

• kvalita barev, vzhledem k velmi omezenému množství barev, které dokáže GIF uchovat.
• Barevná paleta je osekaná na 256 barev, což snižuje vizuální zážitek – uložený obrázek má sice menší velikost a zabírá méně místa na disku, ale na úkor barevnosti.
• Způsob ukládání obrázků – nedochází ke kompresi obrázků (umělé snížení velikosti obrázků), obrázky si zachovávají své původní vlastnosti.

Fotky Vám tedy do GIFu určitě ukládat nedoporučujeme.

Možnosti využití GIF

• při tvorbě internetové grafiky se základními barvami, při tvorbě malých ikonek, animací a při ukládání obrázků, které potřebují uchovat ostrost hran – např. výkresy nebo obrázky v šedých odstínech.

2. PNG

Zkratka PNG znamená „Portable Network Graphics“. Obrázek uložený v tomto formátu poznáte podle koncovky .png.

Věděli jste, že …?

Tento formát obrázku vznikl v polovině 90. let, aby spojil výhody formátů .GIF a .JPEG.

Obrázky ve formátu PNG můžete ukládat dvěma způsoby.

1. 8bitové uložení, tak jak je tomu u formátu GIF.
2. Nebo si můžete vybrat 24bitové uložení (které podporuje přes 16 milionů barev), stejně jako u formátu JPG.

PNG formát je poměrně univerzální a skvěle se hodí na tvorbu grafiky Vaší webové stránky nebo e-shopu. Dokáže totiž uchovat barvy, jelikož nedochází k zmenšení (kompresi), uchovává i ostré linie a  dokáže pracovat s průhledným pozadím.

Výhody PNG

• je univerzální a výborně se hodí pro tvorbu webdesignu,
• ve velké míře nahrazuje zastaralejší formát GIF,
• podporovaná je i výše uvedená průhlednost pozadí na vyšší úrovni, jako je tomu u formátu GIF. Průhlednost pozadí může být u formátu PNG odstupňována v odstínech a rovněž samotné odstíny se dokážou zobrazit a uchovat i na průhledném pozadí.

Nevýhody PNG

• hlavně velikost daného souboru je samozřejmě rozdílná u 8bitového a 24bitového formátu. Při 8bitovém formátu (podpora 256 barev) jsou soubory menší. Při 24bitovém formátu (podpora více než 16 milionů barev) jsou soubory větší.
• Nedokáže pracovat s animacemi.
• Velmi zřídkavý jev – starší verze prohlížečů nepodporují tyto obrázkové formáty, ale moderní prohlížeče na nejvyužívanějších platformách (Windows, Android, iOs, Linux) s tímto formátem dokážou bez problémů pracovat.

Možnosti využití PNG

• u log a obrázků, které vyžadují průhledné pozadí se stínem, případně odstupňovanou průhlednost.
• U obrázků, kde potřebujete zachovat ostré tvary, ale i u fotek, pokud velikost ukládaných obrázků není problém.

3. JPEG

Zkratka JPEG znamená „Joint Photographic Experts Group“. Takový obrázek má koncovku .jpeg nebo .jpg.

Věděli jste, že…?

Tento formát obrázku vznikl v roce 1986 a podporuje miliony barev.

Tento formát byl navržen na ukládání fotografií s cílem snížit velikost prostoru, který fotografie zbytečně zabíraly. Toho se podařilo dosáhnout kompresí. Při ukládání obrázku ve formátu JPEG dochází k seskupování jednotlivých pixelů do bloků, které jsou následně uloženy. Tento stav je trvalý.

V praxi to znamená, že JPG obrázek po uložení ztrácí část ostrosti. Tento efekt neuvidíme pouhým okem, ale s každým dalším uložením je kvalita nižší.  

Cílem při JPG je uchovávání fotografií a ne jejich editace a následné opětovné ukládání.

Výhody JPG

• podpora milionů barev, tak jako při 24bitové verzi formátu PNG,
• podstatně nižší velikost ukládaného souboru, ideální na nahrávání obrázků na internet, protože se oproti jiným formátům nahrají poměrně rychle a dokážou se zobrazit i při pomalejším připojení.

JPG využívá nedokonalost lidského oka, které není tak vnímavé ke kontrastům mezi jednotlivými barvami.

Nevýhody JPG

• komprese (zmenšení) – způsobující rozmazávání detailů, které je výraznější každým dalším uložením obrázku. Nedoporučuje se na ukládání obrázků, u kterých je důležité uchovat ostrost jejich hran.
• Nedokáže pracovat s průhledným pozadím tak, jako předchozí formáty. Pokud obrázek uložíte na průhledné pozadí a následně jej uložíte jako JPEG, automaticky se Vám v prohlížečích bude zobrazovat bílé pozadí.

Možnosti využití JPG

• zejména při fotkách a barevných obrázcích, které by neměly zabírat spoustu místa, při zachování kvality a velké podpoře barev.
• Na nahrávání obrázků na internet a na jejich rychlé zobrazování i při pomalejším internetovém připojení.

Proč je důležitý správný výběr formátu obrázků?

Nyní již znáte všechny nejrozšířenější formáty obrázků a určitě jste pochopili, co bylo důvodem, že jste například někdy v minulosti nedosáhli takové kvality obrázku, jakou jste si přáli. Pokud se budete rozhodovat, jaké formáty použít, nyní již budete vědět, že nejen jejich obsah je důležitý, ale i formát. Obrázek v správně zvoleném formátu nejen lépe vypadá, ale i zvýrazní sílu Vašeho zboží nebo služby. Dokáže také ovlivnit rychlost načtení webové stránky nebo e-shopu.

Přejeme Vám správný výběr formátů pro Vaše obrázky, které zvýší atraktivitu Vaší nabídky.