Jaký vybrat formát obrázku na web

10.10.2019

Připravujete obrázky pro web a nevíte, jaký formát použít? A co vlastně ty přípony znamenají? Jak je vidět z obrázku, není to až tak složité.

Srovnání formátů obrázků

JPG pro fotky

JPG (nebo také JPEG) je na webu nejběžnější formát, většinou funguje dobře a pro fotky je to ideální volba.

Problém je ale u obrázků s velkými jednobarevnými plochami a ostrými přechody – na těch se objevují nepěkné fleky. JPG totiž používá tzv. ztrátovou kompresi. Díky ní je výsledná (datová) velikost menší než u původního obrázku (obrázek se tak rychleji načítá), snižuje se ale kvalita obrázku.

Podrobné informace o formátu JPG jsou třeba na https://cs.wikipedia.org/wiki/JPEG

PNG na loga a kresby

Pokud má obrázek průhledné (transparentní) pozadí, tak je nejlepší použít formát PNG.

fotka motýla s průhledným pozadím
fotka motýla s průhledným pozadím na žlutém pozadí

Tento formát je vhodný také na loga a obrázky s jednolitými barevnými plochami, jako jsou infografiky apod.

Podrobně je formát PNG popsán na
https://cs.wikipedia.org/wiki/Portable_Network_Graphics

GIF na animace

Formát GIF také podporuje průhledné pozadí, umožňuje ale použít jen 256 barev a nepodporuje částečnou průhlednost. Proto je vhodnější použít PNG.

GIF ale podporuje animaci, je tak možné vytvořit krátké obrázkové klipy a nahradit tak video.

Informace k formátu GIF jsou na
https://cs.wikipedia.org/wiki/GIF

A co SVG?

Pro kresby, loga a další grafiku je ideální formát SVG. Je to vektorová kresba, kterou je možné libovolně zvětšovat bez ztráty kvality.

     

Soubor SVG v sobě ale může obsahovat spustitelné skripty a proto může představovat bezpečnostní díru. Některé redakční systémy (jako třeba WordPress) v základním nastavení proto uživateli neumožní .svg soubor nahrát do knihovny médií. SVG grafika tak dnes „patří do rukou odborníků“, kteří ví, co dělají.

Více o formátu SVG na
https://cs.wikipedia.org/wiki/Scalable_Vector_Graphics