تشخیص پشیبانی مرورگر از فرمت جدید WEBP توسط JavaScript

بهینه سازی تصاویر بخش بسیار مهمی از افزایش بهره وری فرونت اند است. ما به صورت معمول از فرمت های JPG/JPEG، GIF و PNG برای تصاویر استفاده می کنیم ولی گوگل و تیم توسعه کروم فرمت جدیدی بنام WEBP را توسعه داده اند که حجم فایل را کمتر کرده و رندرینگ تصور را هم سرعت می بخشد.

اگر با کروم به سایتی مثل Giphy بروید تصاویر WEBP برایتان به نمایش در می آیند ولی اگر مثلا با فایرفاکس آن را باز کنید تصاویر GIF را خواهید دید.زیرا این سایت تصاویر را به صورت LazyLoad نمایش می دهد و قابلیتی برای تشخیص پشتیبانی مرورگر کاربر از فرمت WEBP دارد که با جاوا اسکریپت کار می کند.

یکی از پیشگامان گوگل و سرویس ورکر بنام Jake Archibald اخیری در توییت خود قطعه کدی را منتشر کرد که بوسیله آن می توانید از طریق سرویس ورکر، پشتیبانی مرورگر از WEBP را تشخیص دهید:

async function supportsWebp() {
if (!self.createImageBitmap) return false;
const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
const blob = await fetch(webpData).then(r => r.blob());
return createImageBitmap(blob).then(() => true, () => false);
}
(async () => {
if(await supportsWebp()) {
console.log('does support');
}
else {
console.log('does not support');
}
})();

جیک در این کد یک Data URI معتبر WEBP را دریافت می کند تا نحوه ساپورت مرورگر از WEBP را متوجه شود.از این کد می توانید در هر کجای سایت تان استفاده کنید.

منبع