Sat Jun 27 2026 20:00:00 GMT-0400 (Eastern Daylight Time)

تحسين صور التجارة الإلكترونية لعام 2026: السرعة وWebP والمبيعات

قمت بتحسين الصور في متاجر إلكترونية حقيقية لعام 2026. إليك كيفية ضغطها إلى WebP، وإرسال responsive images، وكتابة product alt text، واجتياز Core Web Vitals.

تحسين صور التجارة الإلكترونية لعام 2026: السرعة وWebP والمبيعات

آخر تحديث: June 28, 2026

في عام 2026، المعيار المطلوب لصور التجارة الإلكترونية لا يرحم: يجب أن تبيع المنتج وت تُحمّل على الهاتف في أقل من ثانية. لقد قمت بتحسين مسار الصور للعديد من المتاجر هذا العام، والنمط دائمًا هو نفسه — صورة البطل (hero photo) هي أكبر عنصر في الصفحة، وهي عادةً ما تكون السبب وراء بطء تحميل الصفحة.

صور منتجات التجارة الإلكترونية المعروضة على متجر عبر الإنترنت، مُحسّنة للتحميل السريع ومعدلات التحويل

إجابة سريعة: ما الذي تحتاجه صور التجارة الإلكترونية في عام 2026؟

قم بإرسال صورة رئيسية واحدة عالية الدقة لكل منتج، ثم قم بتصدير نسخة WebP بالحجم الذي تعرضه الصفحة فعليًا. أعد تغيير الحجم قبل الضغط، واكتب نص بديل (alt text) يذكر اسم المنتج، ودع كل شيء أسفل الطي (below the fold) يتم تحميله بشكل كسول (lazy-load). بعد ذلك، قم بقياس النتيجة على هاتف حقيقي باستخدام PageSpeed Insights، وليس على جهاز الكمبيوتر المحمول الخاص بك.

تتم العملية برمتها في خمس خطوات قابلة للتكرار:

  1. التقاط صورة رئيسية واحدة واضحة ومضاءة بالتساوي لكل منتج.
  2. تغيير حجمها لتناسب أوسع عرض تعرضه الصفحة.
  3. الضغط إلى WebP بجودة 80 إلى 82؛ واحتفظ بـ JPEG فقط للقنوات التي تحتاج إليه.
  4. إضافة نص بديل يذكر اسم المنتج وتفصيلاً مرئيًا واحدًا.
  5. النشر، وفتح الصفحة المباشرة على هاتف، والتأكد من أنها تُحمّل بسرعة.

جزء الالتقاط — الإضاءة، الزوايا، الخلفية، الاتساق — مغطى في تصوير منتجات التجارة الإلكترونية. أما هذه الصفحة فهي جزء التسليم لعام 2026: التنسيقات، الترميز المتجاوب (responsive markup)، التحميل الكسول، النص البديل، Core Web Vitals، وCDN.

لماذا يحدد وزن الصورة ما إذا كان متجرك سيُحمّل على الإطلاق؟

في صفحة المنتج النموذجية، تشكل الصور ما بين 60 إلى 80 بالمائة من البايتات التي يقوم المتصفح بتنزيلها. قمت بقياس عميل لـ Shopify كانت صور البطل لديه عبارة عن JPEG بحجم 2.4 MB مباشرة من الكاميرا؛ وقد أرسلت الصفحة 6.1 MB قبل تشغيل أي JavaScript.

أسرع حل ممكن هو التوقف عن إرسال بكسلات لا يمكن للشاشة عرضها. الهاتف الذي يعرض صورة مصغرة بعرض 375 px لا يحتاج إلى الصورة الأصلية بحجم 6000 px. قم بتغيير الحجم ليناسب أوسع عرض تعرضه الصفحة، ثم اضغط — بهذا الترتيب. الضغط أولاً يحتفظ بالـ megapixels التي أنت على وشك التخلص منها.

بعض العادات التي تزيل معظم الوزن:

  • الاحتفاظ بصورة رئيسية واحدة لكل منتج، وليس الصورة الأصلية للكاميرا في الصفحة أبدًا.
  • تغيير الحجم ليناسب عرض العرض، ثم الضغط.
  • التحويل إلى WebP، والاحتفاظ بـ JPEG فقط للقنوات التي تتطلب ذلك.
  • تحميل كل شيء أسفل الطي بشكل كسول حتى يتم تحميل صورة البطل أولاً.

ما هو تنسيق الصورة الذي يجب أن ترسله في عام 2026؟

WebP هو الافتراضي لمتجرك الخاص في عام 2026. يتفوق على JPEG من حيث الحجم عند نفس الجودة المرئية ويتم الآن دعمه بواسطة كل متصفح يهم المتجر. أما AVIF فهو أصغر حجماً، ولكنه أبطأ في الترميز ومتقطع في سمات CMS القديمة، لذلك أعامله كتحسين تدريجي (progressive enhancement)، وليس الأساس.

Format When to ship Typical size vs JPEG Caveat
WebP Default for your own storefront 25 to 35% smaller Some marketplace feeds still demand JPEG
AVIF Progressive layer on top of WebP 10 to 20% smaller than WebP Slow to encode, patchy on older themes
JPEG Marketplace exports (Amazon, Google) Baseline Lossy; do not re-save repeatedly
PNG Logos, graphics needing transparency Larger than JPEG Avoid for photographic product shots

لا تزال الأسواق التجارية تلقي بالصعاب. تتوقع خلاصات Amazon وGoogle Shopping ملفات JPEG أو PNG بأحجام محددة، ويرفض البعض WebP تمامًا. احتفظ بتصدير JPEG لكل قناة إلى جانب WebP الخاص بك. تسرد مواصفات صور منتجات مركز البائع في Google الحجم الدقيق والنسبة والقواعد الخاصة بالخلفية، وعادة ما يعود رفض الخلاصات إلى علامة مائية مضمنة أو حجم خاطئ.

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

كيف تحمي الصور المتجاوبة والتحميل الكسول Core Web Vitals؟

صورة المنتج الرئيسية هي دائمًا عنصر Largest Contentful Paint (LCP)، مما يجعلها أكبر رافعة واحدة لدرجة سرعة متجرك. نقلت صورة بطل عميل من JPEG بحجم 2.4 MB إلى WebP بحجم 140 KB عند عرض العرض، وشاهدت انخفاض LCP على الهاتف من 3.8 s إلى 1.5 s.

ثلاث عادات تحرك LCP و Cumulative Layout Shift (CLS) أكثر:

  • تقديم الحجم الذي يتم عرضه فعليًا، عبر srcset.
  • تعيين width و height صريحة حتى لا تقفز التخطيطات أثناء التحميل.
  • تحميل ما هو أسفل الطي بشكل كسول، ولكن تحميل صورة البطل على الفور بأولوية جلب عالية (eager-load).
<img
  src="backpack-1200.webp"
  srcset="backpack-600.webp 600w, backpack-1200.webp 1200w, backpack-2000.webp 2000w"
  sizes="(max-width: 600px) 600px, (max-width: 1200px) 1200px, 2000px"
  width="1200"
  height="1200"
  loading="eager"
  fetchpriority="high"
  alt="Olive canvas backpack with brown leather straps, front view">

توثق web.dev الصورة الكاملة في دليلها أوقات التحميل السريعة، ويمكنك تأكيد النتيجة الميدانية على جهاز حقيقي باستخدام PageSpeed Insights. اختبر صفحة المنتج الحية بعد النشر، وليس معاينة محلية — فذاكرة التخزين المؤقت لـ CDN والسكريبتات الخارجية تغير الرقم.

صور كتالوج المنتجات الملتقطة على خلفيات بيضاء نظيفة، وهو المعيار لقوائم التجارة الإلكترونية

ماذا يجب أن يقول النص البديل للمنتج فعليًا؟

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

  • جيد: "Olive green canvas backpack with brown leather straps, front view." (حقيبة ظهر قماش باللون الأخضر الزيتوني بأحزمة جلد بنية، عرض أمامي.)
  • ضعيف: "backpack, bag, rucksack, travel bag, best backpack."
  • فارغ: "product photo," أو "image," أو اسم ملف خام مثل "IMG_4471."

قم بتسمية الملف بنفس الطريقة: olive-canvas-backpack-front.webp يتفوق على IMG_4471.webp في بحث الصور. إذا كنت تدير مئات وحدات حفظ المخزون (SKUs)، فقم ببناء النص البديل من عنوان المنتج بالإضافة إلى الزاوية للحفاظ على الاتساق عبر الكتالوج.

كيف أقوم بتحسين كتالوج كامل دفعة واحدة دون فقدان التفاصيل؟

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

Use Width Format Target size
Catalog thumbnail 400 to 600 px WebP 15 to 40 KB
Product card / grid 600 to 800 px WebP 40 to 90 KB
Main product image 1200 to 1600 px WebP 80 to 200 KB
Zoom / detail view 2000 to 2600 px WebP 150 to 350 KB
Marketplace export Per channel JPEG Channel limit

بالنسبة لنسب الأبعاد الغريبة والقص الخاص بالقناة، قم بتجميع التحويلات عبر أداة تغيير الحجم والمحول بحيث تأتي صورة بطل Shopify بنسبة 4:5 وصورة Amazon بنسبة 1:1 من نفس الصورة الرئيسية بدلاً من إعادة تصويرها.

ماذا قمت بقياسه على متجر حقيقي؟

أرقام ملموسة من متجر Shopify يضم 320 منتجًا عملت عليه هذا العام. نفس الصور، ونفس الكتالوج — فقط مسار الصور الذي تغير.

Metric Before After
Hero image 2.4 MB JPEG 140 KB WebP
Catalog page weight (40 thumbnails) 6.1 MB 740 KB
Mobile LCP 3.8 s 1.5 s
Mobile bounce on product pages 61% 39%

تطبيق تجارة إلكترونية على الهاتف المحمول يقوم بتحميل صور المنتجات، حيث يؤثر تسليم الصور البطيء على تحويلات الهاتف

أنا لا أزعم أن انخفاض معدل الارتداد كان بسبب الصور فقط. قمت بتغيير متغير واحد في كل مرة وظل الإرسال كما هو، لذا فإن مكسب السرعة هو التفسير الأنظف. يميل LCP الأسرع إلى تحريك التحويلات، ولكن لا تثبت الرقم إلا لمتجرك الخاص بعد قياسه.

قائمة مراجعة أسبوعية لفرق المتاجر

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

  • إعادة فحص صور البطل للتأكد من عدم استخدام أحجام ملفات الكاميرا الأصلية.
  • التأكد من أن كل صورة هي WebP وأقل من وزنها المستهدف.
  • التحقق من تعيين width و height حتى لا يتغير التخطيط.
  • فحص النص البديل (alt text) لأحدث عشرة منتجات.
  • فتح صفحة منتج على هاتف وتشغيل اختبار PageSpeed.
  • رفض أي صورة بطل تحتوي على علامة مائية أو شارة ترويجية مضمنة.

بالنسبة لجزء CDN — حيث يتم تخزين الصور مؤقتًا، وتغيير حجمها في الوقت المناسب، وتقديمها من حافة قريبة من المتسوق — يوضح دليل CDN للصور الإعداد. وبالنسبة للمشهد الأوسع الذي يربط المواصفات والسرعة والمبيعات معًا، فإن دليل تحسين صور التجارة الإلكترونية هو الرفيق لهذه النسخة لعام 2026.

تنبيه صادق: يدعم web.dev وكل متصفح حديث WebP في عام 2026، ولكن لا يزال عدد قليل من نوافذ عرض الدفع المضمنة القديمة والأجهزة الأقدم يعودون إلى JPEG. اختبر مقابل مزيج أجهزة عملائك الفعلي قبل حذف احتياطات Fallbacks الخاصة بـ JPEG، وإلا سيرى جزء من المتسوقين صورة رئيسية معطلة في اللحظة التي كانوا على وشك الشراء فيها.

حقوق صور (Image credits)

استخدم الأدوات المجانية أثناء متابعة الدليل.

ضغط صورةإزالة خلفية

تابع القراءة

صورة غلاف PNG to WebP: دليل تحويل وضغط صور PNG

Tue Mar 17 2026 20:00:00 GMT-0400 (Eastern Daylight Time)

PNG to WebP: دليل تحويل وضغط صور PNG

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