چطور از فرمت‌عکس WebP استفاده کنیم؟
وب‌پی یک فرمت جدید عکس هست که توسط گوگل توسعه داده شده. تفاوت این فرمت‌عکس با بقیه فرمت ها این هست که حجم این عکس‌ها به مقدار قابل توجهی کمتر از بقیه هست با همان کیفیت عکس اصلی و هدف از ایجاد این فرمت‌عکس، سرعت دادن به وبــه تا تصاویر خیلی زودتر نمایان بشن!
ایرادی که این فرمت‌عکس داره اینه که مرورگر های کمی قدیمی تر اون رو پشتیبانی نمیکنن و برای اینکه ازش استفاده کنیم باید کدی بنویسیم که اگه مرورگر پشتیبانی کرد وب‌پی رو نمایش بده و در غیر این صورت فرمت‌عکس دیگه ای رو نشون بده!
روش استفاده
ابتدا عکس رو با دو فرمت jpg و webp میسازیم و درون Html به این صورت استفاده میکنیم، اگه مرورگر پشتیبانی کنه فرمت‌عکس وب‌پی رو به نمایش میزاره
<picture>
<source srcset="myimage.webp" type="image/webp">
<source srcset="myimage.jpg" type="image/jpeg">
<img src="myimage.jpg" alt="...">
</picture>اگه بخوایم توی Css استفاده کنیم باید به این صورت بنویسیم:
.myimage {
background-image: url("myimage.webp");
}
.no-webp .myimage {
background-image: url("myimage.jpg");
}که البته لازمش اینه که کد جاوااسکریپت زیر رو هم بزاریم
اگه مرورگر از وب‌پی پشتیبانی نکنه این کد کلاس no-webp رو به تگ html اضافه میکنه تا درون کد css متوجه بشیم و فرمت‌عکس دیگه ای رو اعمال کنیم
const testWebP = new Promise(async (resolve, reject) => {
const webP = new Image();
webP.onload = webP.onerror = function () {
webP.height == 2? resolve(true): reject()
};
webP.src= 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
})
testWebP.catch(() => document.documentElement.classList.add('no-webp'))پ.ن: برای خروجی گرفتن عکس با فرمت webp در فتوشاپ باید پلاگین webpshop رو نصب کنید:
https://github.com/webmproject/WebPShop
🖼.webp
امیدوارم مفید بوده باشه ☁
