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

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

<picture> элемент:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание изображения">
</picture>

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

CSS с image-set():

.element {
  background-image: url("image.jpg"); /* Фолбек */
  background-image: image-set(
    url("image.webp") type("image/webp"),
    url("image.jpg") type("image/jpeg")
  );
}

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

CSS с @supports:

.element {
  background-image: url("image.jpg"); /* Фолбек */
}

@supports (image-set(url("x") type("image/webp"), url("x") type("image/jpeg"))) {
  .element {
    background-image: image-set(
      url("image.webp") type("image/webp"),
      url("image.jpg") type("image/jpeg")
    );
  }
}

• Более явное использование @supports для проверки поддержки image-set() и типа image/webp.

JavaScript-определение поддержки:

Можно использовать JavaScript для проверки поддержки WebP и динамически менять src или использовать другие классы, но это считается менее оптимальным, так как задерживает отображение контента и требует дополнительных запросов.

// Пример проверки поддержки WebP (упрощенный)
function checkWebp(callback) {
  const webp = new Image();
  webp.onload = webp.onerror = function() {
    callback(webp.height === 2);
  };
  webp.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4ICgAAAAwAQCdASoCAAIALmk0mk0iIiIiIgBoDvgbAQAAAP0ybQbAAADp+lWu/rXcAAAAA';
}

checkWebp(function(supported) {
  if (supported) {
    // Использовать WebP
  } else {
    // Использовать фолбек
  }
});