Плохое ли такое решение проверки поддержки браузера формата webp?

Question

[Елена]

Я добавила в head такой скрипт

<script>
  fetch('/img/pixel-webp.webp')
    .then(res => {
      if (res.ok) {
        document.documentElement.classList.add('webp');
      } else {
        document.documentElement.classList.add('no-webp');
      }
    })
    .catch(err => {
      document.documentElement.classList.add('no-webp');
    });
</script>

он работает хорошо на ios тоже. Вот это костыль? Или норм решение? Может как-то лучше есть варианты?

Comments

[Владислав Лысков]

а разве есть браузеры умеющие в fetch но не умеюшие в webp ?

[Владислав Лысков]

и разве фетчем в данном случае ты не проверяешь просто существование файла?

[Елена]

Владислав Лысков, нет конечно. Фетч вернет ошибку, если браузер не поддерживает формат

[Владислав Лысков]

Елена, ну и вообще зачем эти шаманства если есть picture

[Елена]

Владислав Лысков, для css

[Lynn «Кофеман»]

Елена,
> Фетч вернет ошибку, если браузер не поддерживает формат

Кто вам сказал такую глупость?

[Елена]

Lynn «Кофеман», блин, а почему-то думала что это работает. И я это где-то проверяла, и работало. Может на ios работает такой вариант. Сейчас проверила на старой мозиле и ничерта не работает))

Answer 1

[Ivan Ustûžanin]

плохое: это всего лишь проверка того, что fetch работает и картинка есть на сервере

либо Content Negotiation на сервере при отдаче картинки, т.к. Safari только при запросе картинок, шлёт, что он поддерживает webp
либо загрузить через src в new Image() и у него ловить load или error

я бы пошёл по первому пути

Answer 2

[Recreator]

А если так?

var webPsupport = (function() {
  var webP = new Image();
  webP.onload = WebP.onerror = function () {
    callback(webP.height == 2);
  };
  webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
});

document.write(webPsupport ? 'webP supported!' : 'webP not supported.');

Answer 3

[Сергей]

https://developers.google.com/speed/webp/faq#how_c...