Obrázky WEBP pro všechny prohlížeče do CSS

Nedávno jsem psal, jak jsem přidával obrázky WEBP na Poradte.cz. Vyskytnul se ještě jeden problém... Safari. To WEBP obrázky umí až od poslední verze a syntaxe, která pokryje všechny ostatní prohlížeče jí nestačí, má vlastní.

Pokud to někdo nemůže najít tady je řešení, které funguje.

Obrázky mám na webu v DIVu a jsou jako pozadí BACKGROUND-IMAGE ve stylu CSS. Proč jsou jako background image a ne normální obrázek? Protože pak jde použít jako sprite grafika. Ano v době HTTP2 už to nemá smysl, ale je to v tomto případě pohodlné. Nemusím obrázek dělit, když potřebuji každou půlku zvlášť a pak to zase vytvoří celek.

.styl-obrazku-divu{
/* klasický zápis pro starší Mozillu a ostatní */
background-image:url(https://www.adresa.cz/images/picture.png);

/* pochopí všechny nové prohlížeče resp pouze nové prohlížeče */
background-image:-webkit-image-set(url(https://www.adresa.cz/images/picture.webp)1x);

/* a tohle potřebuje staré Safari tedy např iPhone */
background-image:image-set(url(https://www.adresa.cz/images/picture.png)1x)
}