استفاده از فرمت WebP

از نظر اندازه فایل تصاویر WebP کوچک‌تر از همتایان JPEG و PNG خود هستند، این کاهش حجم در فایل باعث کاهش اندازه صفحه و بهبود عملکرد و سرعت سایت می‌شود.

WebP چیست؟

WebP یک فرمت تصویری مدرن است که فشرده‌سازی بدون اتلاف و با اتلاف (lossless and lossy) را برای تصاویر در وب باکیفیت عالی فراهم می‌کند. با استفاده از WebP، وب مسترها و توسعه دهندگان وب می‌توانند تصاویر کوچک‌تر و غنی‌تری ایجاد کنند و باعث افزایش سرعت وب شوند.

تصاویر بدون اتلاف WebP در مقایسه با PNGها ۲۶ درصد و تصاویر با اتلاف -WebP با کیفیت ۲۵ تا ۳۴ درصد کوچک‌تر از تصاویر JPEG هستند. این فرمت همچنین از transparency پشتیبانی می‌کند.

چرا باید به WebP اهمیت بدهیم؟

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

• یوتیوب با تغییر فرمت کاور فیلم‌هایش به تصاویر کوچک WebP ، باعث کاهش ۱۰ درصدی زمان بارگذاری صفحه شد.
• فیس‌بوک توانست با استفاده از فرمت WebP بین ۲۵ تا ۳۵ درصد در اندازه فایل‌های JPEG و ۸۰ درصد در اندازه فایل برای PNGها صرفه‌جویی کند.

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

بهترین سطح فشرده سازی تصاویر برای سایت

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

شما می‌توانید یکی از روش‌های زیر را برای تبدیل تصاویر خود به WebP استفاده می‌کنند:

• ابزار خط فرمان cwebp (cwebp command-line tool) که غالباً بهترین انتخاب برای پروژه‌های کوچک است. این ابزار اگر فقط یک‌بار نیاز به تبدیل تصاویر دارید، انتخاب خوبی است.
• افزونه  Imagemin WebP: اگر پروژه شما از اسکریپت‌های ساخت یا ابزارهای ساخت (به‌عنوان‌مثال Webpack یا Gulp) استفاده می‌کند، پلاگین Imagemin WebP عموماً بهترین انتخاب است. برای آشنایی کامل با این پلاگین به مقاله استفاده از Imagemin برای فشرده سازی تصاویر مراجعه کنید.
• استفاده از ابزارهایی مانند فتوشاپ که اخیرا به این امکان مجهز شده اند.

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

تبدیل تصاویر با استفاده از cwebp

برای استفاده از cwebp بسته آن را از سایت توسعه گوگل دانلود کنید. و در کامپیوتر خود باز کنید.

cwebp یک تصویر را با استفاده از فرمت WebP فشرده می کند. فرمت ورودی می تواند PNG، JPEG، TIFF، WebP یا نمونه های خام Y’CbCr باشد. توجه: فایل های متحرک PNG و WebP پشتیبانی نمی شوند.

برای تبدیل یک فایل با تنظیمات پیشفرض از دستور زیر استفاده می‌کنیم که در آن مسیر فایل قبل hc تبدیل و بعد o مسیر فایل خروجی مشخص می‌شود:

cwebp images/flower.jpg -o images/flower.webp

برای تبدیل یک فایل به webp با کیفیت 50، باید عدد 50 را بعد از پارامتر q به شکل زیر در دستور وارد کنید:

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/و …) استفاده کرد. برای اضافه کردن کد افزونه در ابزارهای ساخت باید کد زیر  را به یک اسکریپت ساخت یا فایل پیکربندی ابزار ساخت اضافه کرد. در اینجا نمونه هایی از نحوه انجام این کار برای Webpack، Gulp و Grunt آورده شده است.

اگر از یکی از آن ابزارهای ساخت استفاده نمی‌کنید، می توانید از Imagemin به تنهایی به عنوان اسکریپت Node استفاده کنید. این اسکریپت فایل های موجود در پوشه خاص را تبدیل کرده و در پوشه‌ای جدید به نام 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 را در صفحات وب خود ارائه دهید. البته با توجه به اینکه این تصاویر در تعدادی از مرورگرها و همچنین گوشی‌هایی قدیمی پشتیبانی نمی‌شود، راهکارهایی برای استفاده از تصاویر جایگزین نیز ارائه شده است.

قبلا برای درج تصاویر در HTML از کد زیر استفاده می‌کردیم.

<img src="flower.jpg" alt="">

اما اکنون با روش زیر علاوه بر درج تصاویر webp یک تصویر پشتیبان نیز برای مروگرهای قدیمی اضافه میکنیم

<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> فهرست شود.

img

اگر مرورگر از فرمت‌های موجود در منابع قبلی پشتیبانی نکند تصویر تگ <img> را بارگذاری می‌کند

نکته مهم اینکه تگ <img> باید همیشه وجود داشته باشد و حتما در انتهای منابع درج گردد.

سوالات متداول