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 v Chromu, Opeře, Edge a konečně i ve Firefoxu (2/2019), nefunguje v Exploreru
  • WebP získáme např. pomocí editoru GIMP nebo Adobe Photoshop (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, 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