SVG vs PNG vs JPG: Pros & Cons

Pokud jde o vytváření obrázků pro web a jiné digitální účely, jaké formáty souborů vám poskytnou nejlepší výsledek? Musíte myslet na rychlost versus kvalitu obrazu a měřítko. Co byste tedy měli použít: SVG vs. PNG vs. JPG?

Byly chvíle, kdy jste právě použili formát JPG, aby se vešel na prostor při 72 dpi a pokračoval dál. Už ne. Obrazovky s vysokým rozlišením, vícenásobné výřezy a potřeba přehledného webu z něj učinily mnohem složitější proces. Pojďme se ponořit do výhod a nevýhod každého z těchto formátů!

SVG

SVG vypadá skvěle na jakoukoli velikost a funguje téměř pro jakýkoli typ obrázku kromě fotografie.

SVG neboli Scalable Vector Graphics je neuvěřitelně praktická. Proto ji návrháři používají častěji.

Protože SVG je vektorový formát, vypadají skvěle v jakékoli velikosti a pracují téměř pro jakýkoli typ obrázku kromě fotografie.

SVG je bezeztrátový formát - což znamená, že při komprimaci neztrácí žádná data - vykreslí neomezený počet barev a nejčastěji se používá pro grafiku a loga na webu a pro projekty, které budou zobrazeny na sítnici nebo na jiných obrazovkách s vysokým rozlišením.

Výhody SVG

• Vektorový formát se dobře vykresluje v jakékoli velikosti
• Schopnost vytvářet jednoduché vykreslení SVG v editoru kódu nebo textu
• Navrhujte a exportujte komplexní grafiku z aplikace Adobe Illustrator nebo Sketch
• Text SVG je přístupný
• SVG se snadno stylují a skriptují
• Formáty SVG jsou podporovány moderními prohlížeči a jsou odolné proti budoucnosti
• Formát je vysoce stlačitelný a lehký
• Dobré pro vyhledávání díky textovému formátu
• Podporuje průhlednost
• Umožňuje statické nebo animované obrázky

Nevýhody SVG

• Navrhování SVG může být komplikované
• Nerespektujte v některých degradovaných prohlížečích
• Omezená podpora e-mailových klientů

Chcete vědět více? Máme dva další průvodce vysvětlující více o SVG: Průvodce praktickým začátečníkem pro SVG a jak (a proč) SVG se chystá převzít.

PNG

PNG nabízí něco, co JPG nemůže - průhlednost.

PNG neboli Portable Network Graphics je formát určený pro web, který nabízí něco, co JPG nemůže - průhlednost. Jen proto je PNG tak oblíbená při nahrávání prvků, jako jsou loga na návrhy webových stránek.

Existují dva typy PNG - PNG-8 a PNG-24. PNG-8 používá omezenější paletu barev s pouhými 256 barvami, má o něco lepší průhlednost a exportuje v malé velikosti. PNG-24 používá neomezenou paletu barev, udržuje průhlednost, ale exportuje ve větší velikosti. Oba typy PNG mají bezeztrátovou kompresi.

I když jsou formáty PNG podobné GIF, nepodporují animaci. Tento formát se nejčastěji používá pro ikony, malé statické obrázky nebo obrázky, které vyžadují průhlednost.

Výhody PNG

• Podporuje průhlednost
• Dobré pro obrázky s textem v nich
• Formáty PNG vykreslují loga dobře
• Zahrnuje vložený textový popis pro vyhledávače
• PNG-8 má malou velikost souboru a je nejlehčí
• Vývoz bez zubatých okrajů

Nevýhody PNG

• Velikost souborů rychle roste u velkých souborů, jako jsou obrázky
• Někteří starší e-mailoví klienti mají problémy s jejich vykreslením
• Žádná animace
• Soubory PNG-24 se mohou zvětšit; ne tak dobré pro sdílení na webu

JPEG

Pokaždé, když je fotografie obnovena a exportována jako JPG, bude degradována.

JPG, nebo Joint Photographic Experts Group, nebo JPEG, je pravděpodobně nejznámějším obrazovým formátem. Je to výchozí možnost pro většinu ukládání obrázků, protože díky prakticky neomezenému barevnému zobrazení je šetrná k fotografiím.

JPG také nabízí možnost zvolit, jak komprimovaný obrázek má být od 0 procent (těžká komprese) do 100 procent (bez komprese). Většina návrhářů volí něco v rozmezí 60 až 70 procent. Obrázky na této úrovni komprese stále vypadají dobře, ale velikosti souborů jsou výrazně menší.

JPG používá ztrátovou kompresi a neuchovává původní data během komprese. Pokaždé, když je fotografie obnovena a exportována jako JPG, bude degradována.

Formát JPG se nejčastěji používá pro obrázky, fotografie a cokoli s mnoha barvami.

Výhody JPEG

• Skvělé pro vysoké barvy a fotografie
• Snadné zmenšení velikosti souboru
• Rendrování konzistentně v e-mailových klientech

Nevýhody JPEG

• Žádná průhlednost
• Vytváří zubaté okraje pro text
• Žádná animace
• Ztráta formátu
• Žádná automatická metadata pro vyhledávání, musí zahrnovat informace

Jaký formát byste měli použít?

Nyní, když víte, jaké jsou rozdíly mezi SVG vs. PNG vs. JPG, co byste měli použít?

Na tuto odpověď si můžete položit několik otázek.

Potřebujete vektorový nebo rastrový formát?
Vektor: SVG
Rastr: JPG nebo PNG

Potřebujete průhlednost?
Ano: SVG nebo PNG
Ne: JPG

Používáte vysoce barevný obrázek?
Ano: JPG nebo PNG
Ne: SVG

Je to velká fotka?
Ano: JPG
Ne: PNG

Obsahuje obrázek text?
Ano: PNG
Ne: JPG

Je pro vás důležitá bezeztrátová komprese?
Ano: SVG nebo PNG
Ne: JPG

Je třeba grafiku aktualizovat a znovu nasadit?
Ano: SVG
Ne: PNG nebo JPG

Používáte animaci?
Ano: SVG
Ne: JPG nebo PNG

Závěr

Všechny tři obrazové formáty - SVG, PNG a JPG - mají praktické a rozsáhlé aplikace. Zatímco SVG je nejnovější formát a lze jej často uložit do nejmenší velikosti souboru, není to vždy nejlepší volba.

Přemýšlejte o tom, jak v projektu používáte obrázky, když vyberete typ souboru, abyste našli ten, který bude nejlépe vyhovovat tomu, čeho se snažíte dosáhnout. Můžete dokonce zjistit, že projekty obsahují obrázky, které používají všechny tři typy souborů. (Je to vlastně docela běžné!)