WebP форматындағы қолдауды басқа сурет форматтарына fallback-пен қалай жүзеге асыруға болады?

Ең кең таралған әдіс — <picture> элементін немесе image-set() функциясы бар CSS-ті пайдалану.

<picture> элементі:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Суретті сипаттау">
</picture>

• Браузер алдымен image/webp қолдауын тексереді. Егер қолдау болса, .webp жүктеледі.
• Егер қолдау болмаса, <img> тегінің src атрибутынан сурет жүктеледі.

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 арқылы анықтау:

WebP қолдауын тексеру үшін JavaScript қолдануға болады және 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 {
    // Фолбек қолдану
  }
});