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)
}