چرا باید اهمیت بدی؟
تصاویر WebP کوچکتر از همتایان JPEG و PNG خود هستند - معمولاً با کاهش 25 تا 35٪ در اندازه فایل. این باعث کاهش اندازه صفحه و بهبود عملکرد می شود.
- YouTube متوجه شد که تغییر به تصاویر کوچک WebP منجر به بارگیری سریع‌تر صفحه ۱۰٪ می‌شود.
- فیس بوک زمانی که به استفاده از WebP روی آورد، 25 تا 35 درصد کاهش حجم فایل برای JPEG و 80 درصد کاهش حجم فایل برای PNG را تجربه کرد .
WebP یک جایگزین عالی برای تصاویر JPEG، PNG و GIF است. علاوه بر این، WebP فشرده سازی بدون اتلاف و اتلاف را ارائه می دهد. در فشرده سازی بدون تلفات هیچ داده ای از دست نمی رود. فشرده سازی با از دست دادن حجم فایل را کاهش می دهد، اما احتمالاً کیفیت تصویر را کاهش می دهد.
تبدیل تصاویر به WebP
مردم معمولاً از یکی از روش های زیر برای تبدیل تصاویر خود به WebP استفاده می کنند: ابزار خط فرمان cwebp یا افزونه Imagemin WebP (بسته npm). اگر پروژه شما از اسکریپت های ساخت یا ابزارهای ساخت (مثلاً Webpack یا Gulp) استفاده می کند، پلاگین Imagemin WebP عموماً بهترین انتخاب است، در حالی که CLI انتخاب خوبی برای پروژه های ساده است یا اگر فقط یک بار نیاز به تبدیل تصاویر دارید.
وقتی تصاویر را به WebP تبدیل می‌کنید، این گزینه را دارید که تنظیمات فشرده‌سازی متنوعی را تنظیم کنید—اما برای اکثر مردم تنها چیزی که باید به آن اهمیت دهید، تنظیمات کیفیت است. می توانید سطح کیفیت را از 0 (بدترین) تا 100 (بهترین) مشخص کنید. ارزش این را دارد که با این کار کنار بیایید، پیدا کنید که کدام سطح بین کیفیت تصویر و اندازه فایل متناسب با نیازهای شما است.
از cwebp استفاده کنید
با استفاده از تنظیمات فشرده سازی پیش فرض cwebp، یک فایل را تبدیل کنید:
cwebp images/flower.jpg -o images/flower.webp
با استفاده از سطح کیفیت 50 یک فایل را تبدیل کنید:
cwebp -q 50 images/flower.jpg -o images/flower.webp
تبدیل تمام فایل ها در یک دایرکتوری:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
از Imagemin استفاده کنید
افزونه Imagemin WebP را می توان به تنهایی یا با ابزار ساخت مورد علاقه شما (Webpack/Gulp/Grunt/و غیره) استفاده کرد. این معمولا شامل اضافه کردن 10 خط کد به یک اسکریپت ساخت یا فایل پیکربندی ابزار ساخت شما است. در اینجا نمونه هایی از نحوه انجام این کار برای Webpack ، Gulp و Grunt آورده شده است.
اگر از یکی از آن ابزارهای ساخت استفاده نمی کنید، می توانید از Imagemin به تنهایی به عنوان اسکریپت Node استفاده کنید. این اسکریپت فایل های موجود در فهرست images را تبدیل کرده و در فهرست compressed_images ذخیره می کند.
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
ارائه تصاویر WebP
اگر سایت شما فقط از مرورگرهای سازگار با WebP پشتیبانی می کند، می توانید خواندن را متوقف کنید. در غیر این صورت، WebP را به مرورگرهای جدیدتر و یک تصویر بازگشتی به مرورگرهای قدیمی تر ارائه دهید:
قبل: html <img src="flower.jpg" alt="">
بعد: html <picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture>
تگ‌های <picture> ، <source> و <img> ، از جمله نحوه ترتیب‌بندی آنها نسبت به یکدیگر، همگی برای رسیدن به این نتیجه نهایی تعامل دارند.
<picture>
تگ <picture> یک پوشش برای صفر یا چند تگ <source> و یک تگ <img> فراهم می کند.
<source>
تگ <source> یک منبع رسانه را مشخص می کند.
مرورگر از اولین منبع فهرست شده استفاده می کند که در قالبی است که پشتیبانی می کند. اگر مرورگر از هیچ یک از فرمت های فهرست شده در تگ های <source> پشتیبانی نکند، به بارگیری تصویر مشخص شده توسط تگ <img> بازمی گردد.
<img>
تگ <img> چیزی است که باعث می شود این کد روی مرورگرهایی کار کند که از تگ <picture> پشتیبانی نمی کنند. اگر مرورگر از تگ <picture> پشتیبانی نکند، تگ هایی را که پشتیبانی نمی کند نادیده می گیرد. بنابراین، فقط تگ <img src="flower.jpg" alt=""> را "می بیند" و آن تصویر را بارگذاری می کند.
خواندن هدر HTTP Accept
اگر یک برنامه پشتیبان یا وب سروری دارید که به شما امکان می‌دهد درخواست‌ها را بازنویسی کنید، می‌توانید مقدار هدر HTTP Accept را بخوانید که فرمت‌های تصویر جایگزین پشتیبانی شده را تبلیغ می‌کند:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
خواندن این هدر درخواست و بازنویسی پاسخ بر اساس محتویات آن، این مزیت را دارد که نشانه گذاری تصویر شما را ساده کند. نشانه گذاری <picture> می تواند با بسیاری از منابع طولانی شود. در زیر یک قانون mod_rewrite Apache آمده است که می تواند جایگزین های WebP را ارائه دهد:
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
اگر این مسیر را طی می‌کنید، باید سرصفحه پاسخ HTTP Vary را تنظیم کنید تا مطمئن شوید که حافظه پنهان متوجه می‌شود که تصویر ممکن است با انواع محتوای متفاوت ارائه شود:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
قانون بازنویسی بالا به دنبال یک نسخه WebP از هر تصویر JPEG یا PNG درخواستی است. اگر جایگزین WebP یافت شود، با سربرگ Content-Type مناسب ارائه می شود. این به شما امکان می دهد از نشانه گذاری تصویر مشابه با پشتیبانی خودکار WebP استفاده کنید:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
بررسی استفاده از WebP
از Lighthouse می توان برای تأیید اینکه تمام تصاویر موجود در سایت شما با استفاده از WebP ارائه می شوند استفاده کرد. ممیزی عملکرد Lighthouse را اجرا کنید ( Lighthouse > Options > Performance ) و به دنبال نتایج سرویس تصاویر در ممیزی فرمت های نسل بعدی بگردید. Lighthouse هر تصویری را که در WebP ارائه نمی شود فهرست می کند.