HTML5 element <picture> a formát WebP

<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">  <img src="logo_Moodle.jpg" alt="obrázek" />  </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).