تحسين الصور لموقع ووردبريس: WebP والأبعاد الصحيحة والتحميل الكسول

في متجر إلكتروني عادي، الصور تمثّل 60–75% من حجم الصفحة. صورة منتج واحدة مرفوعة من الكاميرا مباشرة (5MB) تساوي في الحجم 30 صفحة نصية. الخبر الجيد: تحسين الصور هو أسهل مكسب في السرعة وأكثره أثرًا.

القاعدة الأولى: الصيغة الصحيحة

القاعدة الثانية: الأبعاد قبل الضغط

لا فائدة من ضغط صورة 4000×3000 بكسل ستُعرض في صندوق 600×450. اعرف أكبر حجم عرض لكل نوع صورة في قالبك:

• صورة المنتج الرئيسية: 800–1000px عرضًا كافية (تكبير الزوم يستخدم النسخة الكبيرة فقط عند الطلب).
• صور شبكة المتجر: 400–600px.
• الصورة البارزة للمقال: 1200px عرضًا (تخدم المشاركة الاجتماعية أيضًا).
• الشرائح والبانرات: 1600–1920px، وبنسخة عمودية منفصلة للهاتف.

القاعدة الثالثة: الضغط الذكي

جودة JPEG/WebP بين 75 و82 لا يلاحظ فرقها أحد وتوفّر نصف الحجم مقارنة بجودة 100. أدوات مجانية: Squoosh (في المتصفح، بدون رفع لأي سيرفر) أو TinyPNG. للمكتبات الكبيرة: إضافة مثل ShortPixel أو Imagify أو LiteSpeed Cache (تحويل WebP مدمج).

التحميل الكسول: افعله صح

ووردبريس يضيف loading="lazy" لكل الصور تلقائيًا. المشكلة: لو أول صورة في الصفحة (صورة البطل أو المنتج) كسولة، فإن مقياس LCP يسوء. الحل:

// استثناء الصورة البارزة والصورة الأولى من التحميل الكسول + أولوية جلب عالية
add_filter( 'wp_get_attachment_image_attributes', function ( $attr, $attachment, $size ) {
    if ( is_singular() && get_post_thumbnail_id() === $attachment->ID ) {
        $attr['loading']       = 'eager';
        $attr['fetchpriority'] = 'high';
    }
    return $attr;
}, 10, 3 );

// تقليل عدد الأحجام المولّدة عند الرفع (يوفّر مساحة وInodes)
add_filter( 'intermediate_image_sizes_advanced', function ( $sizes ) {
    unset( $sizes['medium_large'], $sizes['1536x1536'], $sizes['2048x2048'] );
    return $sizes;
} );

الصور المتجاوبة (srcset) تعمل لصالحك

ووردبريس يولّد عدة أحجام لكل صورة ويترك المتصفح يختار الأنسب لعرض الشاشة. عشان يشتغل صح: ارفع الصورة بأكبر حجم ستحتاجه فقط (لا أكبر)، ولا تعطّل توليد الأحجام كلها، ولا تحدّد عرضًا ثابتًا بـ CSS يتجاهل الأبعاد.

قائمة تحسين الصور قبل رفع أي صورة

• اسم الملف وصفي بالإنجليزية: red-running-shoe-front.webp لا IMG_2041.jpg.
• الأبعاد مناسبة لمكان العرض (لا تتجاوز 2000px عرضًا في أي حال).
• الحجم أقل من 150KB لصور المنتجات و300KB للبانرات.
• نص بديل (alt) يصف الصورة بالعربية — للسيو ولقارئات الشاشة.
• الخلفية البيضاء للمنتجات موحّدة عبر المتجر.