Vedeli ste, že formát obrázka dokáže ovplyvniť výkonnosť webovej stránky? Formát, v akom sa obrázky nachádzajú, má značný vplyv na mnohé aspekty webu. V tomto článku budeme hovoriť o tom, aké formáty obrázkov existujú, ako vybrať ten najlepší formát pre vašu stránku, ale tiež o tom, prečo by ste ich výber nemali podceňovať.
Nad typom formátu obrázka by ste sa mali zamyslieť skôr ako ho umiestnite na webovú stránku. Formáty obrázkov totiž hrajú dôležitú úlohu v mnohých aspektoch webovej stránky. Pre e-shopy a weby sa nevyužívajú všetky typy, ale len vybrané, ktoré vieme jednoducho optimalizovať pre web.
Vo všeobecnosti sa používajú formáty JPEG, WebP a PNG pre fotografie a obrázky s množstvom farebných odtieňov, zatiaľ čo formáty GIF a SVG slúžia pre animované obrázky a vektorové obrázky. PNG využíva priehľadnosť a bezstratovú kompresiu a používa sa hlavne pre vizuály menších veľkostí ako sú logá, ikonky a pod. Vždy je však dôležité zvážiť, aký typ obrázka používate a vybrať pre neho vhodný formát.
Najpoužívanejšie formáty obrázkov – JPG, GIF a PNG
Formát JPEG, skratka pre Joint Photographic Experts Group, sa používa pre fotografie a obrázky s množstvom farebných odtieňov. Je kompresný, čo znamená, že dokáže zmenšiť veľkosť obrázka bez toho, aby sa zhoršila jeho kvalita. Pri nahrávaní obrázkov vo formáte JPG je doležité optimalizovať ich parametre a veľkosť na použitie pre web.
Obrázok vo formáte PNG (Portable Network Graphics) sa využíva pre webstránky a e-shopy iba v určitých prípadoch a to hlavne ak o formát, ktorý sa používa pre obrázky s jasnými a ostrými líniami, ako sú logá alebo malé ikony. Obrázky vo formátoch PNG majú benefit bezstratovej kompresie, čo znamená, že bez ohľadu na to, ako často ich ukladáte, otvárate alebo meníte ich veľkosť, zachovávajú si svoju kvalitu. Obrázky vo formáte PNG sa používajú tiež v prípade vizuálov s gradientom, kde sú rýchle prechody medzi farbami, ktoré musia zostať ostré. Neodporúča sa tento formát využívať na bežné fotky či produktové obrázky na webe a e-shope, pretože môžu zapríčiniť spomalenie načítavania stránky.
Formát GIF, skratka pre Graphics Interchange Format, má veľmi špecifické využitie. Používa sa pre animované obrázky a obrázky s iba niekoľkými farbami. JPEG a PNG vo všeobecnosti nepodporujú animácie, vďaka čomu sú GIF formáty veľmi užitočné. Hoci je tento formát kompresný, kvalita obrázka nie je taká dobrá ako u JPEG alebo PNG. To znamená, že by ste sa mali snažiť používať GIF na svojom webe striedmo, iba ak potrebujete predviesť animáciu, ktorú nemôžete vytvoriť iným spôsobom.
Nová generácia formátov obrázkov na web WebP, SVG a AVIF
Väčšina obrázkov na webových stránkach je exportované do vyššie spomínaných JPEG, PNG či GIF formátov. Tieto formáty sú však staršie a v súčasnosti už existujú omnoho efektívnejšie formáty obrázkov, ktoré umožňujú uložiť obrázok vysokej kvality v menšej veľkosti, a tým pomôžu stránke urýchliť načítavanie obsahu, čo predstavuje jeden z parametrov pre umiestnenie sa vyššie vo výsledkoch vyhľadávania. Web sa tak bude tiež vedieť rýchlejšie načítať, čím sa zlepší aj používateľská skúsenosť.
Formát obrázka AVIF (AV1 Image File Format) je vďaka vysokému výkonu ideálny pre animované obrázky. Ponúka oveľa lepšiu kompresiu ako PNG alebo JPEG s podporou vyšších farebných hĺbok, animovaných rámčekov, priehľadnosti atď. Bol vyvinutý s cieľom poskytnúť lepšiu kompresiu a kvalitu obrazu so zachovaním menšej veľkosti súboru.
Ďalším typom formátu obrázka je SVG, skratka pre Scalable Vector Graphics. Ide o vektorový formát používaný pri vektorových obrázkoch, ktoré sa dajú zväčšovať či zmenšovať bez straty kvality. Tento formát je veľmi všestranný, vďaka čomu je vhodný pre obrázky s jasnými a ostrými líniami, ako sú logá alebo ikony.
Prečo zvoliť moderný formát WebP?
WebP predstavuje moderný formát obrázkov, ktorý poskytuje vynikajúcu bezstratovú a stratovú kompresiu obrázkov na webe. Pomocou WebP môžu webmasteri a weboví vývojári vytvárať menšie, bohatšie a živšie obrázky, vďaka ktorým je web rýchlejší. Tento druh formátu obrázka je vynikajúcou voľbou dokonca aj pre animované obrázky. WebP ponúka oveľa lepšiu kompresiu ako PNG alebo JPEG s podporou vyšších farebných hĺbok, animovaných snímok či priehľadnosti.
Formát WebP môže byť jedným z najlepšie strážených tajomstiev, pokiaľ ide o optimalizáciu obrázkov. Obrovské stránky, ako sú YouTube a eBay, ho už začali používať na zlepšenie výkonnosti stránok. Existujú dva druhy obrázkov WebP. Jeden je známy jednoducho ako WebP a používa stratovú kompresiu. Môžete si to predstaviť ako JPEG verziu formátu WebP. Keď vytvoríte stratový WebP v programe, ako je Photoshop, budete si môcť zvoliť mieru kompresie.
Druhá verzia je známa ako WebP Lossless a je skôr ako PNG. Získate väčšiu veľkosť súboru, no nestratíte detaily. Oba druhy formátov WebP vytvárajú obraz, ktorý je oveľa menší ako ich náprotivky JPEG a PNG. Koľko presne? Podľa údajov spoločnosti Google sú obrázky WebP v priemere o 25 – 34 % menšie ako porovnateľné obrázky JPEG a o 26 % menšie ako porovnateľné obrázky PNG.
Prečo je dôležitý správny výber formátu obrázka?
Typy formátov obrázkov, ktoré používate na webovej stránke, majú veľký dosah na samotný web. Jedným z najzrejmejších vplyvov je vzhľad webovej stránky. Je jasné, že niektoré formáty obrázkov sú detailnejšie, a preto sú kvalitnejšie ako iné. Hodnota webovej stránky teda vie byť definovaná aj na základe kvality obrázkov, ktoré sa na nej nachádzajú.
Formáty obrázkov do značnej miery ovplyvňujú výkon danej webovej stránky. Niektoré formáty obrázkov zaberajú viac miesta ako iné, čo môže ovplyvniť čas načítania vášho webu a znižovať tým výkon. Vo väčšine prípadov sa vám oplatí držať sa jedného alebo dvoch formátov, aby ste zachovali sústavnosť či konzistenciu na celej webovej stránke.
Formáty, ktoré na vašom webe zvolíte, by mali udržiavať pomer medzi kvalitou a výkonom. Formátmi JPEG a GIF na vašom webe určite nič nepokazíte, ak však chcete využiť formáty z novej generácie obrázkov, vyskúšajte AVIF, SVG alebo WebP. Každý zo spomínaných formátov má svoje špecifiká. Vy si musíte vybrať ten správny a použiť ho v prospech vášho webu. Využívajte potenciál obrázkov na maximum, aby bola vaša stránka čo najlepšia a najrýchlejšia.
Zdroje: