Ako si nepokaziť dojem z webu nesprávnym formátom obrázku
Obrázky sú jedným z hlavných prvkov, s ktorým vaši klienti prídu do kontaktu, po tom, čo kliknú na váš web alebo e-shop. Vytvárajú prvý dojem, ktorý je dôležitý pre to, aby vaši zákazníci u vás zostali a chceli si pozrieť, čo ponúkate a aj nakúpiť.
Ten dôležitý prvý dojem, na ktorý máme pár sekúnd, môžeme vylepšiť, alebo aj pokaziť nielen výberom obrázkov, ale aj tým, aký formát obrázkov použijeme. Nevhodným formátom obrázku môžete znehodnotiť celkový dojem z vašej webstránky. Dnes sa preto pozrieme na obrázky nie z obsahovej stránky, ale z pohľadu najvhodnejších formátov.
Pomôžeme vám zistiť, aký formát sa vám kedy najlepšie hodí, ako s obrázkami správne pracovať, aby ste z ich potenciálu vyťažili čo najviac a podporili tak používateľský zážitok z vášho webu/e-shopu.
V digitálnej podobe sa využíva viac formátov obrázkov, no medzi najpopulárnejšie patria 3 základné formáty – PNG, JPG a GIF.
Čím sa líšia rôzne formáty obrázkov a kde ktorý použiť?
Ukážeme si tiež, aké sú silné stránky jednotlivých formátov a naučíme sa, ako pracovať s ich slabinami.
1. GIF
Skratka GIF znamená „Graphics Interchange Format“. Obrázok uložený v tomto formáte má koncovku .gif.
Vedeli ste, že…?
Tento formát obrázku vznikol v roku 1987. Cieľom bolo dosiahnutie zmenšenia obrázkov, aby sa ľahšie preposielali cez sieť (lokálnu alebo internetovú).
Sú to 8-bitové farebné súbory, čo v praxi znamená, že obrázky v tomto formáte sú zložené dokopy z 256 rôznych farieb. Ale, nedajte sa zmiasť – čiernobiele obrázky, respektíve obrázky zložené len z odtieňov šedej sú taktiež 8-bitové súbory. Teda formát .gif je ideálny na ukladanie tohto typu obrázkov.
Výhody formátu GIF
kvalita obrázkov v šedom spektre,
ukladanie obrázkov bez straty kvality,
možnosť ukladať animácie aj obrázky s priehľadným pozadím.
Odporúča sa teda ukladať do GIFu obrázky, pri ktorých potrebujete uchovať ostré hrany, ako napríklad pri logách, ikonách, perokresbách, geometrických objektoch.
Nevýhody formátu GIF
kvalita farieb, vzhľadom na veľmi obmedzené množstvo farieb, ktoré dokáže GIF uchovať.
farebná paleta je okresaná na 256 farieb, čo znižuje vizuálny zážitok – uložený obrázok má síce menšiu veľkosť a zaberá menej miesta na disku, ale na úkor farebnosti.
spôsob ukladania obrázkov – nedochádza ku kompresii obrázkov (umelé zníženie veľkosti obrázkov), obrázky si zachovávajú svoje pôvodné vlastnosti.
Fotky Vám teda do GIFu určite ukladať neodporúčame.
Možnosti využitia GIF
pri tvorbe internetovej grafiky so základnými farbami, pri tvorbe malých ikoniek, animácií a pri ukladaní obrázkov, ktoré potrebujú uchovať ostrosť hrán – napr. výkresy alebo obrázky v šedých odtieňoch.
2. PNG
Skratka PNG znamená „Portable Network Graphics“. Obrázok uložený v tomto formáte poznáte podľa koncovky .png. Celý názov obrázku vyzerá asi takto: nazov_obrazku.png.
Vedeli ste, že …?
Tento formát obrázku vznikol v polovici 90-tych rokov, aby spojil výhody formátov .GIF a .JPEG.
Obrázky vo formáte PNG môžete ukladať dvoma spôsobmi.
8-bitové uloženie, tak ako je tomu pri formáte GIF.
Alebo si môžete vybrať 24-bitové uloženie (ktoré podporuje cez 16 miliónov farieb), rovnako, ako pri formáte JPG.
PNG formát je pomerne univerzálny a skvele sa hodí na tvorbu grafiky vašej webstránky alebo e-shopu. Dokáže totiž uchovať farby, keďže nedochádza k zmenšeniu (kompresii), uchováva aj ostré línie a rovnako dokáže pracovať s priehľadným pozadím.
Výhody PNG
je univerzálny a výborne sa hodí pre tvorbu webdizajnu,
vo veľkej miere nahrádza zastaralejší formát GIF.
Podporovaná je aj spomínaná priehľadnosť pozadia na vyššej úrovni ako je tomu pri formáte GIF. Priehľadnosť pozadia môže byť pri formáte PNG odstupňovaná v odtieňoch a taktiež samotné tiene sa dokážu zobraziť a uchovať aj na priehľadnom pozadí.
Nevýhody PNG
hlavne veľkosť daného súboru – tá je, samozrejme rozdielna pri 8-bitovom a 24-bitovom formáte. Pri 8-bitovom formáte (podpora 256 farieb) sú súbory menšie. Pri 24-bitovom formáte (podpora viac než 16 miliónov farieb) sú súbory väčšie.
Nedokáže pracovať s animáciami.
Veľmi zriedkavý jav – nepodporovanie tohto formátu staršími verziami prehliadačov – no moderné prehliadače na najvyužívanejších platformách (Windows, Android, iOs, Linux) s týmto formátom dokážu bez problému pracovať.
Možnosti využitia PNG
pri logách a obrázkoch, ktoré vyžadujú priehľadné pozadie s tieňom, prípadne odstupňovanú priehľadnosť.
Pri obrázkoch, kde potrebujete zachovať ostré tvary, ale aj pri fotkách, ak veľkosť ukladaných obrázkov nie je problém.
3. JPEG
Skratka JPEG znamená „Joint Photographic Experts Group“. Takýto obrázok má koncovku .jpeg alebo .jpg.
Vedeli ste, že…?
Tento formát obrázku vznikol v roku 1986 a podporuje milióny farieb.
Tento formát bol navrhnutý na ukladanie fotografií s cieľom znížiť veľkosť priestoru, ktorý fotografie zbytočne zaberali. Toto sa podarilo dosiahnuť kompresiou. Pri ukladaní obrázku vo formáte JPEG dochádza k zoskupovaniu jednotlivých pixelov do blokov, ktoré sú následne uložené. Tento stav je trvalý.
V praxi to znamená, že JPG obrázok po uložení stráca časť ostrosti. Tento efekt nespozorujeme voľným okom, no s každým ďalším uložením je kvalita nižšia.
Cieľom pri JPG však je uchovávanie fotografií a nie ich editácia a následné znovu ukladanie.
Výhody JPG
podpora miliónov farieb tak ako pri 24-bitovej verzií formátu PNG,
podstatne nižšia veľkosť ukladaného súboru, ideálna na nahrávanie obrázkov na internet, nakoľko sú nahraté oproti iným formátom pomerne rýchlo a dokážu sa zobrazovať aj na pomalšom pripojení.
JPG využíva nedokonalosť ľudského oka, ktoré nie je tak všímavé ku kontrastom medzi jednotlivými farbami.
Nevýhody JPG
kompresia (zmenšenie) – spôsobujúca rozmazávanie detailov, ktoré je výraznejšie každým ďalším uložením obrázku. Neodporúča sa na ukladanie obrázkov, pri ktorých je dôležité uchovať ostrosť ich hrán.
Nedokáže pracovať s priehľadným pozadím tak ako tomu bolo pri dvoch predchádzajúcich. Ak obrázok uložíte na priehľadné pozadie a následne ho uložíte ako JPEG, automaticky sa Vám v prehliadačoch bude zobrazovať biele pozadie.
Možnosti využitia JPG
najmä pri fotkách a farebných obrázkoch, ktoré by nemali zaberať veľa miesta, napriek svojej kvalite a veľkej podpore farieb.
Na nahrávanie obrázkov na internet a na ich rýchle zobrazovanie aj na pomalšom internetovom pripojení.
Prečo je dôležitý správny výber formátu obrázkov?
Teraz už poznáte všetky najrozšírenejšie formáty obrázkov a určite ste pochopili, čo bolo dôvodom, že ste napríklad niekedy v minulosti nedosiahli takú kvalitu obrázku, ako ste si želali. Ak sa odteraz bude rozhodovať, aké formáty použiť, už budete vedieť, že nielen ich obsah je dôležitý, ale aj formát. Obrázok v správne zvolenom formáte nielen, že lepšie vyzerá, ale aj podčiarkne silu tovaru, ktorý na ňom váš zákazník napríklad v e-shope vidí, ale aj dokáže ovplyvniť rýchlosť načítavania webstránky či internetového obchodu.
Želáme vám správny výber formátov pre vaše obrázky, ktoré zvýšia atraktivitu vašej ponuky.
