از Imagemin برای فشرده سازی تصاویر استفاده کنید

Katie Hempenius

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

تصاویر فشرده نشده صفحات شما را با بایت‌های غیرضروری پر می‌کنند. از آنجایی که تصاویر می‌توانند کاندیدهایی برای Largest Contentful Paint (LCP) باشند، این بایت‌های غیرضروری می‌توانند مدت زمان بارگذاری منابع تصویر را افزایش دهند و احتمالاً منجر به زمان طولانی‌تر LCP شوند.

عکس سمت راست ۴۰٪ کوچکتر از عکس سمت چپ است، اما احتمالاً برای یک کاربر معمولی یکسان به نظر می‌رسد.

اندازه گیری

برای بررسی فرصت‌های بهبود بارگذاری صفحه با فشرده‌سازی تصاویر، Lighthouse را اجرا کنید. این فرصت‌ها در بخش «کدگذاری کارآمد تصاویر» فهرست شده‌اند:

ایمیج‌مین

Imagemin یک انتخاب عالی برای فشرده‌سازی تصویر است زیرا از طیف گسترده‌ای از فرمت‌های تصویر پشتیبانی می‌کند و به راحتی با اسکریپت‌های ساخت و ابزارهای ساخت ادغام می‌شود. Imagemin هم به عنوان یک رابط خط فرمان (CLI) و هم به عنوان یک ماژول npm در دسترس است. به طور کلی، ماژول npm بهترین انتخاب است زیرا گزینه‌های پیکربندی بیشتری ارائه می‌دهد، اما اگر می‌خواهید Imagemin را بدون دست زدن به هیچ کدی امتحان کنید، رابط خط فرمان می‌تواند جایگزین مناسبی باشد.

افزونه‌ها

Imagemin بر اساس «افزونه‌ها» ساخته شده است. یک افزونه یک بسته npm است که یک فرمت تصویر خاص را فشرده می‌کند (مثلاً «mozjpeg» فایل‌های JPEG را فشرده می‌کند). فرمت‌های تصویر محبوب ممکن است چندین افزونه برای انتخاب داشته باشند.

مهم‌ترین نکته‌ای که هنگام انتخاب یک افزونه باید در نظر بگیرید این است که آیا «اتلافی» است یا «بدون اتلاف». در فشرده‌سازی بدون اتلاف، هیچ داده‌ای از دست نمی‌رود. فشرده‌سازی با اتلاف، حجم فایل را کاهش می‌دهد، اما به قیمت کاهش احتمالی کیفیت تصویر. اگر افزونه‌ای «اتلافی» یا «بدون اتلاف» بودن خود را ذکر نکرده باشد، می‌توانید از طریق API آن متوجه شوید: اگر بتوانید کیفیت تصویر خروجی را مشخص کنید، پس «اتلافی» است.

برای اکثر افراد، افزونه‌های فشرده‌سازی با اتلاف داده بهترین انتخاب هستند. آن‌ها صرفه‌جویی قابل توجهی در حجم فایل ارائه می‌دهند و می‌توانید سطوح فشرده‌سازی را متناسب با نیازهای خود سفارشی کنید. جدول زیر افزونه‌های محبوب Imagemin را فهرست می‌کند. اینها تنها افزونه‌های موجود نیستند، اما همه آنها انتخاب‌های خوبی برای پروژه شما خواهند بود.

رابط خط فرمان ایمیج‌مین

رابط خط فرمان Imagemin با ۵ افزونه‌ی مختلف کار می‌کند: imagemin-gifsicle، imagemin-jpegtran، imagemin-optipng، imagemin-pngquant و imagemin-svgo. Imagemin بر اساس فرمت تصویر ورودی، از افزونه‌ی مناسب استفاده می‌کند.

برای فشرده‌سازی تصاویر موجود در دایرکتوری "images/" و ذخیره آنها در همان دایرکتوری، دستور زیر را اجرا کنید (فایل‌های اصلی را رونویسی می‌کند):

$ imagemin images/* --out-dir=images

ماژول npm ایمیج‌مین

اگر می‌خواهید از Imagemin به همراه یک bundler استفاده کنید، بررسی کنید که آیا bundler انتخابی شما افزونه‌ای برای آن موجود است یا خیر. به عنوان مثال، webpack یک bundler محبوب است که پشتیبانی بسیار خوبی از Imagemin دارد. می‌توانید در این codelab درباره نحوه استفاده از Imagemin به همراه webpack اطلاعات بیشتری کسب کنید.

همچنین می‌توانید از خود Imagemin به عنوان یک اسکریپت Node استفاده کنید. این کد از افزونه‌ی "imagemin-mozjpeg" برای فشرده‌سازی فایل‌های JPEG تا کیفیت ۵۰ ('۰' بدترین و '۱۰۰' بهترین کیفیت) استفاده می‌کند:

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(
      ['source_dir/*.jpg', 'another_dir/*.jpg'],
      {
        destination: 'destination_dir',
        plugins: [imageminMozjpeg({quality: 50})]
      }
  );
  console.log(files);
})();