HTML5 element <picture> a formát obrázků 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ší 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 zatím jen v Chromu a Opeře (7/2018).
  • WebP získáme např. pomocí GIMP (7/2018).

Příklad:

<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 a Opeře funguje <picture> i WebP (zobrazí se fotka stromu, na rozlišení do 1024px fotka hor), ve Firefoxu a Edge funguje <picture>, ale nikoliv WebP (zobrazí se PNG - logo HTML5), v Exploreru nefunguje nic, zobrazí se JPG (logo Moodle).


logo