I work in a skincare company and I lately came into a discussion about whether our E-Commerce images should be representing the real dimension of containers or a scale of them (200 ml, 100 ml, 50 ml).

So basically, the same frame of 500px * 500px would display different proportions depending by the item.

Assuming that this could be possible for certain products on some screens, I found this extremely complicated, non-usable and difficult to maintain, also from a software perspective.

I didn't find any relevant resource about this topic, on which I'm reluctant. Following some best practice I always see full dimensions and eventually explicable guides to sizes, like amazon does for books.

Should I use real-world scale images in e-commerce?

Amazon using human torso silhouette to represent size of a book

  • 1
    ...So, what's the question?
    – Adriano
    Commented Nov 13, 2019 at 4:45

3 Answers 3


Given the fact that picture sizes will then vary 4 or 5 times, this will make your design not so nice, as you will break some basic design rules as symmetry and order (list view), and visual height will be not levelled on detail view (as picture will take too much visual height / attention on different product pages).

Another Contra argument can be that your regular users, have a feeling about how much is 100ML (1/10 from L). Therefore, they also cca know what they get with 50Ml, or 200Ml and having it also visually showed is not so much valuable information.

  • Thanks this is what I was expecting indeed.I figured but I needed some community opinions.
    – middlelady
    Commented Nov 13, 2019 at 13:14

You don't always need to show the full-size image, but just having something that can be used as a reference should be enough. So instead of a full person, you can just use a hand or other references that have a reasonably well-known size.

I think the issue is really having a clean product shot that you can manipulate graphically so it is not as much of a hassle to work with. Better still, if you can create models of items digitally then you can do whatever you like with it (programmatically like svg files or a 3d model that you can use to represent multiple product items).


For the "pack shot", you probably want to use "full-frame" images throughout (so both the 50ml product-shot and the 200ml product-shot would both be 500px x 500px images). This keeps things like a grid-layout looking consistent, and allows the customer to see all available detail (if the 50ml container was shown to scale, it would be a quarter of the size of the 200ml container, and detail would be lost).

However, it might also be useful to show the relative sizes of containers for products that are available in a range of sizes. For this, you might show the range of different container sizes side-by-side, with the "current size" highlighted.

In practice, this would probably be a relatively small image (much smaller than the main product photo), and therefore would probably want to show "stylized" containers rather than images of real containers; however, to show the concept, I've taken a randomly-found image of multiple bottle sizes from Coca-Cola Reconfigures Range For Sugar Tax and adjusted it to show the sort of thing I mean:

Large bottle page: Large bottle highlighted Small bottle page: Small bottle highlighted

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.