Existuje několik formátů obrázků, které lze použít na webových stránkách. Některé běžné příklady jsou GIF , JPG a PNG . Soubory SVG jsou také běžně používané na webových stránkách dnes, což webovým návrhářům poskytuje další možnost pro online obraz.
Obrázky GIF
Použijte soubory GIF pro obrázky, které mají malý, pevný počet barev. Soubory GIF jsou vždy zmenšeny na ne více než 256 jedinečných barev. Kompresní algoritmus pro soubory GIF je méně složitý než pro soubory JPG, ale při použití na plochých barevných obrázcích a textu vytváří velmi malé velikosti souborů .
Formát GIF není vhodný pro fotografické obrázky nebo obrázky s barevnými přechody. Vzhledem k tomu, že formát GIF má omezený počet barev, gradienty a fotografie se při uložení jako soubor GIF skončí páskováním a pixelací.
Stručně řečeno, použijete GIFy pouze pro jednoduché obrázky s pouze několika barvami, ale také můžete použít PNG (více o tom brzy).
JPG Obrázky
Použijte obrázky JPG pro fotografie a další obrázky, které mají miliony barev. Používá komplexní algoritmus komprese, který vám umožní vytvořit menší grafiku tím, že ztratíte část kvality obrazu. Toto se nazývá komprese "lossy", protože některé obrazové informace se při komprimování obrazu ztratí.
Formát JPG není vhodný pro obrázky s textem, velké bloky plné barvy a jednoduché tvary se ostrými hranami. Důvodem je to, že když je obraz komprimován, text, barva nebo řádky se mohou rozmazat a výsledkem je snímek, který není tak ostrý, jak by byl uložen v jiném formátu.
Obrázky JPG se nejlépe používají pro fotografie a obrázky, které mají spoustu přírodních barev.
Obrázky PNG
Formát PNG byl vyvinut jako náhrada formátu GIF, když se zdálo, že obrázky GIF budou předmětem poplatku za autorské poplatky. Grafika PNG má lepší kompresní poměr než obrazy GIF, které vedou k menším obrázkům než ke stejnému souboru uloženému 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í rozsah průhlednosti alfa. Například, stín stínu používá rozsah efektů průhlednosti a byl by vhodný pro PNG (nebo nám můžete místo toho ukončit pomocí stínů CSS).
Obrázky PNG, jako jsou GIF, nejsou vhodné pro fotografie. Je možné obejít problém s páskováním, který ovlivňuje fotografie uložené ve formátu GIF pomocí skutečných barev, což však může vést k velmi velkým obrazům. Obrázky PNG také nejsou dobře podporovány staršími mobilními telefony a funkčními telefony.
PNG používáme pro libovolný soubor, který vyžaduje průhlednost. Používáme také PNG-8 pro libovolný soubor, který by byl vhodný jako GIF, místo toho použije tento formát PNG.
Obrázky SVG
SVG znamená škálovatelnou vektorovou grafiku. Na rozdíl od formátů založených na rastru, které se nacházejí ve formátech JPG, GIF a PNG, používají tyto soubory vektory pro vytváření velmi malých souborů, které lze vykreslit v jakékoli velikosti bez ztráty kvality zvýšení velikosti souboru. Jsou vytvořeny pro ilustrace, jako jsou ikony a dokonce i loga.
Příprava obrázků pro webové doručení
Bez ohledu na to, který formát obrázku používáte, a vaše webové stránky určitě používají řadu různých formátů na všech svých stránkách, je třeba zajistit, aby všechny obrázky na tomto webu byly připraveny pro doručování na webu . Příliš velké obrazy mohou způsobit pomalý chod stránek a vliv na celkový výkon. K tomu je třeba optimalizovat tyto snímky, aby bylo možné nalézt rovnováhu mezi vysokou kvalitou a nejnižší možnou velikostí souboru v této kvalitě.
Výběr správného formátu obrázků je součástí bitvy, ale také ujistěte se, že jste tyto soubory připravili, je dalším krokem v tomto důležitém procesu doručování.
Původní článek Jennifer Krynin. Upravil Jeremy Girard.