صور WebP في ووردبريس: ليه أخف وإزاي المتصفح يختارها

لو فتحت تقرير PageSpeed لموقعك ولقيت أول اقتراح “Serve images in next-gen formats”، فأنت مش لوحدك. في أغلب مواقع ووردبريس اللي بنشوفها، الصور هي اللي تقيّل الصفحة مش الكود. الخبر الحلو إن الحل جزء كبير منه اسمه WebP، وووردبريس نفسه بقى يدعمه من النواة.

لماذا تكون صورة WebP أصغر؟

صيغة JPEG تعود إلى عام 1992، وتعتمد على تحويل رياضي اسمه DCT يقسّم الصورة إلى مربعات صغيرة ويضغط كل مربع على حدة. أما صيغة WebP التي أطلقتها Google عام 2010، فقد أخذت تقنيات ضغط الإطار الواحد من ترميز الفيديو VP8 وطبّقتها على الصور الثابتة.

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

صيغة واحدة بدل ثلاث

الميزة الثانية أن WebP تغطي ما كنت تحتاج له ثلاث صيغ:

كيف يقرر المتصفح أي صيغة يحمّل؟

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

الطريقة الأولى: التفاوض على المحتوى (Content Negotiation)

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

Accept: image/avif,image/webp,image/*,*/*;q=0.8

يقرأ الخادم أو شبكة توصيل المحتوى (CDN) هذه الترويسة: إن وُجدت image/webp يرسل نسخة WebP، وإلا يرسل JPEG أو PNG، والرابط نفسه لم يتغير. الآلية ذاتها تُستخدم للغة عبر Accept-Language وللضغط عبر Accept-Encoding.

هذا ما تفعله خدمات مثل Cloudflare (ميزة Polish في الخطط المدفوعة) وبعض إضافات الكاش التي تعيد كتابة الطلبات على مستوى الخادم.

الطريقة الثانية: وسم <picture>

يمكنك أن تعلن البدائل صراحة في HTML، ويختار المتصفح أول صيغة يفهمها:

<picture>
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="وصف الصورة" width="1200" height="675" loading="lazy">
</picture>

المتصفح الذي يدعم WebP يحمّل photo.webp، وغيره يتجاهل <source> ويحمّل photo.jpg. لا حاجة لأي منطق على الخادم.

اليوم تدعم كل المتصفحات الرئيسية (Chrome وFirefox وEdge وSafari) صيغة WebP، فنادراً ما يُستخدم البديل. لكن بعض برامج معاينة البريد الإلكتروني وبعض الروبوتات لا تزال لا تفهمها، لذلك يبقى وجود بديل JPEG قراراً معقولاً.

WebP داخل ووردبريس: ما الذي تغيّر؟

لفترة طويلة كان رفع ملف .webp إلى مكتبة الوسائط يفشل برسالة “نوع الملف غير مسموح لأسباب أمنية”. منذ ووردبريس 5.8 أُضيفت WebP إلى قائمة أنواع الملفات المسموحة (wp_get_mime_types())، فصار الرفع مباشراً.

الخطوة التالية هي التحويل التلقائي: عند رفع صورة JPEG، يولّد ووردبريس منها مقاسات فرعية (المصغرات والمقاسات المسجلة عبر add_image_size()). يمكن جعل هذه المقاسات تُحفظ بصيغة WebP مع ترك الملف الأصلي كما هو، عبر الفلتر image_editor_output_format:

// Save generated JPEG sub-sizes as WebP; the original upload stays JPEG.
add_filter( 'image_editor_output_format', function ( $formats ) {
    $formats['image/jpeg'] = 'image/webp';
    return $formats;
} );

ضع الكود في إضافة صغيرة خاصة بموقعك أو في functions.php لقالب فرعي، ثم أعد توليد المصغرات للصور القديمة بإضافة مثل Regenerate Thumbnails. إذا كنت لا تريد كتابة كود، فإضافة Modern Image Formats من فريق Performance في ووردبريس تفعل الشيء نفسه بواجهة إعدادات.

تحقق من الاستضافة أولاً

التحويل لا يحدث إلا إذا كانت مكتبة معالجة الصور على الخادم (GD أو Imagick) تدعم إخراج WebP. افتح أدوات ← صحة الموقع ← معلومات ← Media Handling وابحث عن WebP ضمن الصيغات المدعومة. أغلب الاستضافات الحديثة مثل Hostinger تدعمها افتراضياً، لكن بعض الاستضافات المحلية الرخيصة في المنطقة لا تزال على إصدارات قديمة من GD، فاسأل الدعم الفني قبل أن تفترض.

في Elementor: ودجت Image وخلفيات الأقسام تستخدم مقاسات ووردبريس نفسها، فبمجرد تفعيل التحويل تحصل على WebP تلقائياً. انتبه فقط للصور المرفوعة بمقاس Full، فهذه تبقى بصيغتها الأصلية؛ اختر مقاساً أصغر من قائمة Image Size كلما أمكن.

لا تنسَ نوع الملف (MIME Type)

المتصفح لا يحكم على الصورة من امتدادها بل من ترويسة Content-Type التي يرسلها الخادم. لو أرسل الخادم ملف .webp بنوع image/png، قد لا تظهر الصورة، أو يبدأ المتصفح تنزيلها بدل عرضها.

إذا كتبت كوداً يخدم صوراً بنفسه (رفع شعار في إضافة، أو تضمين صورة كـ data URI في PDF)، حدد النوع صراحة من جدول بدل التخمين:

mime_map = {'.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
            '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml'}

في ووردبريس استخدم الدالة الجاهزة wp_check_filetype() بدلاً من كتابة جدولك الخاص؛ فهي تعيد النوع الصحيح من قائمة الأنواع المسموحة.

متى لا تستخدم WebP؟

صورة المشاركة (Open Graph) التي تظهر عند نشر رابطك على فيسبوك أو واتساب أو X تقرؤها روبوتات المنصات، لا متصفح الزائر. هذه الروبوتات لا تواكب دائماً دعم الصيغ الحديثة، لذلك اجعل صورة og:image بصيغة JPEG أو PNG.

القاعدة العملية: WebP لكل ما يراه الزائر داخل الصفحة، وJPEG/PNG لما تقرؤه المنصات الخارجية. في Yoast أو Rank Math ارفع صورة المشاركة يدوياً بصيغة JPEG بدل الاعتماد على الصورة البارزة إذا كانت WebP.

الأسئلة الشائعة

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

س: هل أحتاج إضافة لتحويل الصور إلى WebP في ووردبريس؟
ج: لا بالضرورة. يكفي الفلتر image_editor_output_format في سطرين من الكود، أو إضافة Modern Image Formats الخفيفة إذا كنت تفضّل واجهة إعدادات.

س: هل يحوّل ووردبريس الصورة الأصلية التي رفعتها؟
ج: لا، يبقى الملف الأصلي كما هو، ويُحوَّل فقط ما يولّده ووردبريس من مقاسات فرعية، وهي التي تظهر في القوائم والصور البارزة.

س: لماذا لا تظهر صورة موقعي عند المشاركة على واتساب؟
ج: أحد الأسباب الشائعة أن صورة og:image بصيغة WebP أو بحجم كبير جداً. جرّب صورة JPEG بمقاس 1200×630 وحجم أقل من 300 كيلوبايت.

الخلاصة

صيغة WebP أخف لأنها استعارت ضغط الفيديو، والمتصفح يختارها إما بتفاوض مع الخادم أو عبر وسم <picture>، وووردبريس يدعمها رفعاً وتحويلاً منذ 5.8. فعّل التحويل النهارده، وسيب صورة المشاركة JPEG، وقيس الفرق في PageSpeed بنفسك.

مرجع المقال (بالإنجليزية): Image Optimization and WebP Basics — Why WebP Is Smaller, and How Browsers Decide to Use It
المقال ده مش ترجمة حرفية: متكيّف للقارئ العربي ومضاف عليه سياق ووردبريس وElementor وJetEngine.

والصور الخفيفة نصف المعادلة فقط: سيرفر LiteSpeed قريب من جمهورك يكمّل النصف الآخر، وده اللي شغال عليه عرب CMS جرّب Hostinger.