Nápis – porovnání grafických formátů

Na této stránce porovnávám různé grafické formáty pro jednoduchou grafiku s ostrými hranami. Zde je reprezentována nápisem, ovšem podobné charakteristiky mají často například loga, ikony a další podobné grafické prvky.

Pro tento účel je samozřejmě ideální vektorový formát, kdy podobu obrázku vykresluje až prohlížeč „na míru“ svému prostředí. Přizpůsobí jej velikosti a rozlišení displeje. Vektorový formát je tím výhodnější, čím jednodušší je obrázek a čím větší má rozměry.

Velikost 600×159 pixelů

Začněme větším nápisem. Tady jsou rastrové formáty obecně v nevýhodě, protože velký počet pixelů znamená velká data, která i po kompresi značně přesahují objem dat formátu SVG.

Na straně SVG ovšem stojí i kvalita. Všimněte si, o kolik jsou ostřejší jeho hrany. U formátu JPEG s kvalitou 30 % už jsou na okrajích písmen viditelné artefakty, kdy jeho kompresní algoritmus některé pixely poblíž hran obarví podivnými barvami.

Pokud přepnete na tmavý režim, objeví se další zádrhel. Nápis byl připraven na průhledném pozadí, ovšem jeho změnu z bílé na černou zvládají jen SVG a plnobarevné PNG. PNG s omezenou barevnou paletou nemá plnohodnotný alfa kanál, ale jen jednu průhlednou barvu. Antialiasing byl proveden proti bílé barvě, takže se při tmavém pozadí kolem písmen objeví šeredný světlý obrys. JPEG neumí průhlednost vůbec, při exportu grafický editor nahradil průhlednou barvu bílou a přepnutí do tmavého režimu na tom nic nezmění.

SVG: 3 856 B

PNG plnobarevné: 17 057 B

PNG 32 barev: 5 674 B

JPEG 60 %: 19 718 B

JPEG 30 %: 10 981 B

Velikost 200×53 pixelů

Při menších rozměrech klesá počet pixelů a s ním i velikost souborů v rastrových formátech. SVG je stejné, jedná se o tentýž soubor, jen jsem pomocí atributů width a height upravil jeho rozměry.

Délkou souboru se tady SVG ocitá někde uprostřed, bavíme se ale o rozdílech v jednotkách kilobajtů, čili nevýznamných. Ostatní výhody zůstávají na jeho straně. Stále je znatelně ostřejší než konkurenti a při menších rozměrech ostřejší vykreslení nabývá na významu. Nemá také problém se změnou pozadí. U formátu JPG s nižší kvalitou zde dochází už k dost významné degradaci.

SVG: 3 856 B

PNG plnobarevné: 2 578 B

PNG 32 barev: 1 469 B

JPEG 60 %: 6 023 B

JPEG 30 %: 3 446 B