Формат изображений WebP известен тем, что обеспечивает превосходное сжатие без потерь и с потерями для изображений в Интернете. Используя WebP, веб-мастера и веб-разработчики могут создавать более мелкие и насыщенные изображения, которые делают Интернет невероятно быстрым. Размеры изображений без потерь в WebP на 26% меньше по сравнению с PNG. Изображения с потерями в WebP на 25-34% меньше сопоставимых изображений JPEG с эквивалентным индексом качества SSIM. Для получения дополнительной информации об этом формате, пожалуйста, не забудьте прочитать его введение разработчиками Google здесь. До даты вы не можете проверить, поддерживается ли этот формат в браузере в JavaScript, используя предопределенный метод, однако вы можете создать свой собственный метод, чтобы сделать это с помощью небольшой хитрости.
Логика для проверки того, поддерживается ли формат webp с помощью простого JavaScript, следующая: сначала вам нужна строка base64 с некоторым изображением в формате webp, в этом случае мы будем использовать белое изображение размером 1px, которое уже находится в этом формате. , то эта строка должна быть преобразована в BLOB-объект. Есть много способов конвертировать строку base64 в блоб, однако одним из самых простых является использование API выборки, доступного в браузере, а затем вызов из него метода blob. Это будет уже капля, которая может быть интерпретирована createImageBitmap функция браузера. createImageBitmap Метод существует на глобальном уровне как в Windows, так и в рабочих. Он принимает различные источники изображений и возвращает Обещание, которое разрешается в ImageBitmap.
В этой статье мы расскажем вам о двух методах, которые помогут вам проверить, поддерживается ли этот формат в вашем браузере с различными версиями JavaScript.
Стандартный JavaScript
Использование типового подхода с обратными вызовами, который поддерживается везде (при условии, что поддерживается API выборки)
function WebpIsSupported(callback){
// If the browser doesn't has the method createImageBitmap, you can't display webp format
if(!window.createImageBitmap){
callback(false);
return;
}
// Base64 representation of a white point image
var webpdata = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
// Retrieve the Image in Blob Format
fetch(webpdata).then(function(response){
return response.blob();
}).then(function(blob){
// If the createImageBitmap method succeeds, return true, otherwise false
createImageBitmap(blob).then(function(){
callback(true);
}, function(){
callback(false);
});
});
}Тогда вы можете использовать метод, как:
// You can run the code like !
WebpIsSupported(function(isSupported){
if(isSupported){
console.log("Supported");
}else{
console.log("Not supported");
}
});ES2017
С ECMAScript 2017 вы можете упростить весь предыдущий код, используя асинхронные функции вместо обратных вызовов:
async function WebpIsSupported() {
// If the browser doesn't has the method createImageBitmap, you can't display webp format
if (!self.createImageBitmap) return false;
// Base64 representation of a white point image
const webpData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';
// Retrieve the Image in Blob Format
const blob = await fetch(webpData).then(r => r.blob());
// If the createImageBitmap method succeeds, return true, otherwise false
return createImageBitmap(blob).then(() => true, () => false);
}И вы можете проверить, поддерживается ли формат, например:
// You can run your code like
(async () => {
if(await WebpIsSupported()) {
console.log('Is Supported');
} else {
console.log("Isn't supported");
}
})();Избыточность? Я думаю да.
Хотя до этого момента у нас не было реального варианта использования больше, чем для оптимизации загрузки изображений в приложение, эта реализация более информативна, поскольку она может дать представление о том, как легко проверить, поддерживается ли формат в браузере или нет. Самое смешное в исходном фрагменте (стандартный JavaScript) заключается в том, что если вы включите фрагмент в свое приложение, и он будет работать в старых браузерах, вам также потребуется проверить поддержку API выборки и дополнительный способ преобразования базовая строка 64 к BLOB-объекту, а затем использовать этот BLOB-объект с createImageBitmap метод. Проверка того, поддерживается ли API выборки или использование для него полизаполнения, приведет к другой зависимости, а именно к поддержке Promises.
