تحسين صور Shopify لمتاجر أكثر سرعة

Last updated: June 28, 2026

يُعد تحسين صور Shopify في الغالب مشكلة تتعلق بسير العمل (workflow). يقوم مالكو المتاجر بتحميل صور منتجات كبيرة، وتطلب القوالب عدد بكسلات أكثر مما يحتاجه التخطيط، ويدفع واجهة المتجر ثمن ذلك على الأجهزة المحمولة. قم بإصلاح ملف المصدر، ثم طلب القالب، وأخيراً رابط CDN المنشور بهذا الترتيب.

يركز هذا الدليل على صفحات المنتجات، وشبكات المجموعات (collection grids)، وصور البطل (hero images)، والصور التحريرية داخل متجر Shopify. ويتجنب ادعاءات التحويل المُختلقة ويقدم لك فحوصات يمكنك تشغيلها قبل استبدال الوسائط الحية.

إجابة سريعة: كيف يجب عليك تحسين صور Shopify؟

استخدم أصغر صورة لا تزال تبدو واضحة عند أكبر حجم سيقوم Shopify بعرضه. بالنسبة لمعظم صور المنتجات، ابدأ بملف رئيسي نظيف (clean master)، وقم بقصها لتناسب تخطيط المتجر، ثم قم بتغيير حجمها إلى أوسع عرض للعرض الفعلي، بعد ذلك قم بتصدير مرشح WebP بجودة تتراوح بين 80 و 85. افحص النتيجة على هاتف قبل استبدال الصورة.

يمكن لـ Shopify تقديم عناوين URL للصور عبر شبكة CDN الخاصة به وفلاتر الصور في Liquid. الجزء المهم هو طلب العرض الصحيح في القالب، وليس تحميل ملف ضخم والأمل في أن يقوم المتصفح بتصغيره بأقل تكلفة. يدعم مرشح image_url الخاص بـ Shopify معلمات العرض والارتفاع في Liquid، وهو الخطاف الذي يجب على المطورين استخدامه للوسم (markup) الصوري المتجاوب في القوالب.

لإجراء تدقيق سريع للمتجر، تحقق من هذه الأماكن الأربعة أولاً:

1. الصورة الرئيسية لصفحة المنتج.
2. صور مصغرة لشبكة المجموعة.
3. صورة البطل أو اللافتة على الصفحة الرئيسية.
4. الصور المدونة والإرشادية داخل واجهة متجر Shopify.
5. أي معرض صور، أو مراجعة، أو صورة بيع إضافي يتم حقنها بواسطة تطبيق (app-injected).

إذا كانت إحدى هذه الصور هي عنصر Largest Contentful Paint، فتعامل معها بشكل منفصل. لا تقم بتحميل الكسل (lazy-load) لصورة البطل أو المنتج الأولى المرئية؛ اجعلها قابلة للاكتشاف مبكراً وقدم الأبعاد الصحيحة لها.

ما أحجام الصور التي يجب أن تستخدمها متاجر Shopify؟

لا يوجد حجم صورة واحد لـ Shopify يناسب كل القوالب. تحتاج صورة منتج معروضة بعرض 720 CSS pixels على تخطيط سطح مكتب من عمودين إلى ملف مختلف عن صورة البطل ذات العرض الكامل على هاتف Retina. ابدأ من الفتحة المعروضة، ثم قم بتوفير ما يكفي من البيكسلات للشاشات عالية الكثافة.

لقد قمت بقياس التصديرات المحلية لملفات WebP من مصدر بحجم 2400 px بأسلوب المنتج لتحديد أهداف عملية لهذا المقال. ستتغير البايتات الدقيقة مع تصوير المجوهرات، أو الملابس، أو مستحضرات التجميل، أو الإلكترونيات، أو الطعام، ولكن النمط يظل قائماً: تغيير الحجم يوفر أكثر من مجرد تغييرات صغيرة في شريط الجودة.

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

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

كيف يغير CDN الخاص بـ Shopify تحسين الصور؟

يساعد CDN الخاص بـ Shopify في التوصيل، ولكنه لا يلغي الحاجة إلى ملفات مصدر سليمة وتنسيق القالب (theme markup). يمكن أن يؤدي تحميل بحجم 5000 px إلى إنشاء صفحات بطيئة إذا طلب القالب متغيرات كبيرة الحجم أو أغفل خيارات srcset المتجاوبة.

يُظهر التوثيق الرسمي لـ Liquid الخاص بـ Shopify لمرشح image_url أن القوالب يمكنها طلب عرض وارتفاع صور مُحوَّلين. هذا هو الرافعة التي يجب استخدامها عندما تحتاج بطاقة المجموعة إلى صورة بحجم 600 px فقط، ولكنها تتلقى أصلًا أكبر بكثير.

توثق أيضًا وثائق مساعدة Shopify أنواع الوسائط المدعومة للمنتجات، بما في ذلك الصور والفيديو والنماذج ثلاثية الأبعاد ومقاطع الفيديو المستضافة في أنواع وسائط المنتج. تحقق من وثائق Shopify الحالية قبل بناء عملية استيراد مجمعة (bulk import)، لأن حدود الوسائط والتنسيقات المقبولة يمكن أن تتغير.

استخدم هذا الترتيب من جانب القالب:

1. احتفظ بصورة المنتج الأصلية نظيفة وغير مضغوطة في مجلد العمل الخاص بك.
2. قم بتحميل ملف رئيسي معقول إلى Shopify، وليس تصديراً مكرراً من أداة أخرى.
3. في القالب، اطلب العرض الذي يحتاجه كل تخطيط فعلياً.
4. أضف سمات العرض والارتفاع حتى لا يتحول التخطيط (layout).
5. قم ببناء srcset بخطوات عرض مفيدة للهاتف وسطح المكتب.
6. اسمح لصور شبكة المنتج تحت الطي (below-fold) بالتحميل الكسول (lazy-load).
7. اجعل صورة المنتج أو البطل الأولى المرئية متحمسة (eager) إذا كان من المحتمل أن تقود LCP.
8. تحقق من أن عنوان URL النهائي لـ CDN يعيد HTTP 200.

يُعد الـ CDN جزءاً من الإجابة، وليس الإجابة بأكملها. إذا فتح المشتري صفحة المنتج ووصلت الصورة الأولى متأخرة، فسيظل المتجر يبدو بطيئًا حتى عندما يأتي الملف من موقع طرفي سريع.

هل يجب عليك تحميل WebP إلى Shopify أم ترك القالب يتعامل مع ذلك؟

إذا كان سير عملك ينشئ بالفعل ملفات WebP نظيفة، قم بتحميل WebP عندما يقبله Shopify لحالة الاستخدام الخاصة بك ويتعامل معه القالب بشكل صحيح. إذا اعتمد فريقك على تحويلات صور Shopify، فإن الوظيفة الأكثر أهمية هي طلب العرض المُولَّد الصحيح والحفاظ على وسم القالب قابلاً للزحف (crawlable).

بالنسبة لمعظم المتاجر، القرار العملي يعتمد على دور الصورة:

توصي وثائق صور Google لتحسين محركات البحث باستخدام تنسيقات الصور المدعومة، ونص بديل وصفي (descriptive alt text)، وعناصر صور قابلة للزحف في أفضل ممارسات صور Google. وهذا مهم لمتاجر Shopify لأن صور المنتجات هي أصول سرعة وأصول بحث في آن واحد.

إذا كنت تقرر بين التنسيقات الحديثة، قارن الجودة البصرية بدلاً من أرقام المؤشرات المنزلقة. جودة WebP تبلغ 82 وجودة AVIF تبلغ 55 ليسا متحكمين مكافئين. يشرح مقارنة AVIF مقابل WebP أين يتفوق كل تنسيق وأين يغير التوافق أو وقت الترميز القرار.

ما الذي يجب عليك التحقق منه قبل استبدال صور المنتجات الحية؟

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

قم بتشغيل هذا الفحص البصري قبل أن تقوم بالكتابة فوق أي شيء:

1. افتح الصورة الأصلية والمُحسّنة بالحجم الذي يراه المتسوقون.
2. تحقق من حواف المنتج، وملمس القماش، وألوان البشرة، والظلال، والملصقات.
3. قم بتكبير صورة المنتج إذا كان القالب يدعم التكبير (zoom).
4. تأكد من أن الحواف الشفافة لا تلتقط أي وبر أو خصلات.
5. تحقق أولاً على الهاتف المحمول، خاصة في صفحة تفاصيل المنتج.
6. اقرأ النص البديل كما لو فشلت الصورة في التحميل.
7. تأكد من أن عنوان URL للصورة مستقر ويعيد HTTP 200.
8. احتفظ بالملف الرئيسي الأصلي خارج Shopify تحسباً لحاجتك لإعادة التصدير.

بالنسبة للمعالجة الدفعية (batch processing)، قم بتغيير الحجم قبل الضغط. يمنح دليل تغيير الحجم المجمع ترتيباً أكثر أماناً لمجلدات صور المنتجات، وقائمة التحقق الكاملة لتحسين الصور مفيدة كجولة نهائية قبل النشر.

كيف تؤثر صور Shopify على Core Web Vitals؟

غالباً ما تؤثر الصور على Largest Contentful Paint لأن صورة المنتج الأولى المرئية أو البطل في الصفحة الرئيسية هي عادة أكبر عنصر بصري فوق الطي (above the fold). يساعد ضغط هذه الصورة، ولكن الاكتشاف والأولوية يهمان أيضاً.

يوصي دليل web.dev حول تحسين Largest Contentful Paint بجعل مورد LCP المحتمل قابلاً للاكتشاف مبكراً واستخدام تلميحات الأولوية (priority hints) عند الاقتضاء. بمصطلحات Shopify، هذا يعني أن صورة المنتج الأولى يجب ألا تكون مخبأة خلف JavaScript من جانب العميل، أو يتم تحميلها فقط بعد تهيئة تطبيق ما، أو معاملتها كصورة مصغرة تحت الطي.

استخدم جدول Core Web Vitals هذا عند مراجعة القالب:

يمكن للتطبيقات (Apps) تعقيد هذا الأمر. تقوم أدوات المراجعة، وأشرطة التوصيات، وبناة الصفحات أحياناً بحقن صور خارج مكون الصورة العادي للقالب. افحص لوحة الشبكة (network panel) بعد تحميل الصفحة، وليس فقط قالب Liquid.

سير عمل عملي لصور Shopify

استخدم نفس التسلسل في كل مرة تضيف فيها منتجات أو تقوم بتحديث مجموعة. الاتساق أهم من مطاردة رقم جودة مثالي واحد.

1. احفظ الملفات الرئيسية دون لمسها في مجلد خارج Shopify.
2. قم بقص كل منتج ليناسب التأطير المتفق عليه للمتجر.
3. قم بتصدير مجموعة اختبار بأوسع عرض فعلي للمتجر.
4. جرب WebP q85، وq82، وq78 لصور المنتجات.
5. قارن في أحجام صفحة المنتج الفعلية وشبكة المجموعة.
6. اختر أصغر نسخة لا تزال تحمي تفاصيل المنتج.
7. قم بتحميل أو ربط سير عمل الصورة المُحسَّنة.
8. حدّث أعرض image_url للقالب إذا كانت الصفحة لا تزال تطلب ملفات كبيرة الحجم.
9. تحقق من LCP، وتحول التخطيط، وتحميل صفحة المجموعة.
10. سجل الإعدادات لدُفعة المنتجات التالية.

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

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