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

Imagemin یک ابزار عالی برای فشرده سازی تصویر است زیرا طیف گسترده‌ای از فرمت‌های تصویری را پشتیبانی می‌کند و به‌راحتی با سایر ابزارها ادغام می‌شود.

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

چرا باید به فشرده‌سازی در وب اهمیت بدهیم؟

تصاویر فشرده نشده صفحات شما را با بایت‌های غیرضروری اطلاعات پر می‌کنند. عکس سمت راست (که با ابزار Imagemin فشرده شده است) ۴۰ درصد کوچک‌تر از عکس سمت چپ است، اما احتمالاً برای کاربر معمولی یکسان به نظر می‌رسد.

اندازه گیری برای درک بهتر

اگر Lighthouse را بر روی صفحه‌ای که دارای تصاویر فشرده نشده است اجرا کنید خواهید دید که یکی از مهمترین پیشنهادهای Lighthouse کاهش مؤثر حجم تصاویر با فشرده کردن آنها با ابزاهایی مانند Imagemin است. در گزارش لایت هاوس در بخش Efficiently encode images می‌توانید جزئیات بیشتری از بهبود تصاویر خود ببینید.

Lighthouse در حال حاضر در فقط فرصت هایی برای فشرده سازی تصاویر با فرمت JPEG گزارش می‌دهد.

Imagemin

در ادامه این مقاله قصد داریم شما را با یکی از بهترین ابزاها برای فشرده‌سازی که در بسیاری از ابزاهای وب کاربرد دارد آشنا کنیم.

Imagemin چیست؟

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

پلاگین(افزونه) های Imagemin

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

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

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

Imagemin CLI

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

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

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

ماژول Imagemin npm

همانطور که قبلا هم ذکر کردیم استفاده از ماژول npm به دلیل داشتن گزینه های بیشتر انتخاب بهتری است.

همچنین می توانید از Imagemin به تنهایی به عنوان اسکریپت Node استفاده کنید. این کد از افزونه “imagemin-mozjpeg” برای فشرده سازی فایل های JPEG با کیفیت 50 استفاده می کند (‘0’ بدترین کیفیت و ‘100’ بهترین است):

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);
})();

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