استخدام Imagemin لضغط الصور

Katie Hempenius

أهمية ذلك بالنسبة إليك

تزدحم الصور غير المضغوطة صفحاتك بمقدار وحدات بايت غير ضرورية. بما أنّ الصور قد تكون مرشّحة لسرعة عرض أكبر محتوى مرئي (LCP)، يمكن أن تؤدي وحدات البايت غير الضرورية هذه إلى زيادة مدة تحميل موارد الصورة، ما قد يؤدي إلى زيادة مدة سرعة عرض أكبر محتوى مرئي.

الصورة على اليسار أصغر بنسبة 40% من الصورة الموجودة على اليسار، ومع ذلك قد تبدو مطابقة على الأرجح للمستخدم العادي.

القياس

يمكنك تشغيل أداة Lighthouse لمعرفة الفرص المتاحة لتحسين تحميل الصفحة عن طريق ضغط الصور. يتم إدراج هذه الفرص ضمن "ترميز الصور بكفاءة":

رمز الصورة

يُعد Imagemin خيارًا ممتازًا لضغط الصور لأنه يدعم تنسيق مجموعة متنوعة من تنسيقات الصور، ويتم دمجها بسهولة مع النصوص البرمجية للإصدار يتوفر Imagemin كـ CLI وnpm . بشكل عام، يتم استخدام وحدة npm الخيار الأفضل لأنه يوفر المزيد من خيارات الضبط، ولكن قد تتوفر كبديل جيد إذا كنت تريد تجربة Imagemin بدون لمس أي رمز.

المكوّنات الإضافية

تم إنشاء Imagemin حول "المكوّنات الإضافية". المكون الإضافي عبارة عن حزمة npm تضغط تنسيق صورة معين (على سبيل المثال، يضغط "ozjpeg" ملفات JPEG). تنسيقات الصور الشائعة على العديد من المكونات الإضافية للاختيار من بينها.

أهم شيء يجب مراعاته عند اختيار مكون إضافي هو ما إذا كان "lossy" أو "بدون فقدان البيانات". وعند الضغط بدون فقدان البيانات، لا تُفقد أي بيانات. ضائع يقلل الضغط من حجم الملف، ولكن على حساب تقليل الصورة الشطيرة. إذا لم يذكر المكوّن الإضافي ما إذا كان "غير متوفر" أو "بدون فقدان البيانات" CANNOT TRANSLATE من خلال واجهة برمجة التطبيقات الخاصة بها: إذا كان بإمكانك تحديد جودة الصورة للمخرجات، فعندئذٍ هو "lossy".

بالنسبة إلى معظم الأشخاص، تعد المكونات الإضافية مع فقدان البيانات الخيار الأفضل. تقدم بشكل كبير ويتم توفير قدر أكبر من حجم الملف، كما يمكنك تخصيص مستويات الضغط لتلبية احتياجاتك. يسرد الجدول أدناه مكوّنات Imagemin الإضافية الشائعة. هذه ليست المكونات الإضافية الوحيدة متاحة، لكنها جميعًا ستكون خيارات جيدة لمشروعك.

واجهة سطر الأوامر بنظام Imagemin

يعمل واجهة سطر الأوامر Imagemin مع 5 مكونات إضافية مختلفة: imagemin-gifsicle، imagemin-jpegtran وimagemin-optipng وimagemin-pngquant وimagemin-svgo. يستخدم Imagemin المكوّن الإضافي المناسب استنادًا إلى تنسيق صورة إدخال.

لضغط الصور في عمود "images/ " الدليل وحفظها في نفس ، شغّل الأمر التالي (يستبدل الملفات الأصلية):

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

وحدة Imagemin npm

إذا كنت تستخدم إحدى أدوات التصميم هذه، للتحقق من الدروس التطبيقية حول الترميز لـ Imagemin مع webpack وgulp أو نخر

يمكنك أيضًا استخدام Imagemin كنص برمجي لعقدة Node. يستخدم هذا الرمز البرمجي "imagemin-ozjpeg" المكون الإضافي لضغط ملفات 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);
})();