أهمية ذلك بالنسبة إليك
تؤدي الصور غير المضغوطة إلى تضخيم صفحاتك ببايتات غير ضرورية. بما أنّ الصور يمكن أن تكون مرشّحة لمقياس "سرعة عرض أكبر محتوى مرئي" (LCP)، يمكن أن تؤدي وحدات البايت غير الضرورية إلى زيادة مدة تحميل الموارد الخاصة بالصورة، ما قد يؤدي إلى زيادة أوقات LCP.
الصورة على اليسار أصغر بنسبة% 40 من الصورة على اليمين، ولكن من المحتمل أن تبدو متطابقة بالنسبة إلى المستخدم العادي.
|
|
|
|---|
القياس
استخدِم Lighthouse للبحث عن فرص تحسين سرعة تحميل الصفحة من خلال ضغط الصور. يتم إدراج هذه الفرص ضمن "ترميز الصور بكفاءة":
Imagemin
يُعدّ Imagemin خيارًا ممتازًا لضغط الصور لأنّه يتوافق مع مجموعة متنوعة من تنسيقات الصور ويمكن دمجه بسهولة مع نصوص البرامج وأدوات الإنشاء. تتوفّر أداة Imagemin كـ CLI ووحدة npm. بشكل عام، وحدة npm هي الخيار الأفضل لأنّها توفّر المزيد من خيارات الإعداد، ولكن يمكن أن تكون واجهة سطر الأوامر بديلاً جيدًا إذا أردت تجربة Imagemin بدون تعديل أي رمز.
المكوّنات الإضافية
تم تصميم Imagemin حول "المكوّنات الإضافية". المكوّن الإضافي هو حزمة npm تضغط تنسيقًا معيّنًا من تنسيقات الصور (على سبيل المثال، يضغط المكوّن الإضافي "mozjpeg" ملفات JPEG). قد تتوفّر عدة مكوّنات إضافية لتنسيقات الصور الشائعة.
أهم ما يجب مراعاته عند اختيار مكوّن إضافي هو ما إذا كان "مع معلومات مفقودة" أو "بدون فقدان البيانات". في الضغط بدون فقدان البيانات، لا يتم فقدان أي بيانات. يقلّل الضغط مع فقدان البيانات حجم الملف، ولكن قد يؤدي ذلك إلى تقليل جودة الصورة. إذا لم يذكر أحد المكوّنات الإضافية ما إذا كان "يقلّل من حجم الملف" أو "لا يقلّل من حجم الملف"، يمكنك معرفة ذلك من خلال واجهة برمجة التطبيقات الخاصة به: إذا كان بإمكانك تحديد جودة الصورة الناتجة، يعني ذلك أنّه "يقلّل من حجم الملف".
بالنسبة إلى معظم الأشخاص، تكون المكوّنات الإضافية التي تتضمّن فقدانًا للبيانات هي الخيار الأفضل. وتوفّر هذه التنسيقات مساحة تخزين أكبر بكثير، ويمكنك تخصيص مستويات الضغط لتلبية احتياجاتك. يسرد الجدول أدناه الإضافات الشائعة في Imagemin. هذه ليست سوى بعض الإضافات المتاحة، ولكنّها جميعًا خيارات جيدة لمشروعك.
| تنسيق الصورة | المكوّنات الإضافية التي تتضمّن فقدانًا للبيانات | المكوّنات الإضافية بدون فقدان البيانات |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| تنسيق WebP | imagemin-webp | imagemin-webp |
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 مع حزمة الويب في هذا الدرس التطبيقي حول الترميز.
يمكنك أيضًا استخدام 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);
})();