Obrázkové formáty

Velikost obrázkových souborů se snažíme držet co nejmenší, aby k návštěvníkům přes internet rychle doputovaly. Nepoužíváme proto zbytečně příliš kvalitní fotografie například pro malé náhledy v galerii. Pro zmenšení obrázků se ti může hodit online nástroj Squoosh. Další možnou úsporou je volba vhodného formátu, přípony souboru. Na webu se najčastěji setkáváme s .jpg, .png, .svg.

Nejčastější formáty

JPG

Vhodný na fotografie, kdy není kladen důraz na přesnost každého pixelu, protože používá ztrátovou kompresi. (Často s nastavením „progresivního renderování“, kdy se obrázek na pomalém připojení postupně zaostřuje místo načítání po řádcích od shora dolů.)

PNG

Občas za cenu větší velikosti nabízí na pixel přesné zaznamenání obrazu. Vhodné pro snímky obrazovky. Podporuje průhlednost.

SVG

Vektorový formát vodný zejména pro ikonky, logo, obrázky složené z geometrických tvarů. Lze v prohlížeči zvětšovat bez ztráty kvality. Obsah souboru je v čitelné podobě připomínající HTML.

Další používané

GIF

Krátké animace s nízkým počtem barev. Vhodné pro krátké smyčky. Pro větší, delší záznamy používající více barev volíme spíše video formáty jako MP4.

WEBP

Kombinuje výhody JPG a PNG, ale prohlížeče ho začali podporovat teprve nedávno.

ICO

Používaný pouze pro ikonku záložky (favicon.ico). Postupně nahrazovaný modernějšími formáty.

Volitelné čtení na doma

Responzivní weby často vyžadují různě veliké obrázky podle velikosti zařízení. Jeden soubor/fotografie může být zbytečně moc velký na malé obrazovce nebo naopak moc malý, nekvalitní na obrazovce velké. Pomocí atributů srcset a sizes můžeme jednomu HTML obrázku přiřadit více souborů s odlišnými parametry. Více například na Vzhůru dolů nebo MDN.