Как реализовать поддержку формата WebP с фолбеком для других форматов изображений?

Наиболее распространенный способ — использовать элемент <picture> или CSS с функцией image-set().

<picture> элемент:

html

• Браузер сначала проверяет поддержку image/webp. Если поддерживается, загружает .webp.
• Если не поддерживается, загружает изображение из атрибута src тега <img>.

CSS с image-set():

css

• Браузер с поддержкой image-set() и image/webp загрузит WebP.
• В противном случае будет использован background-image фолбека.

CSS с @supports:

css