كيفية تغيير حجم الصور الكبيرة وضغطها بشكل مجمّع (وتحسينها)

هل تريد معرفة كيفية تغيير حجم الصور الكبيرة وضغطها بكميات كبيرة دون فقدان الجودة؟ أنت في الصفحة الصحيحة. دعنا نرى كيف يمكنك توفير الوقت أثناء تحسين صورك وزيادة أداء موقع الويب الخاص بك.

ضغط الصورة هو عملية تقليل وزن الصورة عن طريق تقليل حجمها دون المساس بالجودة كثيرًا. في هذه المقالة ، ستتعرف على سبب أهمية تغيير حجم الصور وضغطها وكيفية القيام بذلك بسهولة دون فقدان الجودة.

دعنا نتعمق!

لماذا يتم ضغط الصور الكبيرة إلى حجم أصغر

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

فيما يلي بعض الفوائد التي يمكنك الحصول عليها عند ضغط الصور الكبيرة:

• ستزيد الصور المضغوطة السرعة ، مما ينتج عنه تجربة مستخدم مثالية ، وفقًا لجوجل. توصي Google PageSpeed ​​Insights بتحديد حجم الصور بشكل صحيح (خاصة للجوال) ، وتأجيل الصور خارج الشاشة (عن طريق تطبيق التحميل البطيء) ، واستخدام تنسيق الجيل التالي مثل WebP إذا كنت ترغب في تحسين وقت التحميل.

• من خلال تغيير حجم الصور وضغطها ، يمكنك تقليل حجم الصفحة وزيادة مقاييس الأداء التي تحددها Google ، بما في ذلك Core Web Vitals. يعني تحسين صورك أيضًا تقليل الوقت الذي يتعين على الزوار الانتظار فيه قبل التفاعل مع موقع الويب الخاص بك (مقياس وقت التفاعل) وتحسين السرعة المتصورة (First Contentful Paint و Largest Contentful Paint).

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

• يمكن أن تؤثر طلبات HTTP للصور عالية الدقة أيضًا سلبًا على الأداء ولهذا السبب يجب عليك تقديم عدد أقل من طلبات HTTP لتسريع موقع WordPress الخاص بك.

تعد الصور المضغوطة ضرورية لتعزيز الأداء ولكن من ناحية أخرى ، لا تريد صورًا ضبابية لموقع الويب الخاص بك ، أليس كذلك؟ الهدف هو تحقيق نتيجة توازن بين الجودة والتحسين كما في المثال أدناه:

لا يوجد ضغط JPEG - 400 كيلو بايت	ضغط (الجودة لم تتغير) JPEG - 170 كيلوبايت

هذا يأخذنا إلى الجزء التالي: كيف يمكنك تقليل حجم الصورة دون فقدان الجودة والتضحية بها؟

كيفية تغيير حجم الصور وضغطها بكميات كبيرة (PNG و JPEG)

الشيئان الأساسيان اللذان يجب مراعاتهما هما نوع الضغط الذي تريد استخدامه (ضياع مقابل ضياع) وتنسيق الملف (PNG ، JPEG ، ملفات PDF ، إلخ). يمكنك أن ترى أدناه كيف يمكن أن تؤثر التنسيقات على حجم الصورة:

من أجل تحقيق أقصى استفادة من صور PNG و JPEG ، هناك العديد من الأدوات المتاحة. سيساعدك البعض في القيام بكل هذا العمل نيابة عنك (على سبيل المثال: مكون إضافي لبرنامج WordPress) بينما يمكن للآخرين السماح لك بإجراء التحسينات الخاصة بك (على سبيل المثال: Photoshop).

فيما يلي قائمة بالأدوات المفضلة التي يمكنك استخدامها لضغط صور JPEG أو PNG بكميات كبيرة. قمنا بتصنيفها إلى فئتين:

• الفئة # 1 - أدوات وبرامج الويب لتحسين الصور لتحسين صور PNG و JPEG الكبيرة بكميات كبيرة

• الفئة # 2 - إضافات WordPress لتغيير حجم وضغط صور PNG و JPEG الكبيرة بكميات كبيرة

لنبدأ بالفئة الأولى.

الفئة # 1 - أدوات وبرامج الويب لتحسين الصور لتحسين صور PNG و JPEG الكبيرة بكميات كبيرة

فيما يلي قائمة مختصرة بالبرامج والأدوات عبر الإنترنت التي يمكنك استخدامها لتغيير حجم وضغط العديد من الصور الكبيرة:

• صور التقارب لضغط صورك بتنسيق PNG و JPEG.

1. انتقل إلى ملف> مهمة دفعة جديدة

2. قم بتحميل جميع الصور التي تريد ضغطها بشكل مجمّع وحدد التنسيق الأنسب وفقًا لاحتياجاتك:

3. حدد الجودة الجديدة (70 رقم جيد للحفاظ على الجودة)

• معاينة (في أنظمة تشغيل Mac) - لتغيير حجم صورك بشكل مجمّع ( لكنها لا تضغط عليها ).

1. افتح جميع الصور باستخدام Preview
2. حددهم جميعًا
3. انتقل إلى أدوات> الحجم وحدد أبعاد الصورة الجديدة

تم إنجاز المهمة! الحجم الناتج أصغر.

• Mass Image Compressor - أداة تحويل وضاغط صور مجمعة بالتصوير والتقاط لتحسين موقع الويب.

• Gimp - محرر الصور الشهير المجاني لنظامي التشغيل Mac و Windows. يأتي GIMP مع ما يسمى بوضع الدُفعات الذي يسمح لك بمعالجة الصور بتنسيق PNG و JPEG وتنسيقات أخرى مثل GIF أو PDF. ستحتاج إلى تنزيل وتثبيت امتداد مجاني يسمى "Batch Image Manipulation Plugin (BIMP). ثم تكون الخطوات واضحة حقًا.

• Photoshop - لتغيير حجم صور PNG و JPEG وضغطها (يؤثر ذلك على الجودة وهو مكلف نسبيًا).
  1. افتح Adobe Photoshop ، وحدد File> Scripts> Image Processor
  2. انقر فوق تحديد مجلد حتى تتمكن من اختيار المجلد الذي توجد به الصور
  3. اضبط الإعدادات لتقليل الحجم
  4. اختر إعدادًا بين 1 و 12 في حقل الجودة (أقترح ألا تقل عن 6).
  5. انقر فوق "تشغيل الإجراء"

ملاحظة: يمكن أن يكون Photoshop منحنى تعليميًا حادًا ، لذا إذا كنت مهتمًا ، فقد قمنا بإدراج 10 بدائل لبرنامج Photoshop لتحسين الصورة.

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

الفئة # 2 - إضافات WordPress لتغيير حجم وضغط صور PNG و JPEG الكبيرة بكميات كبيرة

يمكنك استخدام أحد مكونات WordPress الإضافية أدناه لضغط الصور الكبيرة بشكل مجمّع ، وهي:

• Imagify (المكون الإضافي المجاني الخاص بنا)
• أوبتيمول
• ضغط ملفات JPEG و PNG (PNG صغيرة الحجم)
• EWWW
• بكسل قصير
• reSmush.it

تقدم جميعها تحسينات مجمعة ، كما يقوم معظمها أيضًا بتحويل صورك إلى تنسيق WebP كما توصي Google. بالنسبة لدراسة الحالة الخاصة بنا ، سوف نستخدم Imagify ونبرز الخطوات التي تحتاج إلى اتباعها لتحسين صورك الكبيرة.

كيفية ضغط الصور الكبيرة دون فقدان الجودة باستخدام برنامج Imagify

باستخدام Imagify ، يمكنك تغيير الحجم والضغط بكميات كبيرة دون مغادرة WordPress. دعنا نلقي نظرة على لوحة معلومات Imagify حتى تتمكن من الحصول على مظهر ومظهر ميزة التحسين المجمّع من قائمة الوسائط> التحسين المجمع :

بعد تنشيط البرنامج المساعد Imagify ، ما عليك سوى اختيار مستوى الضغط والنقر فوق الزر " IMAGIF'EM ALL ".

هذا هو نوع المدخرات التي يمكنك الحصول عليها أثناء استخدام ميزة التحسين الجماعي لـ Imagify: ما يقرب من 87٪!

دعنا الآن نجري عرضًا "قبل وبعد" حتى تتمكن من معرفة سبب ضرورة تحسين صورك باستخدام Imagify.

ضغط الصور الكبيرة بكميات كبيرة: واجهة عرض

سأقوم بتشغيل سيناريوهين للتحسين المجمع لصوري على الهاتف المحمول:

• السيناريو 1 - نتائج الأداء مع صور JPEG (بدون تخيل)
• السيناريو 2 - نتائج تحسين الصور المجمعة باستخدام صور WebP ووضع التحسين القوي (مع Imagify)

فيما يلي الأدوات والمقاييس التي سأأخذها في الاعتبار:

أدوات:
Google PageSpeed ​​Insights و WebPageTest

المقاييس:

• حجم ملف كل صورة
• أكبر رسم مضمون
• مقاس الصفحه
• طلبات HTTP
• وقت التحميل

السيناريو 1 - نتائج الأداء مع صور JPEG (بدون تخيل)

1. يتم تقديم 9 صور بتنسيق JPEG
2. لم يتم تحسين الصور

فيما يلي علامات تحسين الصورة التي حصلت عليها بعد إجراء تدقيق PageSpeed ​​Insights:

يوجد أدناه تقسيم محتوى صفحتي. الصور مسؤولة عن 60٪ من الطلبات و 81.5٪ من إجمالي البايت:

السيناريو 2 - نتائج تحسين الصور المجمعة باستخدام صور WebP ووضع التحسين القوي (مع Imagify)

• تم تحويل الصور التسع نفسها إلى تنسيق WebP باستخدام Imagify
• صور مُحسَّنة مجمعة باستخدام Imagify

لنقم بتحسين صورنا بشكل مجمّع وتحويلها إلى WebP باستخدام Imagify:

بعد بضع نقرات مباشرة ، حفظ Imagify في المتوسط ​​55٪ من حجم ملفنا:

مقاييس الأداء لدينا هي أيضًا في حالة أفضل :

نجحت Imagify أيضًا في حل مشكلات الأداء التي تم وضع علامة عليها بواسطة PageSpeed ​​Insights :

يمكننا أن نرى نتائج إيجابية فقط بفضل ميزة التحسين المجمعة لـ Imagify:

• كل صوري مضغوطة: حجمها أصغر ولم نتنازل عن الجودة.
• كان My Core Web Vital (LCP) باللون البرتقالي مع درجة 3.6 ثانية ، ولكن مع Imagify انتقل إلى المنطقة الخضراء مع 1.6 ثانية.
• انخفض وقت تحميل صفحتي من 3.7 ثانية إلى 2.1 ثانية.
• 43٪ فقط من الطلبات تأتي الآن من الصور (كانت 60٪ بدون Imagify).
• تشغل الصور 26.5٪ من محتوى البايت بالكامل (مقابل 82٪ من قبل).

تغليف

أتاح البرنامج الإضافي Imagify لنا تغيير حجم الصور الكبيرة وضغطها بشكل مجمّع مباشرةً من لوحة معلومات WordPress. لقد تطلب الأمر منا نقرتين لتحسين جميع صورنا تلقائيًا ، وتم حفظ 60٪ في المتوسط ​​من حجم ملفنا! بالإضافة إلى ذلك ، يمكن لتطبيق Imagify تحويل صور WordPress الخاصة بك إلى WebP ، وهو تنسيق الجيل التالي الذي أوصت به Google.

لا تدع أداء الموقع البطيء يكلفك التحويلات. ابدأ في تحسين صورك بشكل مجمّع باستخدام Imagify مجانًا اليوم!