چرا باید اهمیت بدی؟
تصاویر 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 را به مرورگرهای جدیدتر و یک تصویر بازگشتی به مرورگرهای قدیمی تر ارائه دهید:
قبل از:
<img src="flower.jpg" alt="">
بعد از:
<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 را تنظیم کنید تا مطمئن شوید که حافظه‌های پنهان متوجه می‌شوند که بسته به هدر Accept ممکن است تصویر متفاوتی ارائه شود:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Accept"
</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 ارائه نمی شود فهرست می کند.