Mezi běžné příklady typů obrázků na webu patří GIF, JPG, a PNG. Soubory SVG. Tyto různé formáty nabízejí webovým návrhářům různé možnosti optimalizace vizuální přitažlivosti webu.
GIF obrázky
Soubory GIF použijte pro obrázky, které mají malý, pevný počet barev. Soubory GIF jsou vždy omezeny na maximálně 256 jedinečných barev. Algoritmus komprese pro soubory GIF je méně složitý než pro soubory JPG, ale při použití na ploché barevné obrázky a text vytváří velmi malé velikosti souborů.
Formát GIF není vhodný pro fotografické snímky nebo snímky s přechodovými barvami. Vzhledem k tomu, že formát GIF má omezený počet barev, přechody a fotografie po uložení jako soubor GIF skončí s pruhy a pixelací.
JPG obrázky
Obrázky JPG použijte pro fotografie a další obrázky, které mají miliony barev. Využívá složitý kompresní algoritmus, který umožňuje vytvářet menší grafiku tím, že ztrácí část kvality obrazu. Tomu se říká „ztrátová“ komprese, protože při komprimaci obrazu dojde ke ztrátě některých obrazových informací.
Formát JPG není vhodný pro obrázky s textem, velké bloky plné barvy a jednoduché tvary s ostrými hranami. Je to proto, že když je obrázek komprimován, text, barva nebo čáry se mohou rozmazat a výsledkem bude obrázek, který není tak ostrý, jako by byl uložen v jiném formátu.
Obrázky PNG
Formát PNG byl vyvinut jako náhrada za formát GIF, když se ukázalo, že na obrázky GIF se bude vztahovat poplatek. Grafika PNG má lepší kompresní poměr než obrázky GIF, což má za následek menší obrázky než stejný soubor uložený jako GIF. Soubory PNG nabízejí průhlednost alfa, což znamená, že můžete mít oblasti obrázků, které jsou buď zcela průhledné, nebo dokonce využívají celou řadu průhledností alfa. Vržený stín například používá řadu efektů průhlednosti a byl by vhodný pro PNG (nebo nás můžete jednoduše ukončit pomocí stínů CSS).
Obrázky PNG, například GIF, nejsou pro fotografie vhodné. Problém s pruhy, který ovlivňuje fotografie uložené jako soubory GIF, je možné obejít pomocí skutečných barev, ale výsledkem mohou být velmi velké obrázky. Obrázky PNG také dobře nepodporují starší mobilní telefony a běžné telefony.
SVG obrázky
SVG znamená Scalable Vector Graphic. Na rozdíl od formátů založených na rastrech nalezených v JPG, GIF a PNG používají tyto soubory vektory k vytvoření velmi malých souborů, které lze vykreslit v jakékoli velikosti bez ztráty kvality a zvýšení velikosti souboru. Jsou vytvořeny pro ilustrace, jako jsou ikony a dokonce i loga.
Příprava obrázků pro doručování na web
Bez ohledu na to, jaký formát obrázků používáte, zajistěte, aby byly všechny obrázky na tomto webu připraveno k doručení na web. Příliš velké obrázky mohou způsobit pomalý běh webu a ovlivnění celkového výkonu. V boji proti tomu tyto obrázky musí být optimalizovány najít rovnováhu mezi vysokou kvalitou a nejnižší možnou velikostí souboru na této úrovni kvality.
Výběr správného formátu obrázků je součástí bitvy, ale také ujištění, že jste tyto soubory připravili, je dalším krokem v tomto důležitém procesu doručování na web.