چرا باید اهمیت بدی؟
تصاویر فشرده نشده صفحات شما را با بایت های غیر ضروری پر می کنند. از آنجایی که تصاویر می‌توانند کاندیدای بزرگ‌ترین رنگ محتوایی (LCP) باشند، آن بایت‌های غیرضروری می‌توانند مدت زمان بارگذاری منبع تصویر را افزایش دهند و احتمالاً زمان‌های LCP طولانی‌تری را در پی داشته باشند.
عکس سمت راست 40 درصد کوچکتر از عکس سمت چپ است، اما احتمالاً برای کاربر معمولی یکسان به نظر می رسد.
|
|
|---|
اندازه گیری کنید
Lighthouse را اجرا کنید تا فرصت هایی را برای بهبود بارگذاری صفحه با فشرده سازی تصاویر بررسی کنید. این فرصت‌ها در بخش «کدگذاری کارآمد تصاویر» فهرست شده‌اند:
Imagemin
Imagemin یک انتخاب عالی برای فشرده سازی تصویر است زیرا از طیف گسترده ای از فرمت های تصویر پشتیبانی می کند و به راحتی با اسکریپت های ساخت و ابزارهای ساخت ادغام می شود. Imagemin هم به عنوان یک ماژول CLI و هم یک ماژول npm در دسترس است. به طور کلی، ماژول npm بهترین انتخاب است زیرا گزینه های پیکربندی بیشتری را ارائه می دهد، اما اگر می خواهید Imagemin را بدون لمس هیچ کدی امتحان کنید، CLI می تواند جایگزین مناسبی باشد.
پلاگین ها
Imagemin بر اساس "پلاگین" ساخته شده است. پلاگین یک بسته npm است که فرمت تصویر خاصی را فشرده می کند (مثلاً "mozjpeg" JPEG را فشرده می کند). فرمت‌های تصویری محبوب ممکن است چندین افزونه برای انتخاب داشته باشند.
مهم ترین نکته ای که باید در هنگام انتخاب یک افزونه در نظر بگیرید این است که آیا این افزونه «خلف» یا «بی ضرر» است. در فشرده سازی بدون تلفات، هیچ داده ای از بین نمی رود. فشرده سازی با از دست دادن حجم فایل را کاهش می دهد، اما احتمالاً کیفیت تصویر را کاهش می دهد. اگر پلاگینی به "تلف شدن" یا "بی ضرر" بودن آن اشاره نمی کند، می توانید از طریق API آن متوجه شوید: اگر بتوانید کیفیت تصویر خروجی را مشخص کنید، آنگاه "ضایع" است.
برای اکثر افراد، افزونه های با اتلاف بهترین انتخاب هستند. آنها به میزان قابل توجهی صرفه جویی در حجم فایل را ارائه می دهند، و شما می توانید سطوح فشرده سازی را برای رفع نیازهای خود سفارشی کنید. جدول زیر افزونه های محبوب Imagemin را فهرست می کند. اینها تنها افزونه های موجود نیستند، اما همه آنها گزینه های خوبی برای پروژه شما خواهند بود.
| فرمت تصویر | افزونه(های) گمشده | افزونه(های) بدون ضرر |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| وب پی | imagemin-webp | imagemin-webp |
Imagemin CLI
Imagemin CLI با 5 پلاگین مختلف کار می کند: imagemin-gifsicle، imagemin-jpegtran، imagemin-optipng، imagemin-pngquant و imagemin-svgo. Imagemin از پلاگین مناسب بر اساس فرمت تصویر ورودی استفاده می کند.
برای فشرده سازی تصاویر در پوشه "images/" و ذخیره آنها در همان دایرکتوری، دستور زیر را اجرا کنید (فایل های اصلی را بازنویسی می کند):
$ imagemin images/* --out-dir=images
ماژول Imagemin npm
اگر می‌خواهید از Imagemin با باندلر استفاده کنید، بررسی کنید که آیا باندلر انتخابی شما افزونه‌ای برای آن در دسترس دارد یا خیر. به عنوان مثال، وب پک یک باندلر محبوب است که پشتیبانی بسیار خوبی از Imagemin دارد. شما می توانید در مورد نحوه استفاده از Imagemin با بسته وب در این کد لبه اطلاعات بیشتری کسب کنید.
همچنین می توانید از 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);
})();