أحجام صور Shopify ولماذا 500 KB هو الأهم

استخدم 2048 في 2048 بكسل كصورة أصلية لمتجر Shopify واحتفظ بكل ملف يُسلم بحجم أقل من 500 KB. تسمح Shopify بالصور حتى 20 MB و4472 بكسل مربع، لكن هذه الأرقام تصف ما تتحمله المنصة وليس ما يحتاجه المتجر السريع.

رقم 20 MB هو الرقم الذي تذكره معظم الدلائل، وهو الرقم الخاطئ لبناء التصميم عليه. ما تسمح به Shopify وما تكافئ عليه هما أمران مختلفان. صفحة المنتج التي تحتوي على 8 صور بحجم 3 MB لكل منها هي صفحة بحجم 24 MB، ويتخلى عنها متسوقو الهواتف المحمولة قبل أن ينتهي تحميلها.

أحجام صور Shopify حسب موضع العرض

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

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

لماذا يُعد 500 KB هو الرقم المهم

حجم الصفحة الإجمالي يحدد مدى سرعة تحميل الواجهة، وتشكل الصور معظم هذا الحجم في صفحة المنتج النموذجية. الصفحة التي يقل حجمها الإجمالي عن 2 MB تُحمل براحة على بيانات الهاتف المحمول، بينما الصفحة بحجم 24 MB لا تفعل ذلك.

يشكل المتسوقون عبر الهواتف غالبية الزيارات لمعظم المتاجر، وتتفاوت اتصالات الهاتف المحمول بشكل أكبر بكثير من شبكات النطاق العريض في المكاتب. كل ثانية من وقت التحميل تكلف مبيعات ضائعة، مما يجعل وزن الصور مسألة إيرادات وليست مسألة تقنية. تخفيض 8 صور للمنتج من 3 MB إلى 300 KB يزيل 21 MB من الصفحة ولا يغير أي شيء يمكن للمتسوق رؤيته.

هل تقوم Shopify بضغط الصور نيابة عنك

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

النقطة الأخيرة هي العائق. تنشئ Shopify نسخاً أصغر من ملفك الأصلي، لذا فإن رفع ملف بحجم 5 MB مضغوط بشكل سيئ ينتج نسخاً أكبر مما ينتجه رفع ملف معد بشكل جيد بحجم 400 KB. الضغط قبل الرفع يقلل أيضاً من استخدامك لمساحة التخزين ويجعل الاستيراد الجماعي أسرع بكثير، حيث إن استيراد 500 منتج ينقل 200 MB بدلاً من 2.5 GB.

كيفية إعداد الصور لـ Shopify

لإنشاء صفحة منتج سريعة، اتبع هذه الخطوات الـ 6.

1. صَدّر صورة أصلية مربعة بأبعاد 2048 في 2048 بكسل من محرر الصور الخاص بك.
2. غيّر حجم أي لافتة أو صورة نمط حياة إلى عرض العرض الفعلي، مضاعفاً للشاشات عالية الكثافة.
3. حول الصور الفوتوغرافية إلى WebP، أو احتفظ بـ JPG إذا كانت مسار عملك يعتمد عليه، حيث تقوم Shopify بالتحويل في كلا الحالتين.
4. اضغط إلى حجم مستهدف، باستخدام 300 KB للصور الفوتوغرافية للمنتجات و400 KB للافتات.
5. سمّ الملفات حسب رمز المنتج وزاوية العرض حتى يربط استيراد CSV الجماعي الصور بالمنتجات الصحيحة.
6. ارفع وافحص صفحة المنتج على هاتف بدلاً من الاعتماد فقط على معاينة سطح المكتب.

صيغة WebP على Shopify

تدعم Shopify صيغة WebP بشكل أصل منذ سنوات وتحول ملفات JPG وPNG المرفوعة تلقائياً للمتصفحات التي تدعمها. رفع WebP مباشرة أمر مقبول ويمنحك التحكم في الضغط بدلاً من تركه للمنصة.

تصل صيغة WebP إلى الجودة البصرية نفسها لـ JPG بحجم ملف أصغر بنسبة 25 إلى 35 بالمائة، وهو أمر يستحق الحصول عليه في صفحة تحتوي على 8 صور فوتوغرافية. الحالة الوحيدة التي يجب تجنبها هي رفع WebP عندما يتم تنزيل الملف لاحقاً بواسطة مورد أو إرساله إلى مطبعة، حيث لا تزال تلك الجهات تتوقع صيغة JPG.

إصلاح صفحة منتج بطيئة

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

• غيّر الحجم قبل الضغط. لافتة بأبعاد 4000 بكسل في مساحة 1920 بكسل تضيع 75 بالمائة من بياناتها.
• قلل عدد الصور الظاهرة في الجزء العلوي قبل التمرير. معرض يحتوي على 12 صورة يُحمل في وقت واحد يؤخر كل شيء آخر.
• تأكد من تشغيل التحميل الكسول (Lazy Loading) للصور الموجودة أسفل الجزء المباشر، وهو ما تتعامل معه معظم القوالب الحديثة افتراضياً.
• استبدل ملفات GIF المتحركة بالفيديو، حيث إن ملف GIF القصير غالباً ما يزن أكثر من بقية الصفحة بأكملها.
• راجع التطبيقات. أدوات المراجعة، والتقويمات المنبثقة، وشارات الثقة غالباً ما تُحمل صورها ورموزها البرمجية الخاصة.

النص البديل وأسماء ملفات الصور

اكتب نصاً بديلاً يصف المنتج للمتسوقين الذين يستخدمون قارئات الشاشة، وسمّ الملفات باسم المنتج بدلاً من اسم الكاميرا. ملف باسم IMG_4821.jpg لا يخبر محركات البحث والمتسوقين بأي شيء.

استخدم نمطاً مثل navy-linen-shirt-front.jpg، الذي يظل قابلاً للقراءة في الاستيراد الجماعي، ويُفرز بشكل متوقع في المجلد، ويصف الصورة في نتائج البحث. يجب أن يوضح النص البديل ما تظهره الصورة الفوتوغرافية، بما في ذلك اللون، والمادة، وزاوية العرض، دون تكرار عنوان المنتج كلمة بكلمة. كلا الحقلين يستغرقان ثوانٍ معدودة لكل منتج ويحسنون كيفية ظهور المتجر في بحث الصور.

اختبار التغييرات قبل تطبيقها بالكامل

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

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

تطبيقات الصور مقابل القيام بذلك قبل الرفع

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

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

أخطاء صور Shopify الشائعة

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

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

الحفاظ على كتالوج متناسق

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

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

معالجة الكتالوج في مرة واحدة

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

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