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

في DoctorMega، نطبق أفضل ممارسات تحسين الصور بانتظام على مدوناتنا. نحرص على أن ينشئ جميع منشئينا صور بالأبعاد الصحيحة، ثم يقللون حجم ملف الصورة باستخدام أدوات رسومات متنوعة.

في هذه المقالة، سنوضح لك كيفية تحسين صورك لتحسين أداء موقعك الكتروني دون التأثير على جودتها. كما سنشاركك اضافات تحسين الصور التلقائية على ووردبريس التي تسهّل عليك العمل.

نظرًا لأن هذا دليل شامل حول تحسين الصور للويب، فقد قمنا بإنشاء جدول محتويات سهل المتابعة:

1. ما هو تحسين الصورة؟

تحسين الصور هو عملية حفظ الصور وتقديمها بأصغر حجم ممكن دون التأثير على جودتها الإجمالية.

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

فيما يلي مثال على صورة محسنة مقابل صورة غير محسنة:

كما ترى، عند تحسين الصورة بشكل صحيح، يمكن أن تصبح أصغر بنسبة تصل إلى 80% من الصورة الأصلية دون أي فقدان في الجودة. في هذا المثال، الصورة أصغر بنسبة 52%.

كيف تعمل عملية تحسين الصورة؟

ببساطة، يعمل تحسين الصور باستخدام تقنية الضغط.

يمكن أن يكون الضغط “مع فقدان” أو “بدون فقدان”.

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

ماذا يعني تحسين الصور؟

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

ستحتاج إلى تقليل حجم ملفات صورك عن طريق تحسينها للويب. سنشرح لك كيفية القيام بذلك خطوة بخطوة.

2. ما هي فوائد تحسين الصورة؟

على الرغم من وجود العديد من الفوائد لتحسين صورك، إليك أهم الفوائد التي يجب أن تعرفها:

• سرعة أكبر لموقعك الإلكتروني
• تحسين ترتيب موقعك في محركات البحث
• معدل تحويل إجمالي أعلى للمبيعات والعملاء المحتملين
• مساحة تخزين ونطاق ترددي أقل (مما يقلل من تكاليف الاستضافة وشبكة توصيل المحتوى)
• نسخ احتياطي أسرع لموقعك الإلكتروني (مما يقلل من تكلفة تخزين النسخ الاحتياطي)

الصور هي ثاني أهم عنصر في صفحات الويب بعد مقاطع الفيديو. ووفقًا لأرشيف HTTP، تشكل الصور 42% من إجمالي وزن صفحة الويب.

بما أننا نعلم أن المواقع الإلكترونية السريعة تحقق ترتيب أعلى في محركات البحث (السيو) وتتمتع بمعدلات تحويل أفضل، فإن تحسين الصور أمر أساسي لكل موقع الكتروني تجاري يسعى للنجاح على الإنترنت.

الآن ربما تتساءل عن الفرق الكبير الذي يمكن أن يحدثه تحسين الصورة حقًا.

وفقًا لدراسة أجرتها Strangeloop، فإن تأخير لمدة ثانية واحدة في تحميل الموقع الكتروني قد يكلفك 7% من المبيعات، و11% انخفاض في عدد مشاهدات الصفحة، و16% انخفاض في رضا العملاء.

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

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

3. كيفية حفظ الصور وتحسينها لتحسين أداء الويب

مفتاح نجاح تحسين الصور لتحسين أداء الويب هو تحقيق التوازن المثالي بين أصغر حجم للملف وجودة الصورة المقبولة.

العوامل الثلاثة التي تلعب دور هام في تحسين الصور هي:

• تنسيق ملف الصورة (JPEG مقابل PNG مقابل GIF)
• الضغط (ضغط أعلى = حجم ملف أصغر)
• أبعاد الصورة (الارتفاع والعرض)

باختيار المزيج المناسب من الخيارات الثلاثة، يمكنك تقليل حجم صورتك بنسبة تصل إلى 80%.

دعونا نلقي نظرة على كل منها بمزيد من التفصيل.

1. تنسيق ملف الصورة

بالنسبة لمعظم مالكي المواقع الإلكترونية، تنسيقات ملفات الصور الثلاثة المهمة هي JPEG وPNG وGIF. اختيار نوع الملف المناسب يلعب دور هام في تحسين الصور.

لتبسيط الأمور، ينصح باستخدام تنسيقات JPEG للصور أو الصور متعددة الألوان، وPNG للصور البسيطة أو الشفافة، وGIF للصور المتحركة فقط.

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

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

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

في DoctorMega، نستخدم تنسيقات الصور الثلاثة بناء على نوع الصورة.

2. ضغط

الخطوة التالية هي ضغط الصور، الذي يلعب دور هام في تحسين الصور.

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

تحتوي معظم أدوات تحرير الصور، مثل Adobe Photoshop وON1 Photo وGIMP وAffinity Photo وغيرها، على ميزات ضغط صور مدمجة.

يمكنك أيضًا حفظ الصور بشكل طبيعي ثم استخدام أداة ويب مثل TinyPNG أو JPEGmini لضغط الصور بشكل أسهل.

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

هناك أيضًا العديد من اضافات ووردبريس الشائعة، مثل Optimole وEWWW Image Optimizer، التي يمكنها ضغط الصور تلقائيًا عند تحميلها لأول مرة. هذا الأمر سهل الاستخدام، ويفضل العديد من المبتدئين، وحتى الشركات الكبيرة، استخدام هذه الإضافات لتحسين الصور.

سنشارك المزيد حول استخدام اضافات ووردبريس لاحقًا في هذه المنشور.

3. أبعاد الصورة

عادة، عند استيراد صورة من هاتفك أو كاميرا رقمية، تكون دقتها عالية جدًا وأبعادها كبيرة (الطول والعرض).

عادة، تكون دقة هذه الصور 300 نقطة في البوصة، وأبعادها تبدأ من 2000 بكسل فأكثر. في حين أن الصور عالية الجودة مناسبة للطباعة أو النشر المكتبي، إلا أن أحجامها الكبيرة تجعلها غير مناسبة للمواقع الإلكترونية.

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

على سبيل المثال، قمنا بتحسين صورة بدقة 300 نقطة في البوصة وأبعاد 4900 × 3200 بكسل. كان حجم الملف الأصلي 1.8 ميجابايت.

اخترنا صيغة JPEG لضغط أعلى، وغيرنا الأبعاد إلى 1200 × 795 بكسل. تم تقليل حجم الملف إلى 103 كيلوبايت فقط، أي أصغر بنسبة 94% من حجم الملف الأصلي.

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

4. أفضل أدوات وبرامج تحسين الصور

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

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

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

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

Adobe Photoshop

Adobe Photoshop هو تطبيق تحرير صور متميز يتيح لك تصدير الصور بحجم ملف أصغر للويب.

باستخدام مربع حوار التصدير، يمكنك اختيار تنسيق ملف الصورة (JPG، PNG، GIF) الذي يمنحك أصغر حجم للملف.

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

GIMP

GIMP هو بديل مجاني ومفتوح المصدر لبرنامج Adobe Photoshop. يمكن استخدامه لتحسين صورك للويب. عيبه هو أنه ليس سهل الاستخدام كبعض الحلول الأخرى في هذه القائمة.

أولاً، افتح صورتك في GIMP، ثم اختر File » Export As…. سيؤدي هذا إلى ظهور مربع حوار “Export Image”، حيث يمكنك تسمية ملفك باسم جديد. بعد ذلك، انقر على زر “Export”.

ستظهر الأن خيارات تصدير الصورة. بالنسبة لملفات JPEG، يمكنك استخدام شريط تمرير “Quality” لتحديد مستوى الضغط وتقليل حجم الملف.

وأخيرًا، يجب عليك النقر فوق زر “Export” لحفظ ملف الصورة المحسَن.

TinyPNG

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

سيقومون بضغط الصورة وإعطائك رابط التنزيل.

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

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

JPEGmini

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

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

ImageOptim

ImageOptim هي أداة مساعدة لنظام التشغيل Mac تتيح لك ضغط الصور دون فقدان أي جودة من خلال العثور على أفضل معلمات الضغط وإزالة ملفات تعريف الألوان غير الضرورية.

البديل لهذا في نظام Windows هو Trimage.

5. أفضل اضافات تحسين الصور ووردبريس

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

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

• EWWW Image Optimizer
• Optimole، إضافة شائعة من فريق ThemeIsle
• JPEG, PNG & WebP Image Compression، إضافة من فريق TinyPNG المذكور سابقًا
• Imagify، إضافة من فريق WP Rocket الشهير
• ShortPixel Image Optimizer
• Smush
• reSmush.it

ستساعدك اضافات تحسين صور ووردبريس هذه على تسريع الموقع الكتروني الخاص بك.

6. الأفكار النهائية وأفضل الممارسات لتحسين الصور

إذا لم تكن تحفظ صور محسنة للويب، فعليك البدء بذلك الأن. سيحدث ذلك فرق كبير في سرعة موقعك، وسيشكرك مستخدموك على ذلك.

فضلاً عن ذلك، تعد المواقع الأسرع أداة رائعة للسيو، ومن المرجح أن تشهد ارتفاع في ترتيب موقعك في نتائج البحث.

إلى جانب تحسين الصور، هناك أمران يساعدانك بشكل كبير في تسريع موقعك: استخدام إضافة تخزين مؤقت ووردبريس وشبكة توصيل محتوى ووردبريس (CDN).

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

أدلة الخبراء حول تحسين أداء ووردبريس

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

• الدليل الشامل لتعزيز سرعة وأداء ووردبريس
• كيفية تسريع أداء ووكومرس
• كيفية تخفيف عبء وسائط ووردبريس لتحسين سرعة موقعك
• أفضل إضافات تخزين مؤقت ووردبريس لتسريع موقعك
• كيفية تحسين Core Web Vitals لـ ووردبريس (الدليل الشامل)
• كيفية تقليل زمن الوصول إلى أول بايت (TTFB) في ووردبريس – نصائح الخبراء
• كيفية استخدام إضافة GTmetrix لتحسين أداء موقع ووردبريس
• أسرع استضافة ووردبريس (اختبارات الأداء)
• مقاييس مهمة لقياس أداء موقع ووردبريس
• كيفية إجراء اختبار سرعة موقع الويب بشكل صحيح
• كيفية اختبار موقع ووردبريس تحت الضغط