لكي تحول الصور إلى WebP في ووردبريس (أو AVIF)، يمكنك الاعتماد على الدعم المدمج (WebP منذ ووردبريس 5.8 وAVIF منذ 6.5) إذا دعمت مكتبة الصور في السيرفر الصيغة، أو استخدام إضافة تحسين تحول الملفات الجديدة والحالية مع بدائل، أو ترك CDN يحول الصور لحظيا. احتفظ بالأصول وراجع النتيجة في صفحات حقيقية.
الصور عادة أثقل جزء في الصفحة وغالبا تكون عنصر LCP، لذلك هذا من أكثر إصلاحات السرعة فاعلية.
WebP أم AVIF: أيهما أستخدم؟
استخدم الاثنين متى أمكن. AVIF يعطي عادة ملفات أصغر بجودة مشابهة خاصة للصور الفوتوغرافية، لكن ترميزه أطول وبعض المتصفحات القديمة لا تدعمه. WebP حل وسط موثوق بدعم واسع جدا. الإعداد الجيد يقدم AVIF للمتصفحات التي تقبله، وWebP للباقي، وJPEG أو PNG كبديل أخير.
الخطوة 1: اعرف ما يدعمه سيرفرك
يستخدم ووردبريس Imagick أو GD لإنشاء الصور المصغرة. وقدرته على إنتاج WebP أو AVIF تعتمد على طريقة تجهيز هذه المكتبات في استضافتك.
افحص من أدوات ← صحة الموقع ← معلومات ← معالجة الوسائط، أو بـ WP-CLI:
wp eval 'var_dump( wp_image_editor_supports( array( "mime_type" => "image/avif" ) ) );'
wp eval 'var_dump( wp_image_editor_supports( array( "mime_type" => "image/webp" ) ) );'
إذا أعاد AVIF القيمة false فمكتبة استضافتك لا تدعمه، فاستخدم إضافة أو CDN يحول في مكان آخر، أو اسأل الاستضافة.
الخطوة 2: اختر طريقتك
الخيار أ: صيغة الإخراج المدمجة في ووردبريس
منذ ووردبريس 5.8 يتيح فلتر image_editor_output_format توليد المقاسات الفرعية بصيغة مختلفة:
add_filter( 'image_editor_output_format', function ( $formats ) {
$formats['image/jpeg'] = 'image/webp';
return $formats;
} );
هذا يؤثر على مقاسات الصور الجديدة. بسيط، لكنك تدير البدائل والصور الحالية بنفسك.
الخيار ب: إضافة تحسين
أغلب إضافات تحسين الصور والكاش الشهيرة تحول الملفات إلى WebP وAVIF، وتعالج المكتبة الحالية بالجملة، وتعيد كتابة HTML إلى عناصر <picture> أو تستخدم قواعد السيرفر لتقديم أفضل صيغة. وهذا الطريق الأكثر عملية لأغلب المواقع.
ما تبحث عنه:
- تحول الملفات الجديدة والمكتبة الحالية.
- تحتفظ بالأصول.
- توفر بدائل عبر
<picture>أو قواعد ترويسةAccept. - تتيح ضبط الجودة لكل صيغة.
- تستثني صورا محددة عند الحاجة (الشعارات وملفات SVG).
الخيار ج: التحويل عبر CDN
شبكات CDN للصور وبعض ميزات CDN تحول وتغير المقاس على الحافة حسب ترويسة Accept في المتصفح. لا حمل على سيرفرك، لكن راجع التكلفة وتأكد أن الكاش يختلف حسب الصيغة بشكل صحيح.
الخطوة 3: البدائل مع picture
عند التقديم عبر HTML:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" width="1200" height="800" alt="Handmade leather bag">
</picture>
يأخذ المتصفح أول نوع يدعمه، ويبقى العرض والارتفاع والنص البديل على <img>.
الخطوة 4: لا تنس الأبعاد
تحويل صيغة صورة عرضها 4000 بكسل ما زال يهدر البيانات على الهاتف. افحص:
- أحجام الرفع: صغر الأصول الضخمة قبل الرفع أو عنده. يصغر ووردبريس الصور الكبيرة جدا إلى 2560 بكسل كحد أقصى افتراضيا (حد “الصورة الكبيرة”).
- وجود
srcsetوsizesليختار المتصفح العرض المناسب. - مقاسات صور القالب تطابق طريقة عرض الصور فعلا.
- وجود سمتي العرض والارتفاع لمنع تحرك التصميم (CLS).
الخطوة 5: حول الصور الحالية بالجملة
في مكتبة وسائط كبيرة قد يرهق التحويل بالجملة السيرفر البطيء. طريقتي:
- خذ نسخة احتياطية من
wp-content/uploads. - حول على دفعات صغيرة خارج أوقات الذروة.
- أعد توليد الصور المصغرة الناقصة فقط حيث يلزم:
wp media regenerate --only-missing --yes
- افحص عينات من الصفحات بحثا عن صور معطوبة أو مشوشة.
المزيد من الأوامر في دليل WP-CLI.
إعدادات الجودة
لا يوجد رقم عام. ابدأ بجودة متوسطة، وقارن بصريا بحجم العرض الحقيقي، ثم عدل. صور المنتجات ذات الملمس الدقيق قد تحتاج أكثر، والخلفيات الزخرفية تقبل أقل. والشعارات والرسوم بألوان مسطحة غالبا أفضل كـ SVG أو WebP بدون فقد.
النص البديل والسيو
تغيير الصيغة يجب ألا يغير المعنى. احتفظ بنص بديل وصفي، وأسماء ملفات مفهومة (blue-leather-bag.jpg لا IMG_0042.jpg)، وتأكد أن خرائط الصور أو إضافات SEO تشير إلى روابط تعمل.
قائمة المراجعة
- فحص دعم السيرفر لـ WebP وAVIF
- اختيار الطريقة: مدمجة أو إضافة أو CDN
- الاحتفاظ بالأصول
- البدائل تعمل في المتصفحات التي لا تدعم AVIF
- الأبعاد وsrcset صحيحة
- تحويل المكتبة الحالية على دفعات
- التأكد من صورة LCP بالصيغة الجديدة
- فحص الجودة المرئية على أجهزة حقيقية
أخطاء شائعة
- تحويل شعارات PNG إلى صيغ بفقد والحصول على حواف مشوشة.
- تقديم AVIF دون بديل.
- كاش CDN لا يختلف حسب الصيغة، فيقدم AVIF لمتصفح لا يستطيع عرضه.
- التحويل بالجملة على استضافة مشتركة في ساعات العمل وإبطاء الموقع.
تحتاج تحسين مكتبة الوسائط بأمان؟ تواصل معي. التالي في السلسلة: استضافة خطوط جوجل محليا.
الأسئلة الشائعة
هل AVIF أفضل من WebP؟
AVIF غالبا ينتج ملفات أصغر بجودة مرئية مشابهة خاصة للصور الفوتوغرافية، لكن ترميزه أبطأ. WebP أسرع في الترميز ومدعوم على نطاق واسع جدا، وكثير من المواقع تقدم AVIF مع بديل WebP أو JPEG.
هل يدعم ووردبريس AVIF؟
نعم، أضاف ووردبريس 6.5 دعم AVIF للرفع ومقاسات الصور، بشرط أن تدعمه مكتبة الصور في السيرفر (Imagick أو GD).
هل يضر تحويل الصور بالسيو؟
لا، إذا بقيت روابط الصور تعمل والنص البديل موجودا والصور تحمل. وتقديم الصيغ الحديثة يحسن الأداء غالبا.
هل أحذف ملفات JPEG الأصلية؟
احتفظ بالأصول كبديل ولإعادة الترميز مستقبلا، فالتخزين أرخص من صورة أصلية مفقودة.
