استفاده از تصویرهای WebP

Katie Hempenius

چرا باید به این موضوع اهمیت دهید؟

تصاویر WebP کوچک‌تر از همتایان JPEG و PNG خود هستند—معمولاً در حد ۲۵ تا ۳۵ درصد کاهش در اندازه فایل. این کار اندازه صفحه‌ها را کاهش می‌دهد و عملکرد را بهبود می‌بخشد.

• ‫YouTube متوجه شد که جابه‌جایی به ریزعکس‌های WebP منجر به بارگیری ۱۰٪ سریع‌تر صفحه می‌شود.
• Facebook تجربه کرد ۲۵ تا ۳۵ درصد صرفه‌جویی در اندازه فایل برای JPEG و ۸۰ درصد صرفه‌جویی در اندازه فایل برای PNG وقتی به استفاده از WebP روی آوردند.

WebP جایگزین بسیار خوبی برای تصاویر JPEG،‏ PNG، و GIF است. علاوه‌براین، WebP هم فشرده‌سازی بی‌اتلاف و هم فشرده‌سازی پراتلاف را ارائه می‌دهد. در فشرده‌سازی بدون اتلاف، هیچ داده‌ای ازبین نمی‌رود. فشرده‌سازی پراتلاف اندازه فایل را کاهش می‌دهد، اما ممکن است کیفیت تصویر را نیز کاهش دهد.

تبدیل تصاویر به WebP

افراد معمولاً از یکی از رویکردهای زیر برای تبدیل تصاویر خود به WebP استفاده می‌کنند: cwebp ابزار خط فرمان یا افزونه Imagemin WebP (بسته npm). اگر پروژه شما از اسکریپت‌های ساخت یا ابزارهای ساخت (مانند Webpack یا Gulp) استفاده می‌کند، افزونه Imagemin WebP معمولاً بهترین انتخاب است، درحالی‌که CLI برای پروژه‌های کوچک یا زمانی که فقط یک‌بار نیاز به تبدیل تصاویر دارید، انتخاب خوبی است.

وقتی تصاویر را به WebP تبدیل می‌کنید، گزینه‌ای برای تنظیم طیف گسترده‌ای از تنظیمات فشرده‌سازی دارید—اما برای اکثر افراد تنها چیزی که باید به آن توجه کنند تنظیم کیفیت است. می‌توانید سطح کیفیت را از ۰ (بدترین) تا ۱۰۰ (بهترین) مشخص کنید. ارزشش را دارد که با این گزینه بازی کنید و ببینید کدام سطح توازن مناسبی بین کیفیت تصویر و اندازه فایل برای نیازهای شما ایجاد می‌کند.

استفاده از 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/غیره) استفاده کرد. این کار معمولاً شامل افزودن حدود ۱۰ خط کد به اسکریپت ساخت یا فایل پیکربندی ابزار ساخت شما است.

اگر از یکی از این ابزارهای ساخت استفاده نمی‌کنید، می‌توانید از 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> برمی‌گردد.

نکته: برچسب <source> برای قالب تصویر «ترجیحی» (در این مورد WebP) باید ابتدا، قبل‌از برچسب‌های <source> دیگر، فهرست شود. مقدار مشخصه type باید نوع MIME مربوط به قالب تصویر باشد. نوع MIME تصویر و پسوند فایل آن اغلب مشابه هستند، اما لزوماً یکسان نیستند (برای مثال، .jpg درمقابل image/jpeg).

<img>

برچسب <img> باعث می‌شود این کد در مرورگرهایی که از برچسب <picture> پشتیبانی نمی‌کنند کار کند. اگر مرورگری از برچسب <picture> پشتیبانی نکند، برچسب‌هایی را که پشتیبانی نمی‌کند نادیده می‌گیرد. بنابراین، فقط برچسب <img src="flower.jpg" alt=""> را «می‌بیند» و آن تصویر را بار می‌کند.

نکته: برچسب <img> باید همیشه گنجانده شود و همیشه باید در آخر، بعداز همه برچسب‌های <source>، فهرست شود. منبع مشخص‌شده با برچسب <img> باید در قالبی باشد که به‌طور جهانی پشتیبانی می‌شود (مثلاً JPEG)، تا بتوان از آن به‌عنوان جایگزین استفاده کرد.

درحال خواندن سرصفحه HTTP Accept

اگر باطن برنامه یا سرور وبی دارید که به شما امکان می‌دهد درخواست‌ها را بازنویسی کنید، می‌توانید مقدار سرصفحه AcceptHTTP را بخوانید که قالب‌های تصویر جایگزین پشتیبانی‌شده را تبلیغ می‌کند:

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

خواندن این سرایند درخواست و بازنویسی پاسخ براساس محتوای آن این مزیت را دارد که نشانه‌گذاری تصویر شما را ساده می‌کند. نشانه‌گذاری <picture> با منابع متعدد می‌تواند نسبتاً طولانی شود. در زیر یک قانون Apache mod_rewrite آمده است که می‌تواند جایگزین‌های 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 > گزینه‌ها > عملکرد) و نتایج ممیزی ارائه تصاویر در قالب‌های نسل بعدی را بررسی کنید. Lighthouse همه تصاویری را که در WebP ارائه نمی‌شوند فهرست می‌کند.