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

Проверка поддержки формата WebP в браузерах является важной задачей веб-разработки, поскольку формат WebP обладает более эффективным сжатием изображений по сравнению с другими форматами, такими как JPEG и PNG.

Существует несколько способов проверить поддержку формата WebP в браузере. Один из наиболее распространенных подходов - это проверка объекта Image с использованием атрибута onload и свойства naturalWidth. Пример кода на JavaScript, который осуществляет такую проверку, может выглядеть следующим образом:

var img = new Image();
img.onload = function() {
  if (typeof img.naturalWidth === 'undefined' || img.naturalWidth === 0) {
    console.log('Браузер не поддерживает формат WebP');
  } else {
    console.log('Браузер поддерживает формат WebP');
  }
};
img.onerror = function() {
  console.log('Браузер не поддерживает формат WebP');
};
img.src = 'data:image/webp;base64,UklGRjIAAABXRUJQVlA4TA0AAAAvAAAAEADw/D4VAAAABmJLR0QA/wD/AP+gvaeTAAA=';

В этом примере создается новый объект Image и назначается обработчик события onload. При загрузке изображения мы проверяем, существует ли свойство naturalWidth и равно ли оно нулю. Если это так, то браузер не поддерживает формат WebP.

Однако, хотя этот подход является популярным, он не является идеальным, поскольку некоторые браузеры (например, Safari) могут поддерживать изображения WebP, но не устанавливать значение naturalWidth. В этом случае, код выше даст ложно-положительный результат о неподдержке формата.

Другой подход, который является более надежным, - это проверка поддержки формата WebP с использованием функции canUseWebP() (можно установить с помощью сценария Modernizr). Эта функция использует асинхронный подход, проверяя, сможет ли браузер успешно загрузить изображение WebP. Пример кода:

function canUseWebP(callback) {
  var img = new Image();
  img.onload = function() {
    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function() {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRjIAAABXRUJQVlA4TA0AAAAvAAAAEADw/D4VAAAABmJLR0QA/wD/AP+gvaeTAAA=';
}

canUseWebP(function(supported) {
  if (supported) {
    console.log('Браузер поддерживает формат WebP');
  } else {
    console.log('Браузер не поддерживает формат WebP');
  }
});

В данном примере используется асинхронный подход с использованием функции обратного вызова (callback). Мы создаем новый объект Image и назначаем обработчики onload и onerror. При загрузке изображения проверяем его ширину и высоту. Если значения больше нуля, то браузер поддерживает формат WebP.

Это более надежный способ проверки поддержки формата WebP в браузере. Однако, имейте в виду, что в некоторых случаях эти методы могут давать ложные срабатывания (ложно-положительные или ложно-отрицательные результаты). При разработке сайта всегда рекомендуется провести тщательное тестирование на различных браузерах и платформах, чтобы убедиться, что проверка работает должным образом.