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

Katie Hempenius

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

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

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

القياس

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

رمز الصورة

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

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

تم إنشاء Imagemin استنادًا إلى "الإضافات". المكوّن الإضافي هو حزمة npm تعمل على ضغط تنسيق صورة معيّن (مثل "mozjpeg" الذي يضغط ملفات 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 هو أداة تجميع رائجة تتيح استخدام 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);
})();