Tuesday, September 29, 2026

FargPackاستوديو
← جميع المقالاتFARGPACK / JOURNAL
THE FARGPACK JOURNAL

تصميم صورة مقارنة أحجام المنتج

مساحة للفكرة. وقت للقراءة.
↑ البداية
تصميم صورة مقارنة أحجام المنتج

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

الحل هو أن تتعامل مع المقارنة كـرسم قياس بصري، لا كولاج صور.

أول قرار: ماذا تقارن بالضبط؟

هناك فرق بين:

  • حجم العبوة الخارجي.
  • الوزن الصافي.
  • السعة الحجمية.
  • عدد القطع.
  • أبعاد المنتج نفسه.
  • حجم المنتج في اليد.
  • حجم العبوة بعد الفتح.

لا تضع كلمة “Size” وحدها إذا كان المقصود الوزن.

مثال: 250 g / 500 g / 1 kg هذه مقارنة وزن، وليست ضمانًا أن أبعاد الأكياس تتضاعف بنفس النسبة.

وفي منتج سائل: 250 mL / 500 mL هذه سعة، لكنها لا تقول إن الزجاجة الثانية ضعف ارتفاع الأولى؛ قد تكون أعرض فقط.

المصمم يجب أن يفرق بين القيمة المكتوبة والشكل الخارجي.

استخدم نفس الكاميرا ونفس البعد إن كان التصوير فعليًا

أفضل سيناريو:

  • نفس العدسة.
  • نفس مسافة الكاميرا.
  • نفس ارتفاع الكاميرا.
  • نفس زاوية المنتج.
  • نفس سطح التصوير.
  • نفس موضع القاعدة.
  • نفس الإضاءة.

غيّر المنتج فقط.

لو صورت العبوة الصغيرة بقرب شديد والكبرى من بعيد، Perspective سيشوّه العلاقة.

استخدم علامات على الطاولة:

  • Center line.
  • Front edge line.
  • Camera mark.

وهكذا تستطيع تبديل SKU دون تغيير المنظور.

لو ستستخدم صورًا منفصلة، أنشئ Scale Master

أحيانًا الصور موجودة بالفعل، ولا يمكن إعادة التصوير.

أنشئ ملف Master:

  1. اختر وحدة مرجعية: 1 px في التصميم = قيمة ثابتة نسبيًا، أو استخدم ارتفاعًا مرجعيًا محسوبًا من الأبعاد.
  2. أدخل الأبعاد الحقيقية لكل عبوة.
  3. اضبط ارتفاع كل Cutout بنسبة الأبعاد الفعلية.
  4. ضع قواعد المنتجات على Baseline واحد.
  5. لا تمدد العرض والارتفاع مستقلين.
  6. راجع أن Aspect ratio للمنتج لم يتغير.

مثال:

  • عبوة A ارتفاعها 160 mm.
  • عبوة B ارتفاعها 240 mm.

إذا جعلت A = 400 px ارتفاعًا، فـB يجب أن تكون 600 px كي تحافظ على نسبة الارتفاع 1:1.5.

الحساب: 240 ÷ 160 = 1.5 ثم: 400 × 1.5 = 600 px

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

لا تجعل كل منتج يملأ الإطار نفسه

في صور المنتجات الفردية، قد يكون من الطبيعي أن يملأ كل منتج نسبة كبيرة من الإطار.

لكن في صورة المقارنة:

  • يجب أن يكون Scale موحدًا.
  • المنتج الأصغر يجب أن يبدو أصغر.

خطأ شائع: صورة 250 g مقصوصة Tight. صورة 1 kg مقصوصة Tight. ثم تضعهما جنبًا إلى جنب بنفس ارتفاع الصورة.

النتيجة: يبدو الفرق في الحجم شبه معدوم، حتى لو كتبت الأوزان صحيحة.

هذا مثال على انطباع بصري مضلل.

FTC في إرشادات Truth in Advertising يوضح أن التقييم لا يعتمد على الكلمات وحدها؛ الانطباع العام الناتج من النص والصور والرسومات يمكن أن ينقل ادعاءً صريحًا أو ضمنيًا. لذلك صورة المقارنة يجب أن تكون صادقة بصريًا، لا صحيحة رقميًا فقط.

استخدم أبعادًا واضحة عندما يكون الشكل غير كافٍ

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

  • H: 240 mm
  • W: 140 mm
  • D: 70 mm

أو: 24 × 14 × 7 cm

لكن تأكد من ترتيب الأبعاد.

لا تكتب: 24 × 14 × 7 من غير تحديد النظام إذا يمكن أن يختلط: Length × Width × Height؟ Width × Height × Depth؟

اكتب Legend: W × H × D

أو استخدم خطوط أبعاد واضحة.

NIST يذكر أن المتر هو وحدة SI للطول وأن المليمتر والسنتيمتر وحدات مشتقة شائعة، واللتر مقبول للاستخدام مع SI للحجم. للمصمم، المهم هو الاتساق: لا تخلط cm وmm في نفس الرسم دون سبب.

لا تستخدم يدًا بشرية كمرجع وحيد للحجم

صورة العبوة في اليد ممتازة للسياق، لكنها ليست قياسًا لأن:

  • أحجام الأيدي تختلف.
  • زاوية اليد تختلف.
  • Perspective يغيّر الحجم.
  • عدسة Wide يمكن أن تكبر ما هو أقرب.

استخدمها كصورة ثانوية مع أبعاد مكتوبة.

إذا كان المنتج Wearable أو Handheld، يمكن أن تكون اليد مفيدة جدًا، لكن لا تجعلها المصدر الوحيد لفهم المقاس.

المقارنة مع عملة أو هاتف: هل هي فكرة جيدة؟

قد تكون مفيدة، لكن:

  • العملة تختلف حسب البلد.
  • الهاتف له عشرات المقاسات.
  • الأجسام المرجعية قد توحي بأنها مرفقة.
  • بعض المنصات تمنع Props في الصورة الرئيسية.

إذا استخدمت مرجعًا: اكتب: Phone shown for scale only — not included إذا كان السياق يحتاج ذلك.

لكن في كثير من الحالات، أبعاد مكتوبة + صورة في اليد أو على طاولة أفضل.

مثال: 3 أكياس قهوة

الأحجام:

  • 250 g — 180 mm ارتفاع.
  • 500 g — 240 mm ارتفاع.
  • 1 kg — 320 mm ارتفاع.

لو جعلنا 250 g = 360 px:

  • 500 g = 480 px.
  • 1 kg = 640 px.

لأن: 240/180 = 1.333 320/180 = 1.778

ثم نضع القواعد على Baseline واحد.

لكن إذا عرض 1 kg أكبر بشكل مختلف، نحتاج Scale للعرض أيضًا، أو نستخدم صورة 3/4 بنفس Perspective.

وفي الرسم نكتب: Actual pack dimensions shown proportionally. Weight does not directly equal physical volume.

هذه العبارة مفيدة إذا المحتوى قد يختلف في كثافته.

مقارنة السعة تحتاج حذرًا مع أشكال مختلفة

زجاجة 500 mL قصيرة وعريضة قد تبدو أصغر من 400 mL طويلة ورفيعة.

إذا كانت المقارنة هدفها “كم السعة؟” اكتب السعة بوضوح ولا تعتمد على الشكل.

إذا الهدف “كم المساحة التي تحتاجها على الرف؟” اعرض W×H×D.

إذا الهدف “كم منتج داخلها؟” اعرض عدد القطع.

المقارنة الجيدة تبدأ من سؤال الشراء، لا من رغبة المصمم في ملء صورة إضافية.

استخدم Grid ثابت

لثلاثة منتجات:

  • Baseline واحد.
  • مسافة أفقية ثابتة.
  • اسم المنتج تحت كل واحد.
  • القيمة الأساسية بخط أكبر.
  • الأبعاد بخط أصغر.
  • لون حيادي.

لا تجعل المنتج الأكبر يحصل أيضًا على لون أكثر سطوعًا وظل أقوى وشارة “BEST VALUE” إلا إذا هذه رسالة تسويقية معتمدة ومقصودة.

إذا كنت تقارن الأحجام فقط، لا تحول الرسم إلى Recommendation خفية.

السعر لكل وحدة لا يدخل تلقائيًا في صورة الحجم

بعض المتاجر تريد: 500 g = Best Value

هذا ادعاء يعتمد على السعر الحالي.

إذا السعر يتغير، الصورة ستصبح قديمة.

بدل ذلك:

  • دع الموقع يحسب السعر لكل 100 g ديناميكيًا إن أمكن.
  • أو لا تضع Best Value في Asset ثابت طويل العمر.

الصورة يجب أن تبقى صحيحة حتى بعد تحديث السعر.

لا توحّد الظلال بطريقة تخفي Scale

إذا كنت تركب Cutouts منفصلة:

  • نفس اتجاه الضوء.
  • نفس ارتفاع الظل.
  • نفس Softness.
  • نفس Perspective.

ظل صغير جدًا تحت العبوة الكبيرة قد يجعلها تبدو وكأنها تطفو، بينما ظل قوي تحت الصغيرة يعطيها ثقلًا بصريًا أكبر.

لذلك الأفضل تصويرها معًا إذا كان ممكنًا، أو بناء Shadow system متسق.

الرسومات الخطية قد تكون أدق من الصورة أحيانًا

لشرح:

  • أبعاد صندوق.
  • ارتفاع زجاجة.
  • عمق عبوة. يمكن استخدام Outline diagram مع خطوط قياس.

صورة المنتج تحت الرسم تضيف التعرف، والـDiagram يضيف الدقة.

لكن لا تغير الشكل في الرسم كي يصبح “أنظف”. إذا الزجاجة لها كتف منحني، اعرضه تقريبًا صحيحًا.

متى تستخدم Silhouette؟

Silhouette رائع لمقارنة:

  • 3 أحجام من نفس الشكل.
  • 4 علب من نفس العائلة.
  • خيارات طول.

اجعل:

  • اللون واحدًا.
  • الخط واحدًا.
  • Baseline واحدًا.

ثم اكتب القيم أسفلها.

ميزة Silhouette أنه يقلل تأثير الخامة واللمعة على إدراك الحجم.

عيبه أنه قد يبدو Generic إذا العميل يحتاج رؤية المنتج الحقيقي. لذلك يمكن أن يكون صورة ثانوية بعد الصورة الفوتوغرافية.

المقارنة بين منتجين مختلفين ليست مثل مقارنة Variants

إذا تقارن منتجك بمنافس: أنت تدخل في Comparative advertising.

FTC يدعم المقارنات الصادقة وغير المضللة، لكنه يشدد على وضوح أساس المقارنة وعلى وجود دعم للادعاءات.

لا تستخدم صورة منافس أصغر من الحقيقة. لا تقصه بطريقة مختلفة. لا تختار أسوأ زاوية له. لا تقارن 500 g منك بـ250 g منه ثم تكتب “Bigger”.

حدد الأساس: 500 g vs 250 g net weight إذا كان مسموحًا قانونيًا واستخدام العلامة والصورة متوافقًا مع الحقوق والسياسات.

هذا المقال يركز على مقارنة أحجام منتجات العلامة نفسها؛ المنافسة تحتاج مراجعة قانونية أكبر.

صورة الحجم للتغليف المرن

الأكياس المرنة تتغير حسب التعبئة.

كيس 1 kg قد:

  • ينتفخ أكثر.
  • يقل ارتفاعه بسبب المحتوى.
  • يتسع في الـGusset.

استخدم عينة معبأة فعليًا أو Dummy بخصائص قريبة.

لا تستخدم Dieline مسطح فقط لإظهار الحجم النهائي، لأن الـGusset يغير الشكل.

اكتب أبعاد العبوة حسب مواصفة المصنع، وصوّر عينة ممثلة.

اختبار على الهاتف

صورة المقارنة قد تكون واضحة على 1920 px وتفشل على الهاتف.

اختبر:

  • هل القيم تقرأ؟
  • هل أسماء الوحدات واضحة؟
  • هل خطوط القياس لا تختفي؟
  • هل المنتجات ما زالت تختلف؟
  • هل هناك Text كثير؟

إذا تحتاج Zoom لفهم الفرق الأساسي، بسّط الرسم.

يمكن تقسيمها:

  • صورة 1: مقارنة عامة.
  • صورة 2: أبعاد تفصيلية.

Alt text والوصول

إذا كانت المقارنة تحتوي معلومة مهمة: لا تجعلها داخل الصورة فقط.

أضف في صفحة المنتج نصًا: “متوفر بأحجام 250 g و500 g و1 kg.”

والـAlt يمكن أن يصف: “مقارنة نسبية بين ثلاث عبوات قهوة 250 غرام و500 غرام و1 كغ.”

لا تحاول نسخ كل الأبعاد في Alt طويل جدًا إذا النص متاح قريبًا في الصفحة.

ملف Master قابل للتحديث

احتفظ:

  • Product cutouts linked.
  • القياسات في جدول منفصل.
  • Text styles.
  • Unit styles.
  • Grid.
  • Export presets.

إذا تغير حجم 500 g، لا تعيد الرسم من الصفر.

اجعل Data source بسيط: SKU | W | H | D | Weight | Capacity

ثم تحقق من أن القيم في الصورة تطابق آخر مواصفة.

قائمة تدقيق الدقة

قبل النشر:

  1. القياسات من مصدر معتمد.
  2. الوحدات صحيحة.
  3. Scale موحد.
  4. لا Stretch.
  5. Baseline ثابت.
  6. الصورة لا توحي بأن Prop مرفق.
  7. الفرق المرئي يعكس الفرق الحقيقي.
  8. الوزن لا يقدم كأنه Dimension.
  9. السعر غير مخبأ داخل رسم قديم.
  10. النص يُقرأ على الهاتف.

ثم اطبع Screenshot صغير أو اعرضه بجانب الصفحة الحقيقية.

الخلاصة

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

المصادر العربية

© 2026 FargPack. جميع الحقوق محفوظة للمحتوى الأصلي.

A product size comparison graphic looks easy: place two or three packages side by side and label them 250 g, 500 g, and 1 kg. But this kind of image can become highly misleading without containing a single false number. Photograph each pack with a different lens, crop each image differently, move one product closer to camera, or scale every cutout to fill the same frame and suddenly a 250 g package looks almost as large as a 500 g one — or the large option looks exaggerated beyond reality.

Treat the graphic as a visual measurement diagram, not a collage.

First decide what is actually being compared

There is a difference between:

  • external package dimensions
  • net weight
  • volume capacity
  • number of pieces
  • physical product dimensions
  • product size in hand
  • opened-package footprint

Do not write only “Size” when you mean weight.

For example: 250 g / 500 g / 1 kg compares net weight. It does not guarantee that package dimensions increase at the same ratio.

For a liquid: 250 mL / 500 mL compares volume, but the 500 mL bottle may be wider rather than twice as tall.

The designer must distinguish written quantity from visual geometry.

Use the same camera position when products are photographed separately

Ideal capture conditions:

  • same lens
  • same camera distance
  • same camera height
  • same product angle
  • same surface
  • same baseline
  • same lighting

Change only the product.

If the small pack is photographed close and the large pack farther away, perspective destroys scale integrity.

Mark the set:

  • center line
  • front-edge line
  • camera position

This makes SKU swaps repeatable.

If the images already exist, build a scale master

Sometimes reshooting is impossible.

Create a master comparison file:

  1. choose one reference product
  2. use approved real dimensions
  3. set its cutout to a known pixel height
  4. calculate other display heights proportionally
  5. align product bases
  6. preserve each cutout’s aspect ratio

Example:

  • Pack A height = 160 mm
  • Pack B height = 240 mm

If Pack A is displayed at 400 px: 240 ÷ 160 = 1.5 so: 400 × 1.5 = 600 px

Pack B should display at 600 px if the comparison is based on physical height.

This only preserves height. If width and depth also differ substantially, a front view alone cannot communicate total volume.

Do not make every product fill the same frame

For individual product listings, it is common to let each product occupy most of its own image.

In a comparison graphic:

  • scale should be shared
  • the smaller product should actually appear smaller

A frequent error: 250 g product tightly cropped. 1 kg product tightly cropped. Both placed side by side at the same visual height.

The weights are correct, but the graphic communicates that the packs are nearly the same physical size.

That is an implied visual claim.

FTC truth-in-advertising guidance explains that ads are evaluated as an overall impression, including words, pictures, and graphics. Advertisers are responsible for express and implied claims. A comparison graphic therefore needs to be visually truthful, not merely numerically accurate.

Use dimensions when shape alone is not enough

If products look similar, add dimensions:

  • H: 240 mm
  • W: 140 mm
  • D: 70 mm

Or: 14 × 24 × 7 cm

But define the order.

Do not write: 24 × 14 × 7 without saying whether that means: Length × Width × Height or Width × Height × Depth

Use a legend: W × H × D

or dimension lines directly on a diagram.

NIST describes the meter as the SI unit of length and notes common derived units such as millimeters and centimeters. For product graphics, the practical lesson is consistency: do not mix mm and cm randomly within one comparison.

A hand is useful context, not a measurement standard

Showing a bottle in a hand can be excellent for scale perception, but hand size varies. Camera angle and wide-angle perspective can also exaggerate the product.

Use the hand image as a secondary visual, then provide real dimensions or capacity.

For handheld products, context is valuable. It simply should not be the only source of scale information.

Coins and phones as references: useful or risky?

A coin differs by country. Phones vary dramatically in size. Reference objects can also create confusion about what is included.

If you show a phone for scale, consider stating: Phone shown for scale only — not included

Often a dimension diagram plus a hand or desk context is clearer.

For marketplace main images, props may also be prohibited or restricted, so use size-reference graphics in secondary images.

Example: three coffee pouches

Hypothetical dimensions:

  • 250 g — 180 mm height
  • 500 g — 240 mm height
  • 1 kg — 320 mm height

If 250 g is displayed at 360 px:

  • 500 g = 480 px
  • 1 kg = 640 px

Because: 240 / 180 = 1.333 320 / 180 = 1.778

Align all pouches to one baseline.

If the 1 kg pouch is also much wider, scale the full cutout proportionally rather than matching only height.

A useful note can say: Packages shown proportionally by physical dimensions. Net weight does not directly equal external package volume.

That helps when product density differs.

Capacity comparisons need extra care with different bottle shapes

A short wide 500 mL bottle may look smaller than a tall narrow 400 mL bottle.

If the buying question is: How much does it hold? show capacity clearly.

If the question is: How much shelf space does it need? show W × H × D.

If the question is: How many units are inside? show quantity.

The best comparison begins with the customer’s decision, not the designer’s need to fill another gallery slot.

Use a fixed grid

For three products:

  • one baseline
  • equal horizontal spacing
  • product name under each
  • primary value in larger type
  • dimensions in smaller type
  • neutral styling

Do not also give the largest product a brighter color, stronger shadow, and “BEST VALUE” badge unless that marketing message is separately intended and substantiated.

If the graphic is about size, do not secretly turn it into a recommendation hierarchy.

Keep dynamic price claims out of static size graphics

Teams sometimes want: 500 g = Best Value

That depends on current price.

If pricing changes, the image becomes stale.

Where possible:

  • calculate price per unit dynamically on the webpage
  • keep evergreen size graphics free from price claims

Static visual assets should not require emergency replacement every time merchandising changes a price.

Shadows can also distort perceived scale

When compositing separate cutouts:

  • use the same light direction
  • maintain comparable shadow height
  • maintain consistent softness
  • preserve perspective

A tiny tight shadow under the large pack can make it float, while a strong grounded shadow under the small pack makes it feel heavier and more dominant.

Photographing products together can avoid many of these inconsistencies. If compositing is necessary, build one shadow system.

Dimension diagrams can be more accurate than photographs

To show:

  • carton dimensions
  • bottle height
  • package depth

a line diagram can be clearer than a photograph.

Use the photograph for recognition and the diagram for measurement.

Do not redraw the product into a cleaner but inaccurate shape. If the bottle has curved shoulders, the outline should remain recognizably faithful.

When silhouettes work well

Silhouettes are excellent for:

  • three sizes of the same package family
  • multiple container heights
  • a clear scale progression

Keep:

  • one color
  • one baseline
  • one visual style

Then label the values below.

The advantage is that material, gloss, and artwork do not distort the size comparison.

The disadvantage is that silhouettes can look generic, so they usually work as a secondary graphic after real product photography.

Comparing your product with a competitor is a different legal category

A comparison between your own variants is relatively straightforward.

A competitor comparison can become comparative advertising.

The FTC’s policy supports truthful, non-deceptive comparative advertising and emphasizes clearly identifying the basis of comparison.

Do not:

  • display the competitor smaller than real scale
  • crop it differently
  • choose a distorted angle
  • compare your 500 g size against their 250 g size and simply write “Bigger”

If the legitimate basis is: 500 g net weight vs 250 g net weight state exactly that, and review image/trademark usage with appropriate legal guidance.

This article focuses on same-brand size systems, where the design goal is neutral clarity.

Flexible pouches require filled-sample thinking

A flat flexible pouch dieline does not equal the final filled dimensions.

A 1 kg pouch can:

  • expand through gussets
  • shorten slightly when filled
  • widen
  • change its front-panel curvature

Use a filled sample or realistic dummy.

Show approved package dimensions from the converter and use photography that represents the real filled form.

Do not use a flat blank pouch image as a physical-size reference for the final product.

Test the graphic on a phone

A comparison can look precise at 1920 px and fail completely on mobile.

Check:

  • Are the primary values readable?
  • Are units clear?
  • Are dimension lines visible?
  • Is the size difference still obvious?
  • Is there too much copy?

Split the problem if necessary:

  • image 1: visual size comparison
  • image 2: precise dimensions

Trying to fit all information into one image often reduces both clarity and accessibility.

Accessibility and surrounding text

If size information affects the purchase decision, do not keep it only inside the image.

On the product page, write: “Available in 250 g, 500 g, and 1 kg.”

Alternative text can describe: “Proportional comparison of 250 g, 500 g, and 1 kg coffee packages.”

If detailed dimensions are already available in adjacent HTML text, the alt text does not need to become a long transcription of every number.

Build an updateable master

Keep:

  • linked product cutouts
  • a measurements table
  • text styles
  • unit styles
  • grid
  • export presets

A simple data source: SKU | W | H | D | Net Weight | Capacity

When manufacturing updates one pack dimension, change the approved data and regenerate the comparison rather than rebuilding from memory.

Accuracy checklist

Before publishing:

  1. Measurements come from an approved source.
  2. Units are correct.
  3. Display scale is shared.
  4. Cutouts are not stretched.
  5. Baseline is consistent.
  6. Props are not implied to be included.
  7. Visual size difference matches reality.
  8. Weight is not presented as a dimension.
  9. Dynamic price claims are not frozen into old artwork.
  10. Typography remains readable on mobile.

Then view the graphic inside the real product page, not only in the design application.

Final takeaway

Product size comparison graphics demand more measurement discipline than decoration. Use a common display scale, fixed perspective, approved dimensions, and clear unit labels. State whether the comparison represents weight, capacity, physical dimensions, or quantity. A strong graphic reduces post-purchase surprise because customers understand how the options actually differ instead of guessing from independently cropped product photos.

English sources

© 2026 FargPack. All rights reserved for the original content.