Existuje niekoľko formátov obrázkov, ktoré je možné použiť na webových stránkach. Niektoré bežné príklady sú GIF , JPG a PNG . Súbory SVG sa tiež dnes bežne používajú na webových stránkach a web dizajnéri ponúkajú ešte ďalšiu možnosť online obrázkov.
Obrázky GIF
Použite súbory GIF pre obrázky, ktoré majú malý, pevný počet farieb. Súbory GIF sa vždy redukujú na maximálne 256 jedinečných farieb. Kompresný algoritmus pre súbory GIF je menej komplexný ako pre súbory JPG, ale keď sa používa na plochých farebných obrázkoch a textoch, 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. Vzhľadom k tomu, že formát GIF má obmedzený počet farieb, gradienty a fotografie skončia s páskovaním a pixeláciou, keď sa uloží ako súbor GIF.
Stručne povedané, použili by ste GIF len na jednoduché obrázky s len niekoľkými farbami, ale mohli by ste tiež použiť PNG (viac o tom krátko).
JPG obrázkov
Použite obrázky JPG pre fotografie a ďalšie obrázky, ktoré majú milióny farieb. Používa komplexný algoritmus kompresie, ktorý vám umožňuje vytvoriť menšiu grafiku tým, že stratíte časť kvality obrazu. Toto sa nazýva kompresia "lossy", pretože niektoré informácie o obrázku sa stratia, keď je obraz komprimovaný.
Formát JPG nie je vhodný pre obrázky s textom, veľké bloky plnej farby a jednoduché tvary s ostrými hranami. Je to preto, že keď je obraz komprimovaný, text, farba alebo čiary môžu rozmazať, čo vedie k obrazu, ktorý nie je taký ostrý, ako by bol uložený v inom formáte.
Obrázky JPG sa najlepšie používajú pri fotografiách a obrázkoch, ktoré majú veľa a prirodzených farieb.
Obrázky PNG
Formát PNG bol vyvinutý ako náhrada za formát GIF, keď sa ukázalo, že obrázky GIF by podliehali poplatku za autorské práva. Grafika PNG má lepšiu rýchlosť kompresie ako obrázky GIF, ktoré vedú k menším obrázkom, než je ten istý súbor uložený ako GIF. Súbory PNG ponúkajú transparentnosť alfa, čo znamená, že môžete mať oblasti obrázkov, ktoré sú buď úplne transparentné, alebo dokonca používajú rad alfa priehľadnosti. Napríklad, kvapka tieňa využíva celý rad efektov transparentnosti a bola by vhodná pre PNG (alebo ste namiesto toho mohli skončiť pomocou stínov CSS).
Obrázky PNG, ako sú GIF, nie sú vhodné pre fotografie. Je možné obísť problém s páskovaním, ktorý ovplyvňuje fotografie uložené vo formáte GIF pomocou pravých farieb, čo však môže viesť k veľmi veľkým obrazom. Obrázky PNG nie sú dobre podporované staršími mobilnými telefónmi a funkčnými telefónmi.
PNG používame pre akýkoľvek súbor, ktorý vyžaduje transparentnosť. Používame tiež PNG-8 pre ľubovoľný súbor, ktorý by bol vhodný ako GIF, namiesto toho použite tento formát PNG.
Obrázky SVG
SVG znamená škálovateľnú vektorovú grafiku. Na rozdiel od formátov vo formáte raster, ktoré sa nachádzajú vo formátoch JPG, GIF a PNG, tieto súbory používajú vektory na vytváranie veľmi malých súborov, ktoré je možné vykresliť v akejkoľvek veľkosti bez straty kvality zväčšenia veľkosti súboru. Sú vytvorené pre ilustrácie ako ikony a dokonca aj logá.
Príprava obrázkov na poskytovanie webových stránok
Bez ohľadu na to, aký formát obrázkov používate a že vaša webová lokalita určite používa množstvo rôznych formátov na všetkých svojich stránkach, musíte zabezpečiť, aby všetky obrázky na tejto stránke boli pripravené na doručenie na webe . Príliš veľké obrázky môžu spôsobiť pomalé spustenie stránok a vplyv na celkový výkon. V záujme boja proti týmto problémom musia byť tieto obrazy optimalizované, aby sa našla rovnováha medzi vysokou kvalitou a najnižšou možnou veľkosťou súborov v tejto kvalite.
Výber správneho formátu obrázkov je súčasťou bitky, ale tiež sa uistite, že ste pripravili tieto súbory, je ďalším krokom v tomto dôležitom procese poskytovania webových stránok.
Originálny článok od Jennifer Krynin. Upravil Jeremy Girard.