الدليل النهائي لتحسين الصور في WordPress

1… 2… 3… - أغلق عميلك المحتمل موقعك لأنه لا يزال قيد التحميل. يبدوا مألوفا؟ أعتقد أنك كنت ذلك الزائر غير الصبور والمحبَط مرات عديدة. أعلم أنني كنت. لهذا السبب قمت بتجميع قائمة نهائية بالأشياء التي تحتاج إلى معرفتها حول تحسين الصورة. ستكون طويلة ، لكنني آمل أن تجدها تستحق القراءة.

جدول المحتويات

• محتويات هذه المادة في 3 دقائق بالفيديو
• فوائد تحسين الصورة
• تنسيقات الصور
• تغيير حجم الصور قبل التحميل
  • Imsanity WordPress Plugin لتغيير حجم الصور تلقائيًا
• ضغط الصور
  • أفضل الأدوات عبر الإنترنت لضغط الصور
    • TinyPNG
    • أوبتيميزيلا
    • ضاغط
    • ImageOptim
    • صورة أصغر
    • وحش بحري أسطوري
    • ملف JPEG.io
    • PageSpeed ​​Insights
    • نتائج أفضل أداة ضغط على الإنترنت
    • أفضل أداة ضغط على الإنترنت لملفات JPEG
    • أفضل أداة ضغط على الإنترنت لـ PNGs
    • أفضل أداة لضغط الصور عبر الإنترنت بشكل عام
  • أفضل ملحقات WordPress لضغط الصور
    • WP Smush (نسخة مجانية)
    • ضغط صور JPEG و PNG بواسطة TinyPNG
    • بكسل قصير
    • تخيل
    • EWWW Image Optimizer (نسخة مجانية)
    • نتائج أفضل مكون إضافي ووردبريس لضغط الصور
    • أفضل مكون إضافي لبرنامج WordPress لضغط ملفات JPEG
    • أفضل مكون إضافي لبرنامج WordPress لضغط ملفات PNG
    • أفضل مكون إضافي لبرنامج WordPress لضغط الصور بشكل عام
• استنتاج

محتويات هذه المادة في 3 دقائق بالفيديو

إليك نظرة عامة سريعة بالفيديو على هذه المقالة. ما زلت أوصي بالقراءة ، ولكن لمضايقةك بما فيه الكفاية ، ها نحن ذا:

فوائد تحسين الصورة

هل ما زلت لا تباع على كل شيء تحسين الصورة؟ لنلقِ نظرة على جميع الفوائد التي ستحصل عليها ، إذا قمت بإصلاح هذه المشكلة الصغيرة والتافهة فقط:

• سيكون موقعك أسرع
• ستكون نقاط Google PageSpeed ​​أفضل
• سوف تعجبك Google أكثر وستتحسن تصنيفات محرك البحث الخاص بك
• سيكون معدل الارتداد أقل وسيشاهد المزيد من الزوار صفحتك
• ستحتاج إلى مساحة تخزين أقل على الخوادم الخاصة بك وسوف تنفق موارد أقل على الخوادم ، مما سيوفر لك المال
• ستوفر أموال خطة بيانات الهاتف المحمول لنفسك ولزوارك

لقد لفتت انتباهك الآن ، أليس كذلك؟ الآن يمكننا أن نبدأ بالعمل الحقيقي.

تنسيقات الصور

يبدأ تحسين الصور ببعض المعرفة الأساسية حول تنسيقات الصور. التنسيقان الأكثر شيوعًا على الإنترنت هما PNG بامتداد .png و JPEG بامتداد jpg . سأستخدم JPEG في معظم الحالات ، لأنه أفضل تنسيق للصور والصور ذات التدرجات اللونية والصور بملايين الألوان. من ناحية أخرى ، يكون PNG أفضل مع الصور الملونة المحدودة ، مثل الشعارات ، ومع الصور ذات الشفافية.

سيوضح لك المثال التالي ، مدى أهمية اختيار تنسيق الصورة الصحيح للحصول على أفضل تحسين للصورة.

سأحفظ صورة child.jpg غير المحسّنة بتنسيقات jpg . و png . يمكننا أن نرى أن الصورة child-save-as-jpeg.jpg حجمها 3.1 ميغابايت والصورة child-save-as-png.png حجمها 4.5 ميغابايت. في هذه الحالة ، أصبحت صورة PNG أكبر بنسبة 45٪ من صورة JPEG ، وهو الاختلاف الذي ينشأ ببساطة من اختيار تنسيق صورة معين. لا توجد طريقة أسهل لتوفير هذا القدر الكبير من المساحة بجهد ضئيل. حسنا ، ربما هناك. دعنا نلقي نظرة على الخطوة التالية.

تغيير حجم الصور قبل التحميل

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

على موقع ProteusThemes الخاص بنا ، يبلغ الحد الأقصى لعرض الصورة 1110 بكسل ، لذلك سأقوم بتغيير حجم الصورة الحالية child.jpg ، والتي يبلغ عرضها 1800 بكسل ، إلى 1110 بكسل في العرض. في هذه الحالة ، انتقلنا للتو من 3.1 ميجا بايت إلى 1.1 ميجا بايت في الحجم ، وهو ما يمثل 65٪ أخرى من المساحة المحفوظة والمخفضة .

تلميح: يمكنك تغيير حجم الصور مباشرة في مكتبة وسائط WordPress الخاصة بك. انقر فوق الوسائط -> حدد صورتك -> تحرير الصورة واختر أبعادًا جديدة لصورتك:

Imsanity WordPress Plugin لتغيير حجم الصور تلقائيًا

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

ضغط الصور

الآن بعد أن تعلمنا أساسيات تحسين الصورة ، دعنا نرى كيف يمكننا رفع مستوى لعبتنا. يمكننا العثور على العديد من أدوات ضغط الصور عبر الإنترنت وحتى مكونات WordPress الإضافية ، مما يقلل من حجم صورتك. لكن علينا توخي الحذر هنا ، فبعض الأدوات لن تحدث أي فرق تقريبًا وستدمر بعض الإعدادات صورتنا وتجعلها عديمة الفائدة. إذن ، كيف تجد التوازن المثالي؟ لا تقلق ، في وقت كتابة هذا التقرير (يونيو 2017 ، محدث 2018) ، قمنا باختبار جميع الأدوات / الخدمات الأكثر شيوعًا عبر الإنترنت ومكونات WordPress الإضافية لتحسين الصور وقمنا باختيار أفضلها.

لقد استخدمنا 3 صور JPEG مختلفة وصورة PNG واحدة لإجراء الاختبار.

جميع صور JPEG الثلاثة مأخوذة من Unsplash للمؤلفين Mi Pham و Breather و Denise Chan و Niko Virtanen. تم اقتصاصها وتغيير حجمها إلى 1110 × 624 بكسل لأغراض الاختبار.

بالنسبة لصورة PNG ، قمنا بإنشاء صورتنا الخاصة بشعار ProteusThemes وبعض الأنماط الموجودة خلفها. تمامًا مثل صور اختبار JPEG ، تم تغيير حجم هذه الصورة أيضًا إلى 1110 × 624 بكسل.

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

أفضل الأدوات عبر الإنترنت لضغط الصور

في وقت كتابة هذا التقرير (يونيو 2017 ، محدث 2018) ، فيما يلي قائمة كاملة بالأدوات والخدمات الأكثر شيوعًا عبر الإنترنت لضغط الصور:

• TinyPNG
• أوبتيميزيلا
• ضاغط
• ImageOptim
• صورة أصغر
• وحش بحري أسطوري
• ملف JPEG.io
• PageSpeed ​​Insights

إذا كنت تعتقد أن بعض الأدوات الأخرى تستحق أن تكون في تلك القائمة ، فأخبرنا بذلك ، وسنختبرها ونضيفها إلى القائمة. يمكنك العثور على مراجعاتي لكل أداة أدناه ، بالإضافة إلى تقييمي لأفضلها. إذا كنت لا تريد أن تقرأ عن كل أداة على حدة ، فانقر هنا - أرني الفائزين!

TinyPNG

كانت TinyPNG واحدة من أولى أدوات ضغط الصور التي استخدمتها وما زلت أستخدمها في بعض الأحيان. لا توجد خيارات ، ما عليك سوى تحميل الصور وستضغط عليها. باستخدام هذه الأداة عبر الإنترنت ، يمكنك تحميل ما يصل إلى 20 صورة بحجم 5 ميغابايت.

أوبتيميزيلا

Optimizilla هي أداة أخرى بسيطة ولكنها قوية عبر الإنترنت. إنه مجاني للاستخدام ولديه خيار لتحميل ما يصل إلى 20 صورة. للحصول على أفضل نسبة ضغط / جودة ، نترك إعداد الجودة عند 90 ، كما هو افتراضي. إذا كنت ترغب في دفع الضغط إلى أبعد من ذلك ، فما عليك سوى تغيير هذا الإعداد وسترى تغييرات في الجودة على الفور.

ضاغط

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

ImageOptim

ImageOptim هي أداة بها الكثير من الإعدادات. يمكنك الاختيار من بين 3 خيارات جودة مختلفة و 3 خيارات جودة ألوان مختلفة. اكتشفنا أن أفضل نتائج الضغط / الجودة هي الإعدادات الافتراضية. اضبط الجودة على المستوى المتوسط ​​وجودة الألوان على تلقائي. الشيء الذي أزعجني أكثر من خلال ImageOptim ، بجانب التصميم الصغير الذي عفا عليه الزمن ، أنه يقوم بتصدير ملفات JPEG حتى لو قمت بتحميل ملفات PNG . لقد أرسلت إلى Kornel (مبتكر ImageOptim) بريدًا إلكترونيًا حول هذه المشكلة وقام بالفعل بإصلاحها.

صورة أصغر

تمامًا كما هو الحال مع Compressor ، فإن ImageSmaller به نفس الخلل. لا يوجد خيار للتحميل بالجملة. ومع ذلك ، فإنه يحتوي على واحد من أكبر حدود التحميل ، مع 50 ميغابايت. إذا كان لديك ملفات أكبر للتحسين ، فقد تكون ImageSmaller هي الأداة المناسبة لك.

وحش بحري أسطوري

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

ملف JPEG.io

JPEG.io هو نسخة مجانية من نفس الأداة مثل Kraken . لديه نفس إمكانيات الضغط ، ولكن كما يخبرنا عنوان URL لموقع الويب ، فهو مخصص فقط لملفات JPEG.

PageSpeed ​​Insights

لم تتوقع رؤية هذا هنا ، أليس كذلك؟ تعطينا PageSpeed ​​Insights أيضًا .zip للملفات المضغوطة عندما نقوم باختبار موقعنا. هذه ليست الطريقة الأكثر سهولة في الاستخدام ، حيث سيتعين عليك بالفعل أن يكون لديك موقع الويب الخاص بك على الإنترنت مع جميع الصور ثم استبدالها بالصور المضغوطة الجديدة ، ولكن ستحصل على الصور مضغوطة تمامًا مثلما تريدها Google.

نتائج أفضل أداة ضغط على الإنترنت

ستجد أدناه رسومًا بيانية مع نتائج جميع اختباراتنا. يمكنك أيضًا مراجعة جدول البيانات التفصيلي الخاص بنا للحصول على مزيد من المعلومات.

أفضل أداة ضغط على الإنترنت لملفات JPEG

قامت معظم الأدوات بضغط ملفات JPEG الاختبارية الخاصة بنا لحوالي 80٪ . دعونا نلقي نظرة على صورة child.jpg . بدأنا مع صورة بحجم 3.1 ميجا بايت وبعد تغيير حجم وضغط صورتنا كانت 165 كيلو بايت فقط كبيرة ، مما يعني 95٪ حجم أصغر . الآن ، هذا فرق! تمكنا من الحصول على نفس النتائج مع Compressor و ImageOptim . لذا ، يبدو أن لدينا فائزان هنا.

أفضل أداة ضغط على الإنترنت لـ PNGs

بالنسبة لاختبار PNG ، حصلنا على متوسط حجم مخفض بنسبة 50٪ باستخدام جميع الأدوات. ومع ذلك ، كانت Optimizilla أفضل قليلاً من البقية ، حيث تم تقليل حجم صورة pt-logo.png بنسبة 56٪ .

أفضل أداة لضغط الصور عبر الإنترنت بشكل عام

حتى لو لم تكن Optimizilla أفضل أداة ضغط لملفات JPEG ، فقد أوصيت بها كأفضل أداة ضغط متاحة حاليًا على الإنترنت. لا تزال ملفات JPEG المضغوطة بنسبة 79٪ رائعة ويمكنك دفعها إلى مستوى أعلى من خلال إعداد جودة بسيط على الصفحة. كما أن لديها خيار التحميل المجمع ، حيث يكون Compressor مفقودًا ويتم تحميل أكثر موثوقية من ImageOptim ، حيث يتم تصدير جميع الصور بتنسيق JPEG ، حتى لو كانت ملفات PNG من بينها. بسبب كل هذه الأشياء ، أعتقد أن Optimizilla تستحق لقب أفضل أداة لضغط الصور عبر الإنترنت.

بعد ذلك ، دعنا نرى ، ما إذا كانت مكونات WordPress الإضافية يمكنها التغلب على أدوات ضغط الصور عبر الإنترنت.

أفضل ملحقات WordPress لضغط الصور

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

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

لقد اختبرت المكونات الإضافية التالية:

• WP Smush (نسخة مجانية)
• ضغط صور JPEG و PNG بواسطة TinyPNG
• بكسل قصير
• تخيل
• EWWW Image Optimizer (نسخة مجانية)

كما ذكرت من قبل ، إذا كنت تعرف أي مكون إضافي آخر يجب علينا اختباره ، فأخبرنا بذلك وسنضيفه إلى القائمة. إذا كنت لا تريد معرفة المزيد عن هذه المكونات الإضافية ، فانقر هنا - أرني الفائزين!

WP Smush (نسخة مجانية)

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

ضغط صور JPEG و PNG بواسطة TinyPNG

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

بكسل قصير

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

تخيل

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

EWWW Image Optimizer (نسخة مجانية)

كان EWWW Image Optimizer هو المكون الإضافي الوحيد ، الذي أعطاني بعض الأخطاء. أولاً ، جربته على الاستضافة الخاصة بي ووجدت خطأً ، أن EWWW Image Optimizer يتطلب exec () أو مفتاح API. في المرة التالية التي جربت فيها المكون الإضافي على موقع التطوير المحلي WordPress الخاص بي ووجدت خطأ يفوتني pngout. لقد اتبعت التعليمات الخاصة بكيفية تثبيته وأصبح المكون الإضافي جاهزًا أخيرًا للاختبار. منذ أن اختبرت الإصدار المجاني ، لم يكن هناك سوى خيار بلا خسارة ، والذي لم يؤد إلى أفضل النتائج. تمامًا كما هو الحال مع WP Smush ، سأختبر أيضًا إصدار EWWW Image Optimizer pro في تحديث المقالة التالي وسنرى ما إذا كان سيؤدي بشكل أفضل.

نتائج أفضل مكون إضافي ووردبريس لضغط الصور

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

أفضل مكون إضافي لبرنامج WordPress لضغط ملفات JPEG

كان ShortPixel هو الفائز ، بمعدل ضغط يبلغ 84٪ . هو نفس Compressor و ImageOptim في فئة أفضل أداة ضغط على الإنترنت. ثاني أفضل مكون إضافي كان Imagify ، بمعدل ضغط 70٪ . أقر بأن ShortPixel هو الفائز المطلق في هذه الفئة حاليًا.

أفضل مكون إضافي لبرنامج WordPress لضغط ملفات PNG

أفضل مكون إضافي لضغط PNG يسمى ضغط صور JPEG و PNG بواسطة TinyPNG ، مع ضغط 56٪ . ومن المثير للاهتمام ، أن أفضل نتيجة هي ، مرة أخرى ، هي نفسها الموجودة في فئة أفضل أداة ضغط عبر الإنترنت. ومع ذلك ، فإن المكونات الإضافية الأخرى تكون أكثر تنافسية قليلاً هنا ، مع ضغط حوالي 50٪ .

أفضل مكون إضافي لبرنامج WordPress لضغط الصور بشكل عام

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

استنتاج

كانت تلك رحلة طويلة ، أليس كذلك؟ في غضون ذلك ، تمكنا من ضغط صورة child.jpg الخاصة بنا بنسبة تصل إلى 95٪ . يمكن أن يعمل موقع الويب الخاص بك بشكل أسرع ، إذا اتبعت هذه الخطوات الثلاث البسيطة فقط. دعنا نكررها مرة أخرى:

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

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

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