Medzi bežné príklady typov obrázkov na webe patria GIF, JPGa PNG. Súbory SVG. Tieto rôzne formáty ponúkajú webovým dizajnérom rôzne možnosti optimalizácie vizuálnej príťažlivosti webu.
GIF obrázky
Súbory GIF používajte pre obrázky, ktoré majú malý, stály počet farieb. Súbory GIF sú vždy zmenšené na najviac 256 jedinečných farieb. Algoritmus kompresie pre súbory GIF je menej zložitý ako pre súbory JPG, ale pri použití na jednofarebné obrázky a text vytvára veľmi malé veľkosti súborov.
Formát GIF nie je vhodný pre fotografické obrázky alebo obrázky s prechodovými farbami. Pretože formát GIF má obmedzený počet farieb, přechody a fotografie sa pri uložení ako súbor GIF skončia pruhom a pixelovaním.
JPG obrázky
Obrázky JPG používajte na fotografie a ďalšie obrázky, ktoré majú milióny farieb. Používa zložitý kompresný algoritmus, ktorý umožňuje vytvárať menšie grafiky tak, že stratí časť kvality obrazu. Toto sa nazýva „stratová“ kompresia, pretože pri komprimácii obrazu sa stratia niektoré obrazové informácie.
Formát JPG nie je vhodný pre obrázky s textom, veľké bloky jednofarebných farieb a jednoduché tvary s ostrými hranami. Je to tak preto, lebo pri komprimácii obrázka sa môže rozmazať text, farba alebo čiary, čo spôsobí, že obrázok nebude taký ostrý, ako by bol uložený v inom formáte.
PNG obrázky
Formát PNG bol vyvinutý ako náhrada za formát GIF, keď sa ukázalo, že na obrázky GIF sa bude vzťahovať licenčný poplatok. Grafika PNG má lepšiu mieru kompresie ako obrázky GIF, čo má za následok menšie obrázky ako ten istý súbor uložený ako GIF. Súbory PNG ponúkajú priehľadnosť alfa, čo znamená, že môžete mať oblasti svojich obrázkov, ktoré sú buď úplne priehľadné, alebo dokonca používajú celý rad priehľadnosti alfa. Vrhaný tieň napríklad používa celý rad efektov priehľadnosti a bol by vhodný pre PNG (alebo nás môžete jednoducho ukončiť používaním tieňov CSS).
Obrázky PNG, podobne ako súbory GIF, sa nehodia na fotografie. Je možné obísť problém s pruhovaním, ktorý ovplyvňuje fotografie uložené ako súbory GIF, pomocou skutočných farieb, ale výsledkom môžu byť veľmi veľké obrázky. Staršie mobilné telefóny a bežné telefóny tiež dobre nepodporujú obrázky PNG.
Obrázky SVG
SVG znamená Scalable Vector Graphic. Na rozdiel od formátov založených na rastroch, ktoré sa nachádzajú v súboroch JPG, GIF a PNG, používajú tieto súbory vektory na vytvorenie veľmi malých súborov, ktoré je možné vykresliť v akejkoľvek veľkosti bez straty kvality a zvýšenia veľkosti súboru. Sú vytvorené pre ilustrácie, ako sú ikony a dokonca aj logá.
Príprava obrázkov na doručenie na web
Bez ohľadu na to, aký formát obrázkov použijete, zabezpečte, aby boli všetky obrázky na danom webe pripravený na doručenie na web. Príliš veľké obrázky môžu spôsobiť pomalý chod stránok a ovplyvniť celkový výkon. V boji proti tomu tieto obrázky musia byť optimalizované nájsť rovnováhu medzi vysokou kvalitou a najmenšou možnou veľkosťou súboru na tejto úrovni kvality.
Výber správneho formátu obrázkov je súčasťou bitky, ale ďalší krok v tomto dôležitom procese doručovania na web je tiež príprava týchto súborov.