تحسين صور متجرك لتسريع التحميل وتحسين الظهور في محركات البحث

تشكّل الصور في المتوسط ما بين 60% و80% من حجم صفحة التجارة الإلكترونية. الصور غير المحسّنة تُبطئ متجرك، وتنفّر زوارك، وتضرّ بترتيبك في نتائج بحث Google. الصفحة التي يستغرق تحميلها أكثر من 3 ثوانٍ تفقد 53% من زوارها عبر الجوال.

بالإضافة إلى السرعة، تحسّن الصور المُحسَّنة تحسين محركات البحث بشكل مباشر: يأخذ Google في الاعتبار مؤشرات Core Web Vitals (LCP وCLS وINP) ضمن خوارزميته. صورة مضغوطة جيدًا وبالأبعاد الصحيحة يمكن أن تخفّض مؤشر LCP من 5 ثوانٍ إلى 1.5 ثانية — وهو مكسب هائل في ترتيب نتائج البحث.

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

بالنسبة للصور التي تتطلب شفافية أو تفاصيل دقيقة (الشعارات، الأيقونات، المنتجات ذات الخلفية الشفافة)، فضّل صيغة PNG-24 المضغوطة أو WebP بدون فقدان جودة. تجنّب صيغة GIF للرسوم المتحركة — استخدم بدلًا منها فيديوهات MP4 أو WebM، الأخف وزنًا بـ10 إلى 100 مرة.

• WebP: الصيغة الافتراضية، ضغط أفضل بنسبة 30% من JPEG
• JPEG: للصور المعقّدة بدون شفافية (توافق أقصى)
• PNG-24: للشعارات والصور ذات الشفافية
• MP4/WebM: للرسوم المتحركة (أفضل من GIF)

صورة منتج تُعرض بحجم 600×600 بكسل في الصفحة لا تحتاج أن تُرفع بحجم 4000×4000 بكسل. يجب أن تتطابق الأبعاد الفعلية مع ما يُعرض، مع مراعاة شاشات الريتينا (بمضاعفة القيمة مرتين). بالنسبة لصفحة منتج، يُعد حجم 1200×1200 بكسل توافقًا ممتازًا: واضح على شاشات الريتينا، وخفيف بما يكفي لتحميل سريع.

بالنسبة لصور البانر أو القسم الرئيسي، يكفي عرض يتراوح بين 1600 و2000 بكسل. تجنّب الصور الأعرض من اللازم: فكل بكسل إضافي يكلّف وقت تحميل. في shopsdz، يُنشئ النظام تلقائيًا عدة أحجام (مصغّرة، متوسطة، كبيرة) ويعرض الحجم المناسب حسب سياق العرض.

يجب أن يكون الضغط غير ملحوظ للعين المجردة. بالنسبة لصيغة WebP، استهدف جودة تتراوح بين 75 و80: أفضل توازن بين الحجم والعرض البصري. تحت مستوى 70، تبدأ آثار الضغط بالظهور في المناطق ذات الملمس (الأقمشة، البشرة، الأطعمة).

تتوفّر عدة أدوات مجانية لضغط صورك قبل رفعها: Squoosh.app (من Google، عبر الإنترنت)، ImageOptim (لنظام macOS)، FileOptimizer (لنظام Windows). ولتحقيق أقصى استفادة، استخدم أيضًا خاصيتي `loading="lazy"` (تحميل مؤجل خارج نطاق الرؤية) و`decoding="async"` — تضيفهما shopsdz تلقائيًا إلى كل صورة منتج.

الصورة المُحسَّنة تقنيًا لا فائدة منها إن لم يفهمها Google. املأ دائمًا خاصية `alt` بوصف واضح ومختصر للمنتج (مثال: "حذاء رياضي نايكي إير ماكس أبيض، منظر جانبي"). تجنّب النصوص البديلة العامة مثل "image1.jpg" أو "منتج".

امنح أيضًا اسم ملف واضحًا (`chaussure-nike-air-max-blanche.webp` بدلًا من `IMG_4521.webp`). يقرأ Google اسم الملف لفهم السياق. أخيرًا، أضف تعليقًا ووصفًا مطوّلًا في صفحة المنتج: فهذا يعزّز الأهمية في تحسين محركات البحث ويساعد قارئات الشاشة لدى المستخدمين ضعاف البصر.