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

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

تصاویری که فشرده نشده اند حجم بیهوده از صفحه وب اشغال می کنند. مثلاً تصویر سمت راست ۴۰ درصد کم حجم تر از تصویر سمت راستی است، حتی ممکن است برای کاربر تفاوت این دو تصویر به چشم نیاید.

نحوه اندازه گیری وضعیت فشرده سازی تصاویر

ابزار Lighthouse را برای بررسی وضعیت فشرده سازی تصاویر اجرا کنید. البته این ابزارراهکار هایی هم ارائه می دهد که به وسیله این راهکارها می توانید تصاویر خود را فشرده کنید. همانطور که در تصویر زیر مشخص است زیر بخش Efficiently encode images راهکارهایی برای فشرده و بهینه سازی تصاویر ارائه شده است.

در حال حاضر ابزار Lighthouse در بخش oportunities فقط تصاویر فرمت JPEG را پشتیبانی می کند.

ابزار Imagemin

Imagemin به خاطر اینکه هم از فرمت های زیاد تصاویر پشتیبانی می کند و هم می توان به صورت ماژول و هم خط فرمان استفاده کرد برای فشرده سازی تصاویر گزینه فوق العاده ای است. Imagemin هم به صورت cli یا خط فرمان و هم به صورت ماژول NPM در دسترس است. عموماً ماژول NPM بهترین انتخاب برای استفاده است چون تنظیمات بیشتری نسبت به خط فرمان ارائه می دهد، اما خط فرمان هم می تواند جایگزین خوبی برای افرادی باشد که نمیخواهند با کد سرکله بزنند.

افزونه های Imagemin

ImageMin مبتنی بر افزونه ساخته شده است. یک افزونه یک پکیج Npm هست که فرمت های تصاویر خاصی را فشرده می کند.(مثلا یکی از افزونه های آن mozjpeg است که فرمت JPEGs را فشرده می کند). فرمت های رایج تصویر ممکن است چندین افزونه برای این کار داشته باشند.

مهمترین چیزی که در زمان انتخاب یک افزونه باید دقت داشت نوع lossy یا lossless بودن آن افزونه است. در فشرده سازی lossless هیچ دیتایی حذف نمی شود. فشرده سازی lossy حجم فایل را کاهش می دهد اما کیفیت عکس را هم کاهش می دهد و در واقع برخی دیتاهای عکس را حذف می کند. اگر افزونه ای هم ذکر نکرد که از lossy استفاده می کند یا lossless می توانید از طریق api ارائه شده توسط این افزونه متوجه نوع آن شوید. اگر بتوانید کیفیت خروجی تصویر را مشخص کنید این نوع افزونه با خروجی lossy است.

برای اکثر مردم افزونه های lossy بهترین گزینه هستند. چون برای آنها کاهش زیاد حجم مهم است. البته می توانید درجه فشرده سازی که لازم دارید را خودتان تنظیم کنید. جدول زیر درسته بندی از افزونه های lossy و lossless و همچنین فرمت های که هر افزونه می تواند فشرده کند ارائه داده است که بر اساس نوع پروژه خود می توانید یکی از این افزونه ها را انتخاب کنید.

فرمت تصویر	افزونه های lossy	افزونه های lossless
JPEG	imagemin-mozjpeg	imagemin-jpegtran
PNG	imagemin-pngquant	imagemin-optipng
GIF	imagemin-giflossy	imagemin-gifsicle
SVG	Imagemin-svgo
WebP	imagemin-webp

استفاده از خط فرمان Imagemin

خط فرمان Imagemin با ۵ افزونه مختلف کار می کند پس باید از هر کدام از افزونه ها برای فرمت مناسب خودش استفاده کنید:

• imagemin-gifsicle
• imagemin-jpegtran
• imagemin-optipng
• imagemin-pngquant
• imagemin-svgo

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

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

ماژول npm برای Imagemin

اگر شما از یکی از ابزارهای build tools استفاده میکند بخش نمونه کد های webpack، gulp و یا grunt را ببینید.

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

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

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