ضغط الصور في ووردبريس وتحويلها لـ WebP

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

في المقال ده هشرح الفرق بين الصيغ، وإزاي تصغّر الصور قبل الرفع، وإزاي تحوّلها لـ WebP، وإزاي تحسّن صور الموقع القديمة، وإيه الأخطاء اللي بتبوّظ الجودة أو بتبطّأ الموقع بدل ما تسرّعه.

محتويات المقال

ليه ضغط الصور ووردبريس بيفرق؟

• السرعة: صفحة بصور أخف بتتحمّل أسرع، وده بيحسّن تجربة الزائر ومؤشرات الأداء. راجع Core Web Vitals وقياس سرعة الموقع.
• البيع: في المتاجر، صفحة منتج سريعة بتزوّد فرصة إتمام الطلب. تسريع متجر ووكومرس وتحويل صفحة المنتج.
• الاستضافة: الصور الكبيرة بتاخد مساحة وbandwidth وبتبطّأ النسخ الاحتياطي. النسخ الاحتياطي.
• السيو: السرعة جزء من تجربة الصفحة اللي جوجل بيهتم بيها. وللجانب الخاص بالصور نفسها في محركات البحث، شوف تحسين الصور لمحركات البحث.

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

الصيغ: JPEG وPNG وWebP وAVIF

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

القاعدة العملية: WebP للأغلبية، وJPEG احتياطي للحالات اللي محتاجها، وPNG للشفافية والشعارات. وخلّي شعاراتك بصيغة SVG لو ممكن لأنها خفيفة جدًا.

قبل الرفع: صغّر الأبعاد أولًا

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

1. اعرف أقصى عرض بتتعرض بيه الصورة في تصميمك. لصورة المقال غالبًا عرض الصفحة، ولصورة المنتج عرض معرض المنتجات.
2. صغّر الصورة لعرض يناسب (قد أقصى عرض أو شوية أكتر للشاشات الحادة)، مش أكبر.
3. صدّرها بجودة معقولة: مش لازم 100%. جودة متوسطة لعالية بتديك حجم أقل بكتير من غير فرق واضح للعين.
4. سمّي الملف باسم واضح (مش IMG_4032). ده مفيد للسيو.
5. اختبر النتيجة على الموبايل مش بس الكمبيوتر.

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

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

إضافات ضغط الصور ووردبريس والتحويل التلقائي

بدل ما تضغط كل صورة بإيدك، فيه إضافات بتضغط وتحوّل الصور تلقائيًا عند الرفع، وبتعالج الصور القديمة بالجملة. أمثلة معروفة: Smush وShortPixel وImagify وEWWW Image Optimizer. بعضها مجاني بحدود وبعضها مدفوع، والحدود والأسعار بتتغير، فراجعها وقت اختيارك. ومقارنة إضافات ووردبريس بشكل عام في أفضل إضافات ووردبريس.

اللي تدوّر عليه في الإضافة:

• ضغط بنوعين: بفقد بسيط (Lossy) أو بدون فقد (Lossless).
• تحويل لـ WebP مع بديل تلقائي للمتصفحات القديمة، أو عرض WebP مباشرة.
• معالجة المقاسات المولّدة: ووردبريس بيعمل نسخ بأحجام مختلفة لكل صورة، والإضافة لازم تضغطها كلها.
• معالجة بالجملة (Bulk) للصور الموجودة.
• نسخة من الأصل تحتفظ بيها عشان ترجع لو الجودة ما عجبتكش.
• خفة الإضافة نفسها: الإضافة اللي بتبطّأ الموقع ملهاش لازمة.

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

التحميل الكسول (Lazy Load) وتحميل الصور المهمة أولًا

• التحميل الكسول: معناه إن الصورة ما بتتحمّلش إلا لما الزائر ينزل لحد مكانها. ووردبريس بيطبّقه تلقائيًا على الصور في الإصدارات الحديثة، فمتحتاجش إضافة له غالبًا. لكن اتأكد.
• الصورة الأولى في الصفحة (Hero/البانر): لا تعمل لها تحميل كسول، لأنها أول حاجة الزائر بيشوفها وبتأثر على الإحساس بالسرعة. اتأكد إنها خفيفة وبتتحمّل بسرعة.
• أبعاد الصورة محددة (width وheight) عشان ما يحصلش قفز في الصفحة وقت التحميل.
• CDN: لو الزوار من أماكن بعيدة، شبكة توصيل محتوى بتسرّع تحميل الصور. اختياري ويعتمد على موقعك.

اختبار النتيجة

بعد الضغط:

1. قيس الصفحة قبل وبعد بأداة قياس معروفة، وقارن حجم الصفحة وسرعة تحميلها.
2. افتح الصفحات على موبايل واتأكد إن الصور واضحة ومش مكسورة.
3. راجع صور المنتجات بشكل خاص، لأن الضغط الزايد ممكن يبيّن الألوان غلط، والزبون يرجّع.
4. تأكد إن الصور لسه ظاهرة في المشاركة على فيسبوك وانستجرام وواتساب.
5. تابع Search Console لأي مشاكل في الصفحات. دليل Search Console.

أخطاء شائعة

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

خطوات تنفيذ سريعة لموقع قائم

1. خد نسخة احتياطية كاملة.
2. اقيس صفحة مهمة (الرئيسية وصفحة منتج) وسجّل حجم الصفحة وزمن التحميل.
3. ثبّت إضافة ضغط واحدة وظبط الإعدادات: ضغط متوسط، تحويل لـ WebP، وحفظ نسخة من الأصل.
4. جرّب على 20 صورة وراجع الجودة على الموبايل.
5. شغّل المعالجة بالجملة على باقي الصور بدفعات.
6. امسح الكاش وقيس نفس الصفحات تاني.
7. راجع الصفحات الأساسية يدويًا للتأكد إن مفيش صور مكسورة أو مشوّهة.
8. اجعل الإضافة تعمل تلقائيًا على أي صورة جديدة، وعلّم الفريق بقواعد التصغير قبل الرفع.

وبعد أسبوع، راجع تقارير السرعة في Search Console لو متاحة عندك، واتأكد إن مفيش مشكلة ظهرت.

أسئلة شائعة

أحسن صيغة للصور في ووردبريس؟

WebP لأغلب الصور، وJPEG للتوافق لو احتجت، وPNG للشفافية، وSVG للشعارات والأيقونات.

هل الضغط بيقلل جودة الصورة؟

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

أكبر حجم مناسب للصورة؟

مفيش رقم موحّد. الهدف إن الصورة تكون أصغر ما يمكن بجودة مقبولة لمكانها. صور المقالات والمنتجات غالبًا عشرات الكيلوبايتات لمئات قليلة، مش ميجا.

محتاج إضافة ولا أضغط بإيدي؟

لو بترفع صور قليلة، الضغط اليدوي كفاية. لو الموقع كبير أو متجر، الإضافة بتوفر وقت كبير.

لو موقعك بطيء وعايز تحدد هل الصور هي السبب، احجز استشارة ونفحص الصفحات ونرتّب الإصلاح.