Symbol:
{
const elem = document.createElement('canvas');
if (!!(elem.getContext && elem.getContext('2d'))) {
return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
}
return false;
}
// Long WebP detection (check decoding): reports asynchroneously true on all browsers, that's the method used by Google
const check_webp_feature = (feature, callback) => {
const kTestImages = {
lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
};
const img = new Image();
img.onload = function () {
const result = (img.width > 0) && (img.height > 0);
callback(feature, result);
};
img.onerror = function () {
callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}
const changeWebpImagesIfNotSupportedToJpg = function () {
const changeImages = function() {
document.querySelectorAll('img[data-src-old-browser]').forEach((el) => {
const imgSrc = el.getAttribute('src')
const dataSrc = el.dataset.src || ''
const dataSrcOldBrowser = el.dataset.srcOldBrowser
const isWebp = (url) => !!(url || '').toString().match(/\.webp$/i)
if (dataSrcOldBrowser) {
if (isWebp(imgSrc)) {
el.src = dataSrcOldBrowser
}
if (isWebp(dataSrc)) {
el.dataset.src = dataSrcOldBrowser
}
}
})
};
if (!check_webp_decoding()) {
check_webp_feature(webp_support_level, function (feature, isSupported) {
if (!isSupported) {
changeImages();
}
});
}
}
changeWebpImagesIfNotSupportedToJpg();
![[{[item.product.name]}]]([{[item.product.photo.url]}] 125w)
