أبعاد صور المنتجات والمواقع · 6 دقائق
أبعاد صور المنتجات والمواقع: كيف تختار المقاس بدون تشويه أو بطء؟
دليل عملي لاختيار أبعاد صور المنتجات والبطاقات والبنرات في المواقع والمتاجر، مع الحفاظ على النسبة وتقليل الملفات الزائدة واختبار العرض على الجوال.
تؤثر الصورة في انطباع الزائر وسهولة التصفح. فقد تظهر صورة منتج واضحة مقصوصة في البطاقة، أو تتأخر الصفحة لأن الملف أكبر كثيرًا من مساحة عرضه. لا يعني اختيار الأبعاد البحث عن رقم موحّد؛ بل مواءمة مقاس الصورة بالبكسل مع موضعها والحفاظ على نسبتها وتجهيز نسخ للشاشات المختلفة.
يساعد هذا الدليل أصحاب المواقع والمتاجر قبل رفع أي صورة. والقاعدة الأساسية: حدّد موضع العرض أولًا، ثم جهّز الصورة له، ولا تجعل الصورة الكبيرة بديلًا عن التخطيط الجيد.
افهم الفرق بين الأبعاد ونسبة العرض إلى الارتفاع وحجم الملف
أبعاد الصورة هي العرض والارتفاع بوحدة البكسل، مثل 1200 × 800. أما نسبة العرض إلى الارتفاع فهي العلاقة بينهما، وتحدد شكل الإطار: المربع يكون عرضه مساويًا لارتفاعه، والصورة الأفقية أعرض من طولها، والعمودية أطول من عرضها. عندما تصغّر صورة مع الحفاظ على النسبة، يبقى شكل الأشخاص والمنتجات طبيعيًا.
أما حجم الملف فيقاس عادةً بالكيلوبايت أو الميغابايت، وهو يختلف عن الأبعاد. قد تكون الصورة صغيرة الأبعاد كبيرة الحجم بسبب الصيغة أو التفاصيل. لذا اسأل: «كم مساحة العرض الحقيقية؟ وهل يحتفظ الملف بوضوحه دون بيانات زائدة؟».
لماذا يؤثر الاختيار في تجربة المتجر؟
تحتاج صورة المنتج إلى إظهار التفاصيل من دون الإخلال بتناسق البطاقات، فيما يجب أن تدعم الصورة الرئيسية الرسالة من دون إخفاء النص أو قص العنصر الأساسي. الهدف هو التوازن بين الوضوح وسرعة التحميل؛ وتوصي Google بصور واضحة مرتبطة بسياق الصفحة وتقنيات الصور المتجاوبة 2.
طريقة عملية لاختيار أبعاد الصور خطوة بخطوة
1. ابدأ بموضع الصورة لا بالملف المتاح لديك
حدّد أين ستظهر الصورة: بطاقة منتج أو صفحة تفاصيل أو رأس صفحة أو مقال. راقب عرض الحاوية على سطح المكتب والجوال. إذا كانت البطاقة ضيقة، فرفع نسخة ضخمة لا يمنح تفاصيل إضافية غالبًا، بل يحمّل الزائر بيانات لا يحتاجها.
دوّن قياس مساحة العرض، ثم جهّز نسخة كافية لها مع هامش معقول للشاشات الأعلى كثافة. لا تستخدم قياسًا واحدًا لكل مواضع الموقع.
2. اختر نسبة ثابتة لكل فئة من المحتوى
الاتساق أهم من تقليد شكل شائع. اختر نسبة أو مجموعة محدودة لكل استخدام ثم وثّقها لفريقك. فالإطار المربع يلائم شبكة منتجات متساوية، والأفقي يلائم صور الأقسام ذات النص الجانبي، والعمودي يخدم المنتجات الطويلة.
احتفظ بالمحتوى المهم قرب الوسط، ولا تضع نصًا أو وجهًا أو جزءًا أساسيًا عند الحافة، لأن الاقتصاص يختلف بين القوالب والشاشات.
3. قرر: احتواء أم قص أم تصميم بديل
عند عدم تطابق النسبة مع إطار الموقع، لديك ثلاثة حلول. الاحتواء يعرض الصورة كاملة وقد يترك فراغًا؛ وهو مناسب لظهور المنتج كاملًا. التعبئة والقص يملأ الإطار ويستبعد الأطراف؛ وهو مناسب إذا كانت المنطقة الأساسية في المنتصف. أما التصميم البديل فهو نسخة مخصصة لمساحة أخرى، مثل صورة للجوال تركز على الأهم.
لا تمدد الصورة أفقيًا أو عموديًا لتناسب الإطار؛ فهذا يغيّر نسب العناصر ويضعف المظهر الاحترافي. وإذا كان الاقتصاص ضروريًا، عاينه على أحجام متعددة قبل النشر.
4. أنشئ نسخًا متجاوبة بدل ملف واحد للجميع
الزائر لا يحتاج دائمًا إلى النسخة نفسها. جهّز من الأصل عالي الجودة نسخًا متعددة بحسب أحجام العرض الفعلية، مع الإبقاء على النسخة الأصلية خارج الموقع لأغراض التحرير اللاحقة. عند استخدام srcset مع sizes، تتوفر للمتصفح بدائل بأحجام مختلفة ليختار الأنسب للفتحة المعروضة والجهاز 1.
لصورة المنتج، جهّز نسخة للبطاقة وأخرى لصفحة التفاصيل، ونسخة للتكبير إن احتاجت المنصة إليها. وعند تطبيق ذلك تقنيًا، أضف رابط src بديلًا داخل عنصر الصورة 2.
5. طابق الصيغة والجودة مع طبيعة الصورة
اختر صيغة مناسبة ثم راجع النتيجة بصريًا. تحتاج الصور الفوتوغرافية إلى فحص التفاصيل، بينما تحتاج الشعارات والرسومات إلى حواف نظيفة وشفافية عند اللزوم. ومن الصيغ الشائعة المدعومة JPEG وPNG وWebP وSVG وAVIF 2.
بعد ضبط الأبعاد، افحص حجم الملف. يمكنك استخدام أداة تغيير حجم الصور في أدواتي بلس لإدخال العرض أو الارتفاع المطلوبين؛ وعند عدم وجود ارتفاع إلزامي، يساعد تركه فارغًا على الحفاظ على النسبة الأصلية. وإذا بقي الملف كبيرًا بعد تعديل المقاس، استخدم أداة ضغط الصور ثم راجع التفاصيل في النسخة الناتجة. تدعم الأداتان ملفات JPG وPNG وWebP وفقًا لوصفهما، مع ضرورة معاينة النتيجة قبل اعتمادها.
قائمة فحص قبل رفع الصورة
اختبر العرض على الجوال وسطح المكتب
لا تعتمد على معاينة المحرر وحدها. افتح الصفحة على شاشة ضيقة وواسعة، وتحقق من موضع القص ووضوح المنتج وتناسب الصورة مع النص. إذا أصبح الموضوع صغيرًا على الجوال، استخدم نسخة تركز على العنصر الرئيسي.
حدّد العرض والارتفاع في الشفرة أو القالب
عند إضافة الصورة، عرّف العرض والارتفاع الصحيحين إن سمح القالب بذلك، لتُحجز مساحة لها قبل اكتمال التنزيل. طابق القيم مع نسبة الملف الفعلية.
اكتب نصًا بديلًا يخدم المعنى
الأبعاد ليست بديلًا عن قابلية الوصول. اكتب نصًا بديلًا موجزًا للصورة ذات المعنى، مثل: «حقيبة جلدية بنية بمقبض علوي». تجنب حشو الكلمات المفتاحية؛ فالنص الوصفي والسياق القريب يساعدان على فهم الصورة 2.
أخطاء شائعة ينبغي تجنبها
من الأخطاء رفع الصورة الأصلية من الكاميرا لكل موضع في الموقع، ثم عرضها بحجم صغير عبر التصميم فقط. الخطأ الثاني اعتماد صورة مربعة لكل شيء؛ فقد يُفقد ذلك تفاصيل مهمة في لافتة أفقية أو في منتج عمودي. والخطأ الثالث ضغط النسخة المضغوطة مرارًا بدل الرجوع إلى الأصل، ما قد يراكم فقدان الجودة.
تجنب أيضًا تكبير صورة صغيرة لتبدو مناسبة لمساحة كبيرة؛ زيادة البكسلات لا تنشئ التفاصيل غير الموجودة في المصدر. ولا تنس تسمية الملفات بأسماء قصيرة تصف محتواها بدل أسماء عامة؛ فالأسماء الوصفية والسياق المحيط بالصورة من الممارسات الموصى بها لفهم محتوى الصورة 2.
خاتمة
اختيار أبعاد الصور قرار تصميمي وتقني معًا: ابدأ بمكان العرض، ثبّت نسبة مناسبة لفئة المحتوى، قرر طريقة التعامل مع الاختلاف في النسب، وأنشئ نسخًا متجاوبة ثم راجع الجودة وحجم الملف. بهذه الطريقة تظهر المنتجات بانتظام، وتحافظ الصور على رسالتها على الجوال وسطح المكتب، ولا تُحمّل الزائر ما لا يحتاج إليه. اجعل لكل صورة هدفًا ومساحة محددة، وستصبح عملية تجهيز الصور أسرع وأكثر اتساقًا مع نمو موقعك أو متجرك.
الأسئلة الشائعة
هل توجد أبعاد واحدة مناسبة لجميع صور المتجر الإلكتروني؟
لا. تختلف الأبعاد حسب تصميم القالب وموضع الصورة ونوع المنتج. الأفضل أن تعتمد نسبة ثابتة لفئة صور المنتجات، ونسبة أخرى للصور الرئيسية أو المقالات عند الحاجة، ثم تجعل العرض قريبًا من مساحة العرض الفعلية. توحيد الفئة أهم من فرض مقاس واحد على جميع الاستخدامات.
هل يكفي ضغط الصورة بدل تغيير أبعادها؟
لا دائمًا. الضغط يقلل حجم الملف، بينما تغيير الأبعاد يقلل أو يزيد عدد البكسلات نفسها. إذا كانت الصورة أكبر من مساحة استخدامها بكثير، غيّر مقاسها أولًا مع الحفاظ على النسبة، ثم اضغط النسخة الجديدة عند الحاجة. راجع الصورة بعد العمليتين، خاصةً عند وجود نصوص أو حواف دقيقة أو تفاصيل منتج مهمة.
ماذا أفعل إذا طلب القالب صورة بنسبة تختلف عن صور منتجاتي؟
حدّد أولًا ما إذا كان ظهور المنتج كاملًا ضروريًا. إن كان كذلك، استخدم الاحتواء أو جهّز خلفية متناسقة بدل قص جزء منه. وإن كان القالب يفضل إطارًا موحدًا ويمكن التضحية بالأطراف غير المهمة، أنشئ نسخة مقصوصة مع إبقاء العنصر الأساسي في المنطقة الآمنة. لا تمدد الصورة لإجبارها على النسبة المطلوبة، وعاين النتيجة في مواضع العرض الفعلية.
