Formáty obrázků pro web, volba optimálního formátu

Tento článek má za cíl Vám ukázat starší a plně podporované obrázkové formáty, ale také moderní formáty, které jsou v drtivé většině prohlížečů již podporovány a se správným fallback voláním pro starší prohlížeče, které tyto formáty nepodporují, je můžete již dnes nabízet drtivé většině uživatelů, kteří ocení rychlé a efektivní načtení stránek.

Formáty obrázků pro web

GIF (Graphics Interchange Format):
tento formát byl vydán v roce 1987 společností CompuServe a je vhodný pro jednoduché animace, pohybové grafiky a ikony. Nicméně je potřeba si uvědomit, že tento formát je v dnešní době značně překonán.

• Výhody:
  vytváří krátké animace ve smyčce, podporuje průhlednost, plná podpora prohlížeči
• Nevýhody:
  omezená paleta barev, používá maximálně 256 barev, nízká kvalita

JPEG (Joint Photographic Experts Group):
v drtivé většině dnešních webů jeden z nejběžněji používaných formátů pro obrázky na webu. Tento formát byl uvolněn v roce 1992 konsorciem Joint Photographic Experts Group. Tento formát je i v dnešní době stále populárním a zřejmě ještě dlouho bude díky svému rozšíření a podpoře napříč hardware i software.

• Výhody:
  vyniká svojí kompresní metodou se snížením kvality a velikosti v přijatelném poměru s možností progresivního vykreslování v maximálně 8bit hloubce. Plná podpora prohlížeči.
• Nevýhody:
  nepodporuje průhlednost, při vysoké kompresi ztrácí detaily

PNG (Portable Network Graphics):
formát obrázků, který se používá zejména u obrazků, kde je vyžadované průhledné pozadí, je beztrátový a vyšel již v roce 1996 jako reakce na licenční zpoplatnění formátu GIF.

• Výhody:
  podporuje průhlédné pozadí, beztrátovou kompresi, není omezen 256 barvami a podporuje 8 bit hloubku. Plná podpora prohlížeči.
• Nevýhody:
  není vhodný pro fotografie díky beztrátové kompresi, soubory jsou skoro vždy větší než JPEG

WebP:
jedná se o formát obrázků, který byl uvolněn společností Google již v roce 2010 a kombinuje výhody formátu JPEG i PNG. Formát WebP je založen na kompresním formátu VP8 vyvinutém firmou On2 Technologies, kterou později převzala společnost Google. VP8 byl původně určen pro kompresi videa. Nicméně Google později uzpůsobil formát pro kompresi statických obrázků.

• Výhody:
  podporuje beztrátové kódování, alfa kanál a je koncipován jako náhrada za JPEG a PNG. Obvykle poskytuje lepší kompresi a menší velikosti souborů než JPEG nebo PNG. Podporuje průhlednost a animace.
• Nevýhody:
  před rokem 2022 byla jeho podpora omezená. V Apple zařízeních podpora až od macOS 11 BigSur.
• Aktuální podpora:
  https://caniuse.com/webp

AVIF:
formát byl uvolněn v roce 2018 orgnizací Alliance for Open Media, který vychází z otevřeného formátu kódování videa AV1. Formát AVIF vyniká svojí vysokou kvalitou a efektivní kompresí. 

• Výhody:
  vysoká kvalita, efektivní komprese, podpora HDR, podpora průhlednosti. Podporuje ztrátovou i bezztrátovou kompresi, alfa kanál, animace a další.
• Nevýhody:
  neumí progresivní vykreslování, aktuálně (říjen 2023) nepodporuje Edge, Opera mini a KaiOS Browser
• Aktuální podpora:
  https://caniuse.com/avif

SVG (Scalable Vector Graphics):
je otevřený a standardizovaný formát pro vektorovou grafiku, který byl uvolněn konsorciem W3C (World Wide Web Consortium) v roce 2001. SVG je založen na XML (eXtensible Markup Language), což z něj činí snadno čitelný a upravitelný datový soubor pro obrazové materiály. SVG se hojně používá ve webdesignu pro ikony, loga, grafiku a jiné obrázky, které musí být škálovatelné na různých zařízeních bez ztráty kvality, a to zejména pro animace.

Díky otevřenosti a velmi vysoké podpoře ve webových prohlížečích i grafických editorech se SVG stalo populárním formátem pro vektorovou grafiku na webové stránky. Výhodou SVG je také to, že umožňuje vytvářet interaktivní grafiku pomocí JavaScriptu a animace pomocí CSS.

• Výhody:
  umožňuje vytvářet interaktivní grafiku (animace) za pomocí JS a CSS, beztrátová kvalita, malá velikost, snadná editace pomocí textového editoru. Podpora všemi prohlížeči.
• Nevýhody:
  nehodí se pro fotorealistické obrazové podklady

Jaké formáty zvolit?

Výběr vhodných formátů závisí na mnoha faktorech. Pro fotorealistické obrázky můžete použít JPEG, pro průhledné obrázky naopak PNG. Nicméně v dnešní době se určitě hodí použít i formát WebP, který nabízí dobrý kompromis mezi kvalitou a velikostí souborů.

SVG formát je vhodné použít pro webdesignové prvky webu, které potřebujeme vykreslovat ve vektorové grafice bez ztráty kvality se zachováním ostrosti.

AVIF je výborným a moderním formátem, který získává na popularitě díky své vysoké kvalitě a velmi efektivní kompresi. Optimalizace webových obrázků je důležitá pro rychlé a efektivní načítání webové aplikace. Použití správného formátu je jen jednou částí rovnice správné optimalizace.

Budoucnost obrazových formátů

V současné době jsou v přípravě další zajímavé formáty WebP2 a JPEG-XL, přičemž JPEG-XL je přímým nástupcem JPEG formátu od stejného konsorcia.

WebP2:
WebP 2 je experimentální obrazový kodek založený na WebP. WebP 2 nebude vydán jako obrazový formát, ale je používán jako hřiště pro experimenty s kompresí obrazu. Více informací: https://chromium.googlesource.com/codecs/libwebp2/

JPEG-XL:
je moderní formát vyvinutý s cílem nabídnout vysokou kvalitu komprese. Byl navržen jako nástupce tradičního formátu JPEG, který je používán mnoho let pro kompresi obrázků na webu a v dalších digitálních médiích.

• Výhody:
  vysoká kvalita a efektivní komprese, podpora pro statické i animované obrázky, podpora vícevrstvé komprese (progresivní načítání), open source
• Nevýhody:
  zatím (říjen 2023) podporuje pouze prohlížeč Safari od verze 17.0 společnosti Apple.
• Aktuální podpora:
  https://caniuse.com/?search=JPEG-XL