تحميل الصور

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

لعرض الصور في متجرك الإلكتروني تمامًا كما تريد، يجب عليك استخدام نسبة العرض إلى الارتفاع الصحيحة للصورة. يتم تحسين الصور تلقائيًا لواجهة متجرك باستخدام شبكة توصيل المحتوى (CDN) من Shopify.

تحميل صورة في محرر السمات

يمكنك إضافة صور إلى سمتك في محرر السمات. يمكنك أيضًا تحميل الصور في قسم المحتوى > الملفات في مسؤول Shopify. لمعرفة المزيد، راجع تحميل الملفات وإدارتها.

الخطوات:

إضافة صور باستخدام الحقول الوصفية

إذا أعددت حقولاً وصفية لصورك، فيمكنك استخدام أداة تحديد المصدر الديناميكي لإضافة صورة إلى متجرك الإلكتروني. لمزيد من المعلومات حول الحقول الوصفية وتنسيقات الصور المدعومة، راجع إضافة قيم إلى الحقول الوصفية.

تعيين نقطة تركيز على صورة

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

لا يمكنك تعيين سوى نقطة تركيز واحدة لكل صورة، ولكن يمكنك تغيير نقطة التركيز أو إزالتها في أي وقت.

توافق نقاط التركيز مع قوالب Shopify المجانية

يمكنك تعيين نقطة تركيز في الإصدارات التالية من قوالب Shopify المجانية:

• جميع القوالب في عائلة Horizon
• Colorblock الإصدار 3.0.0 والإصدارات الأحدث
• Craft الإصدار 5.0.0 والإصدارات الأحدث
• Crave الإصدار 5.0.0 والإصدارات الأحدث
• Dawn الإصدار 7.0.0 والإصدارات الأحدث
• Origin الإصدار 1.0.0 والإصدارات الأحدث
• Publisher الإصدار 1.0.0 والإصدارات الأحدث
• Refresh الإصدار 2.0.0 والإصدارات الأحدث
• Ride الإصدار 3.0.0 والإصدارات الأحدث
• Rise الإصدار 1.0.0 والإصدارات الأحدث
• Sense الإصدار 5.0.0 والإصدارات الأحدث
• Spotlight الإصدار 0.0.1 والإصدارات الأحدث
• Studio الإصدار 4.0.0 والإصدارات الأحدث
• Taste الإصدار 4.0.0 والإصدارات الأحدث
• Trade الإصدار 1.0.0 والإصدارات الأحدث

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

إضافة نقطة تركيز إلى صورة

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

بناءً على طريقة قالبك في قص الصور وتغيير حجمها، قد لا تتمركز نقطة التركيز دائمًا في المنتصف بصريًا.

الخطوات:

1. انقر فوق صورة من أي من المواقع التالية في مسؤول Shopify:
   • في قسم المحتوى > الملفات.
   • في محرّر القوالب.
   • في قسم الوسائط بقوائم منتجاتك ضمن قسم المنتجات.
   • في محرّر البريد الإلكتروني الخاص بـ Shopify Messaging.
   • في قسم الحقول الوصفية لأي مورد يحتوي على حقل وصفي من نوع مرجع ملف لإضافة صورة.
2. لتحديد جزء الصورة الذي تريد تعيين نقطة تركيز فيه، انقر فوق الصورة أو اسحب النقطة الزرقاء.
3. انقر على حفظ.

إزالة نقطة تركيز من صورة

الخطوات:

1. انقر فوق صورة من أي من المواقع التالية في مسؤول Shopify:
   • في قسم المحتوى > الملفات.
   • في محرّر القوالب.
   • في قسم الوسائط بقوائم منتجاتك ضمن قسم المنتجات.
   • في محرّر البريد الإلكتروني الخاص بـ Shopify Messaging.
   • في قسم الحقول الوصفية لأي مورد يحتوي على حقل وصفي من نوع مرجع ملف لإضافة صورة.
2. انقر فوق إزالة.
3. انقر فوق حفظ كجديد.

تنسيقات الصور

تنسيقات الصور التالية مدعومة:

• JPEG
• Progressive JPEG
• PNG
• GIF
• HEIC
• WebP

استخدام صور JPEG

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

• المنتجات
• اللافتات أو عروض الشرائح
• الصفحات ومنشورات المدونة

استخدام صور PNG

تُعد صور PNG مثالية للرسومات والأيقونات ذات الألوان المسطحة وبدون تدرجات. يدعم تنسيق PNG أيضًا الشفافية في الصور. استخدم تنسيق PNG للأنواع التالية من الصور:

• الشعارات
• الأيقونات
• الحدود والزخارف

الضغط التلقائي للصور واختيار التنسيق

لا تُضغط الصور عند رفعها إلى مسؤول Shopify، مما يساعد في الحفاظ على جودتها الأصلية. ومع ذلك، قد يحدث ما يلي للحفاظ على سرعة أوقات تحميل الصفحة لعملائك:

• عندما تُعرض الصور من خلال قالب متجرك، فقد تخضع الصور عالية الجودة للضغط
• يحدد Shopify تلقائيًا أفضل تنسيق ملف ممكن لاستخدامه عند عرض صورك
• عندما يدعم متصفح الويب الخاص بالعميل تنسيقات الصور الحديثة مثل WebP وAVIF (تنسيق ملف صورة AV1)، تُعرض صورك بهذه التنسيقات
• تُحول ملفات GIF تلقائيًا إلى تنسيق WebP المتحرك لتحسين الأداء عن طريق تقليل حجم الملف

ضع في اعتبارك الإجراءات التالية للحصول على أفضل جودة للصورة:

• ارفع صورًا ذات دقة أعلى تصل إلى 5000 × 5000 بكسل أو 25 ميجابكسل
• اختر أنواع صور أقل فقدانًا للبيانات مثل PNG للرسومات الخطية والنصوص والرسومات الأيقونية ذات الشفافية
• استخدم تنسيق JPEG لصور المنتجات أو عروض الشرائح
• ملفات SVG مدعومة ولكن لها قيود، حيث لا يمكن تحويلها (تغيير حجمها واقتصاصها وما إلى ذلك) دون طلب تنسيق نقطي (JPEG أو WebP أو PNG).

أنواع الملفات الأخرى مثل PSD (Photoshop Document) وTIFF (Tagged Image File Format) وBMP (Bitmap) مقبولة ولكن سيتم تحويلها إلى JPEG/PNG عند رفعها.

حدود رفع الصور

تخضع عمليات رفع الصور إلى Shopify لقيود من حيث الميجابكسل (MP) وحجم الملف الذي يُقاس بالميجابايت (MB). يُستخدم الميجابكسل للإشارة إلى عدد ملايين البكسلات التي تتكون منها الصورة. بينما يُستخدم الميجابايت للإشارة إلى عدد ملايين البايتات من الذاكرة أو مساحة القرص التي تشغلها الصورة.

لا يمكن أن تتجاوز الصور المرفوعة إلى Shopify أيًا من الحدود التالية:

• 20 ميجابكسل
• 20 ميجابايت

لمعرفة قيمة الميجابكسل لصورتك، يمكنك استخدام المعادلة التالية:

(عرض البكسل × ارتفاع البكسل)/1,000,000

على سبيل المثال، الصورة بدقة 4900 بكسل × 6930 بكسل تبلغ 33.9 ميجابكسل بناءً على المعادلة: (4900x6930)/1,000,000 = 33.9 MP.

ملفات تعريف ألوان الصورة

عند عرض صورة في متجرك الإلكتروني، قد تُعرض الألوان في الصورة بشكل مختلف عن تلك الموجودة في الصورة الأصلية التي ترفعها إلى Shopify. يمكن أن يحدث هذا عندما تحتوي الصورة على ملف تعريف ألوان، وهو عبارة عن مجموعة من البيانات المخزنة في ملف بامتداد .ICC أو .ICM.

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

تُزال ملفات تعريف الألوان للأسباب التالية:

• لا تستطيع جميع الأجهزة قراءة ملفات تعريف الألوان .ICC أو .ICM، لذا فإن الاحتفاظ بها كما هي قد يؤدي إلى عدم تناسق ألوان الصور عبر الأجهزة المختلفة.
• عندما لا تتضمن الصورة المرفوعة ملف تعريف ألوان، يفترض متصفح الويب ملف sRGB، وهو ملف تعريف الألوان الأكثر شيوعًا المستخدم لعرض الصور على الويب. يضمن ذلك عرض صورك بنفس الشكل عبر جميع متصفحات الويب والأجهزة الرئيسية.
• يمكن أن تشغل ملفات تعريف الألوان مساحات كبيرة من مساحة القرص، مما قد يؤدي إلى زيادة أوقات تحميل الصفحة.

إزالة ملف تعريف الألوان من صورة

يمكنك إزالة ملف تعريف الألوان من صورتك عن طريق حفظها بدونه قبل رفعها إلى Shopify. تختلف هذه العملية وفقًا لبرنامج تحرير الصور الخاص بك.

اطلع على وثائق Adobe حول كيفية تعيين أو إزالة ملف تعريف ألوان (Illustrator، وPhotoshop) وتعيين أو إزالة ملف تعريف ألوان (InDesign).

أفضل الممارسات لعروض الشرائح، ولافتات الصور، والصور بالعرض الكامل

تتميز العديد من قوالب Shopify بصور كبيرة أو عروض شرائح تتسع لتناسب ارتفاع متصفحك أو تتكيف مع حجم شاشتك.

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

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

اعتبارات استخدام الصور لعروض الشرائح أو لافتات الصور

للتأكد من أن صورك تعمل جيدًا مع قالبك، ضع النقاط التالية في اعتبارك:

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

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

الصور العريضة على الشاشات الطويلة

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

الصور الطويلة على الشاشات العريضة

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

سلوك تحميل الصور

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

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

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

استكشاف مشكلات الصور وإصلاحها