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

Katie Hempenius

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

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

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

قياس

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

يمنى

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

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

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

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

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

واجهة Imagemin CLI

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

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

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

وحدة Imagemin npm

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

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