HTML5 element <picture> a nové formáty obrázků WebP a AVIF.

<picture>

  • Nový HTML5 element pro vkládání obrázků formátu WebP (viz níže).
  • Možné definovat varianty obrázku pro různá rozlišení v responzivním webdesignu (viz zdroják níže).
  • Automatický výběr podporovaného formátu prohlížečem (analogie s HTML5 elementem <video>, více zde).
  • Podpora všude kromě Exploreru (7/2018).
  • Musí být ale zároveň použit i <img />, jinak <picture> nefunguje nikde (viz zdroják níže)!

Formát WebP

  • Nový datově úspornější (cca o 30 %) bitmapový formát od Googlu.
  • Univerzálně použitelný místo všech standardních JPG, PNG a GIF (umí kompresi, průhlednost i animace).
  • Podpora v Chromu, Firefoxu, Opeře, Edge a konečně i v Safari, nefunguje v Exploreru
  • WebP získáme např. pomocí editoru GIMP nebo Adobe Photoshop.

Nový formát AVIF

  • Nejnovější datově úspornější (cca o 50 %) bitmapový formát od Alliance for Open Media.
  • Použitelný místo standardních JPG a PNG.
  • Díky novému typu komprese chroma-from-luma "nekostičkuje" a nemá rozmazané hrany.
  • Bohužel neumí progresivitu (postupné zobrazování).
  • Podpora zatím v Chromu a Opeře (11/2020), na podpoře pracuje Firefox.
  • Více informací, testy a ukázky v článku na vzhurudolu.cz

Příklad na responzivitu obrázku:

<picture>
  <source media="(min-width: 1025px)" srcset="strom.webp" type="image/webp" />
  <source media="(max-width: 1024px)" srcset="hory.webp" type="image/webp" />
  <source srcset="logo_HTML5.png"> <!-- pro prohlížeče, které WebP nepodporují -->
  <img src="logo_Moodle.jpg" alt="obrázek" /> <!-- pro prohlížeče, které nepodporují WebP ani <picture> -->
</picture>


V Chrome, Opeře, Edge a konečně i ve Firefoxu (2/2019) funguje <picture> i WebP (zobrazí se fotka stromu, na rozlišení do 1024px fotka hor), v Exploreru nefunguje nic, zobrazí se JPG (logo Moodle).
Ve starších verzích Firefoxu a Edge, kde již fungoval <picture>, ale nefungoval WebP, se zobrazí PNG (logo HTML5).
Responzivitu otestujte zoomem (na desktopu CTRL+kolečko na myši).


logo