Jaké použít obrázky v roce 2021?

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:

rozměrJPEGWebPAVIF
100x100px9598 – 10070 – 80
300x300px8590 – 9560 – 70
700x700px6585 – 9050 – 60
1000x1000px5080 – 8540 – 50*
U AVIF nad 1000px je potřeba ověřit, zda kvalita pod 50% neprodukuje artefakty.

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.

5 komentářů u „Jaké použít obrázky v roce 2021?“

  1. Dobrý deň. WordPress používam už dva roky a za ten čas som nahral do webu cez 400 .jpeg obrázkov. Doma som si pripravil obrázky avif avšak poslať ich do priečinka nie je možné. Aby sme si rozumeli, nechcem vymazať celý web a postaviť ho nanovo. Chcem priebežne povymieňať jpeg za avif. Lenže ako píšem databáza nechce vziať súbor avif. Pluginy jednoducho chcú už plnú databázu jpeg obrázkov konvertorovať do avif/webp a keďže tam mám obrázky ktoré sú aj 900kb tak sa mi to neoplatí stláčať. Jednoducho chcem do databázy posielať hotové avif. Poradíte čo urobiť aby databáza wp poznala súbor avif a prijala ho? Poradíte mi prosím ako zapísať akam?
    Srdečne ďakujem ak si nájdete čas.
    s pozdravom Navrátil

    1. WordPress používám jen na uživatelské úrovni a obrázky používám jen výjimečně, takže vám v tomhle moc neporadím.
      Ale můj WordPress ukládá nahrané obrázky na disk a nikoliv do databáze, takže problém bude asi v nějakém pluginu, který bude potřeba aktualizovat nebo nahradit za jiný.

    2. WebP a AVIF jsou ale navrženy pro web a lidi, kteří řeší 100kB JPG vs. 20kB AVIF.
      Pro Vás jako fotografa, kterému se 900kB fotka zdá dostatečně malá, je asi JPG nejvhodnější formát, protože dokáže nejlépe zkomprimovat obrázek při zachování optické kvality a barevnosti.
      Podle mých zkušeností mají formáty WEBP a AVIF v tomto ohledu příliš velkou chybovost a již při relativně nízké kompresy vznikají výrazné chyby (jednobarevné velké plochy, čtverce v detailech, apod.).
      Zkuste si připravit své fotek v různých formátech a kompresích a pak porovnat jejich kvalitu v detailech (nejlépe se komprese pozná např. na očích a vlasech) a barevnost na velkých plochách (např. nebe a mraky).

      1. Už som vyskúšal snáď všetko, tak snáď môj postreh niekomu pomôže. Takže toto nie je teoreticky: Ak máte k dispozácii fotgrafiu 6000x4000px s dátami 18MB do AVIF ju stlačíte na 1200 kB. Avšak fotografia bude mať naďalej rozmer 6000x4000px no fotografiu môžete rovno vykydnúť do koša. Je nepoužiteľná, nehodí sa ani na PC ako tapeta. Obraz je rozsypaný, takže nepoužiteľný. Skôr príde otázka, ako odložiť načítavanie pri prvom vstupe na web. Postarať sa o ten správny zápis do HT Access, alebo si zaplatiť CDN službu. Takže veľa zdaru fotografi. Northrem ďakujem za rýchlu odpoveď…

        1. Pokud jde o optimalizaci načítání, pro novější prohlížeče stačí přidat atribut <img ... loading="lazy"> ke každému obrázku a prohlížeč pak sám určí vhodný čas pro načtení (který by ale neměl být během samotného načítání stránky).

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Tato stránka používá Akismet k omezení spamu. Podívejte se, jak vaše data z komentářů zpracováváme..