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

Katie Hempenius

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

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

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

القياس

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

Imagemin

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

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

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

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

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

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 مع أداة تجميع، تحقَّق ممّا إذا كانت أداة التجميع التي اخترتها تتضمّن مكوّنًا إضافيًا متوافقًا معها. على سبيل المثال، webpack هو أداة تجميع رائجة تتيح استخدام Imagemin بشكلٍ رائع. يمكنك الاطّلاع على مزيد من المعلومات حول كيفية استخدام Imagemin مع webpack في هذا الدرس التطبيقي حول الترميز.

يمكنك أيضًا استخدام 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);
})();