Odpověď na otázku v titulku je velmi jednoduchá: AVIF a WEBP obrázky. Chcete vědět víc?

Tento článek navazuje na starší Jak na průhlednost obrázků? z roku 2015, který již není aktuální kvůli tomu, že popsané formáty obrázků již nejsou relevantní hlavně kvůli tomu, že všechny prohlížeče již podporují formát WEBP.

Pokud vás nezajímá vznik WEBP a AVIF, přeskočte na další kapitolu.

Úvod

Co je to AVIF?

Formát WEBP (posaný níže) je sice prezentován jako free-to-use (zdarma pro všechny), ale byl vyvinut a je stále vlastněn firmou Google. Stejně tak ostatní webové formáty (JPG, BMP/ICO) byly vyvinuty firmami (konkrétně JPEG a Microsoft) nebo obsahují licencované technologie (GIF je založen na patentované LZW kompresy). Jediný nezávislý formát je tak PNG, který ale zase není vhodný pro složitější obrázky kvůli bezztrátovosti. A hlavně všechny formáty (kromě WEBP) jsou již zastaralé (vytvořeny mezi lety 1985 – 1995) a nesplňují potřeby moderní doby.

Proto (zhruba) v roce 2018 vznikla Aliance pro Otevřená Média (AOMedia), která má za cíl vytvořit formát, který bude nezávislí na firmách a licencích a také zajistit, aby to tak zůstalo. Členy Aliace jsou výrobci prohlížečů (Google, Microsoft, Apple a Mozilla), další internetové firmy (Amazon, Netflix, Facebook, apod.) a vlastníci patentů v oblasti zpracování audia a videa (Samsung, Huawei, Cisco, ARM, Nvidia a další). Aby se zajistila nezávislost, musejí se všichni členové aliance vzdát svých práv na patenty (ať už existující nebo budoucí) použité pro vývoj formátů v rámci AOMedia. Pro případ, že by některá externí firma držící potřebné patenty nechtěla přistoupit na podmínky a přidat se k Alianci, vkládají členové (a další dárci) část svých zisků do fondu určeného na odkup takových technologií a patentů.

Z výše popsaných důvodů se nepodařilo do Aliance začlenit MPEG (Motion Picture Expert Group), která stojí za formáty MPEG, AVC, HEVC a HEIF a jejíž technologie se používají ve filmovém průmyslu (technologie využívané na DVD a BluRay discích), při výrobě TV (AVC a HEVC jsou základem DVB-T) a dalších zařízení (Apple a Samsung využívají HEIF ve svých telefonech pro ukládání obrázků), a která svou činnost ukončila v červnu 2020 (nicméně se i nadále konají setkání (bývalých) členů).

Nutno poznamenat, že i AVIF používá HEIC kontejner vyvinutý MPEG pro ukládádní HEIF obrázků a který umožňuje ukládat i jiné snímky jako AV1, AVC nebo JPG.

Poznámka: zde vzniká trochu problém s pojmenováním, protože HEIF (High Efficiency Intra Frame nebo HEVC I-Frame nebo také High Efficiency Image Format) je formát obrázku (podobně jako JPG a PNG), zatímco HEIC (High Efficiency Image Container) je typ kontejneru (stejně jako AVI nebo TIFF). Většina lidí ale používá HEIF pro označení kontejneru, takže pak narazíte na výrazi jako „AVIF in HEIF“. Jde o podobný problém jako u JPG, kde JPEG je společnost, která formát vyvinula, ale samotný formát se označuje JFIF (JPEG’s File Interchangable Format), což ale většina lidí neví a říká mu prostě JPG nebo JPEG (a ti co to vědí, nechtěji vypadat jako nerdi :).

Aliance nejprve v roce 2018 představila video kodek AV1 (Alliance for open media’s Video codec version 1; nebo kratší AOMedia Video 1) a v roce 2019 i AVIF (AV1 Image Format), což je morální i technologický nástupce formátu WEBP, stejně jako je AV1 náhradou za připravovaný VP10.

AV1 a AVIF jsou přímí konkurenti formátů HEIF a HEVC od MPEG a proto také (jako v současnosti jediné) podporují technologie jako HDR a 10bitové a dokonce i 12bitové barvy. AVIF také podporuje bezztrátovou kompresy (obdoba PNG a TIFF), ale problém je, že používá YUV barvy, zatímco PNG a TIFF používají (nejčastěji) RGB nebo CMYK barvy a převod mezi těmito standardy není 100%, takže k nějakým drobným ztrátám vždy dojde. Samozřejmě AVIF podporuje i průhlednost (jak úplnou tak i částečnou), i když některé nástroje (ve vývoji v průběhu roku 2020) zatím tuto možnost nepodporují.

AVIF dosahuje o 20% – 40% lepší kompresy v porovnání s WEBP a o 50% – 70% lepší než JPEG. U PNG je rozdíl zcela radikální, protože při použití ztrátové komprese s průhledností můžete 1MB PNG zmenšit na 50kB a dosáhnout více než 95% úspory).

Podpora AVIF zatím pokulhává, protože reálně lze použít pouze v Chrome 85+, což ale na druhou strany na konci 2020 používá 25% uživatelů, takže pro ně je to určitě výhoda a webservery i tak ušetří značné procento trafiku (25% uživatelů * zhruba 50% úspora dat… a počty uživatelů budou jen růst).

Co je WEBP?

WEBP je formát vyvinutý firmou Google na základně video kodeku VP8, který koupila od firmy On2 Technologies (která do té doby vyvíjela Open Source kodeky TrueMotion později označované jako VP3 až VP7). Video kodek VP8 (a později i VP9) je základem služby YouTube (kterou Google také koupil), prohlížeče Chrome a video formátu WebM, který je konkurentem AVI (Microsoft Video), MP4 (MPEG video) a MKV (Open-Standard Matroska).

V současnosti (2020) Google pracuje na VP10 a WEBP2, ale otázkou je, jestli je dokončí, když zároveň pracuje na AV1 a AVIF (resp. VP10 byl již definitivně ukončen a zahrnut do AV1, takže je asi jen otázkou času, kdy se to stane i WEBP2).

Poté, co Firefox dostal podporu WEBP (sice jde o formát konkurence, ale Mozilla neměla žádný vlastní) a Opera a Edge přešli na jádro Chromium, se stal WEBP plně podporovaným formátem (zhruba od roku 2019); samozřejmě s výjimkou IE11 (update: v červnu 2022 byl IE definitivně ukončen, takže o jeho podpoře už ani není potřeba mluvit).

Kvalita AVIF a WEBP

V článku Jak určit kvalitu a kompresi JPG obrázků? jsem uvedl matematický vzorec pro výpočet kvality komprese obrázků na základě jejich velikosti a požadované kvality. Základní princip je ten, že čím větší je obrázek, tím vyšší kompresi můžete použít při zachování stejné optické kvality.

Pro WEBP a AVIF se dá použít podobný vzorec s drobnou úpravou vycházející z toho, jak jednotlivé algoritmy ukládají obrázek, v čem spočívá ztrátovost a jakou škálu používají pro stupeň komprese.

Zatímco u JPG se komprese může pohybovat v rozmezí od 98% (pro 100x100px neboli 0,01Mpx) až po 25% (20Mpx), u WebP by (u fotek) komprese neměla klesnout pod 80% a u AVIF pod 50%, protože pak u těchto kompresí dochází k přílišné produkci artefaktů nebo ztrátě barev, které výrazně snižují kvalitu obrázku (podobně jako u JPG s kompresí kolem 10%). Samozřejmě v konkrétních případech, kdy na vlastní oči ověříte kvalitu komprese, můžete použít WebP 70% nebo AVIF 40%, ale není to příliš vhodné např. pro automatické skripty.

Pokud používáte výpočet kvality pro JPG, můžete ho použít i pro WebP a AVIF s tím, že pro WebP použijte o zhruba 10% lepší kvalitu (tedy Quality * 1.1) a pro AVIF použijte zhruba tří čtvrtinovou kvalitu (tedy Quality * 0.75). U AVIF může být potřeba u menších obrázků (kolem 100x100px) použít 0.8 až 0.85 pro zlepšení kvality a naopak u obrázků větších než 1000px lze použít jen 0.7.

Pokud vzorec nepoužíváte, použijte tuhle tabulku:

Použití AVIF a WEBP na webu

I když by se mohlo zdát, že WEBP i AVIF budou brzy plně podporované, stále budou prohlížeče, které s nimi nebudou umět pracovat (IE11, koukám na tebe).

Proto je potřeba stále zachovat fallback v podobě JPG nebo PNG obrázku. V HTML je možno toho dosáhnout pomocí PICTURE:

<picture>
    <source type="image/avif" 
            srcset="picture.avif">
    <source type="image/webp" 
            srcset="picture.webp">
    <img src="picture.jpg">
</picture>

Do picture uvádíme AVIF jako první, protože má nejlepší kompresy a je tedy nejvýhodnější pro prohlížeče, které ho podporují. Následně uvedeme WEBP pro většinu ostatních (současných) prohlížečů. Na konci je fallback společný pro prohlížeče, které buď nepodporují WEBP ani AVIF nebo nerozumí tagu PICTURE.

Asi jste si všimli, že jsem v příkladu neuvedl responzivní varianty – ty měli smysl u JPG a PNG, kde rozdíl mezi 320px a 1920px obrázkem byly desítky nebo stovky kB, ale u WEBP a AVIF se obrázky liší jen jednotkami kB, takže je otázka, zda to ještě dává smysl. Ale to je jen na vás si podporu doplnit.

Pro použití v CSS neexistuje přímá možnost fallbacku (tak jako pro SVN, kde ji můžete svázat s podporou určitých vlastností). Jediná (nebo jedna z mála) možností je použít externí detekci (např. modernizr). Detekci můžete provést i na serveru, protože (nové) prohlížeče, které podporují WEBP a/nebo AVIF budou posílat správný MIME (tedy „image/webp“ a/nebo „image/avif„) v hlavičce Accept pro všechny požadavky (HTML, CSS, obrázky, apod.).

Samotné CSS pak již vypadá celkem jednoduše (kód kompatibilní s Modernizr):

body { background-image: url(bg.jpg); }
.webp body { background-image: url(bg.webp); }
.avif body { background-image: url(bg.avif); }

.icon { background-image: url(sprite.png); }
.webp.webp-alpha .icon
    { background-image: url(sprite.webp); }
.avif.avif-alpha .icon
    { background-image: url(sprite.avif); }

V CSS naopak uvádíme nejprve fallback s JPG nebo PNG a následně pak WEBP a AVIF, aby vyhrál ten nejlepší, prohlížečem podporovaný, formát. Pro obrázky s průhledností je lepší použít i třídu pro ověření, že prohlížeč podporuje průhlednost daného formátu.

Pokud ještě nemáte zkušenosti s PICTURE a chtěli byste ho v CSS formátovat, použijte tento kód:

img {  //formát pro všechny prohlížeče
    ...
}
picture > img { //jen ty, co podporují picture
    ...
}

Ještě přidám kód (pro PHP) jak na serveru ověřit, které formáty lze ve stránce použít:

<!DOCTYPE html>
<html <?php
if (!empty($_SERVER['HTTP_ACCEPT'])) {
  echo 'class="';
  $a = $_SERVER['HTTP_ACCEPT'];
  if (false !== strpos($a, 'image/webp')
  ) {
    echo 'webp webp-alpha ';
  } else {
    echo 'no-webp ';
  }
  if (false !== strpos($a, 'image/avif')
  ) {
    echo 'avif avif-alpha ';
  } else {
    echo 'no-avif ';
  }
  echo '"'; //ukončení atributu class
}
?>">
...

Tento kód sice přímo nekontroluje, zda prohlížeč podporuje průhlednost, ale prohlížeče, které danou hlavičku posílají, by ji měli podporovat. Navíc není problém kód rozšířit, pokud např. zaznamenáte chybu v průhlednosti u některého konkrétního prohlížeče, např. pomocí knihovny WhichBrowser.