How to design a mobile ready hero image

By Chris Dawson August 22, 2018 - 2:11 pm

Businesses spend a lot of time shooting product images for the Internet. Sadly, whilst many great product shots work well on a desktop, they’re not quite as good when viewed on mobile devices. With significantly over half of all ecommerce sales taking place on a mobile, knowing how to design a mobile ready hero image has never been more important.

GS1 UK asked the industry to help develop guidelines for online product images. This is not a new problem and Unilever who worked with the University of Cambridge over four years to compile consumer research and retailer feedback across 17 countries. Unilever donated their research to GS1 as a basis for an industry-led initiative to produce guidelines on how to implement a mobile ready hero image for online retail channels, specifically on small-screened mobile devices.

Whilst much of the focus was on groceries and household items, many of the lessons learnt can be applied to just about any product being sold online. The focus is on the four ‘W’s to ensure that the information on the product and pack size are immediately apparent to the consumer, especially if they are making routine purchases and just need visual confirmation that the product they are looking at is the correct one.

The Four Ws essential for mobile ready hero image

Governed by the Four Ws, the guidelines are a clear set of recommendations for creating consistent product images that allow shoppers to make quick and accurate purchase decisions on mobile devices.

  • Who is the brand?
  • What is it? – The type of product.
  • Which variant of the product is it?
  • HoW much of it is there?

The accompanying image on this article shows two product shots, one is an image of the actual product and the other is an edited mobile ready hero image. On the product shot much of the vital information is unreadable, even on a large screen device. By flattening the image and repositioning the text, the brand, type of product, variant and quantity all stand out giving the consumer all of the information they need to make a purchasing decision, even on a small screen.

Mobile ready hero images will also become increasing important for image search as results are generally presented in gallery format with thumbnails and conveying the critical Four Ws information could make the difference between your product being click on or that from a competitor where the information is clearly conveyed.

Product shots, regardless of how great they are, may be doing you a disservice when your customers are shopping on small screens. If you’re interested in learning more about how to design a mobile ready hero image you can find the full GS1 guidelines on their website.

  • 3 years ago

    I wonder how many people need a hero image?

    • 3 years ago

      Everyone who has a primary picture on eBay or Amazon that will be displayed as the main image in search for starters.

      Which of the two images would you be more likely to click on? I’d say the one with the clearest information at a guess.

    • james
      3 years ago

      the “hero” image (who names this stuff?) looks like a knock-off chinese product, i’d buy the one that looks real, given a choice.

  • Dom
    3 years ago

    Wouldn’t that be against Amazon image requirements as it is not a photograph of the actual product you would receive? With additional text and logos banned I think it would be a risk.

  • northumbrian
    3 years ago

    it could be argued the main product ingredient minimised on the hero pic,
    is not suitable,
    the time effort and cost of producing the hero pic could be hypothetical,
    the difference is obvious when side by side but would it make that much difference in the actual advert ?

    • 3 years ago

      I guess it would depend on a number of factors including how clear the original image is, whether size/weight is critical an conveyed clearly on a standard product shot and most important of all whether the cost is justified by the volume of expected sales.

      For grocery and other household products it’s a no brainer. For other types of products I’d take it on a case by case basis. Bulk pet food would be another example that would benefit e.g. when it’s difficult to see weight on a 15kg sack of rabbit food compared with to 2kg bag.

      Very unlikely to be of use in one off collectibles 😉

    • northumbrian
      3 years ago

      dont get us wrong we think pictures are critical,
      were always tweaking our pictures we think this thread is thought provoking and
      very useful

    • 3 years ago

      The real crux of the matter is tweaking the product image to have information such as quantity/weight clearly displayed rather than having it added to the image as text. The GS1 document is quite an interesting read and instructive for anyone involved in ecommerce.

  • northumbrian
    3 years ago

    were more interested in the tomatoes in a tomato sauce than 723g

  • james
    3 years ago

    such photoshoppery is a perfect excuse for the customer to claim “SNAD” on ebay.
    it doesn’t look like the photo = instant refund on ebay, or you paying for a label automatically without a chance to explain these days.
    sound advice.

  • Rob
    3 years ago

    Clearly the second label is better for online especially for food/household items, as you can see the weight and what the actually item is. It is different if you are in a supermarket as products are grouped together where as online it might be displayed in a sponsored ad to catch someone’s eye.

  • 3 years ago

    Tomatoes definitely look better in the first image.

    Not really a true comparison as the first image is taken at a different angle.

    I think if I was shopping for a jar of Dal Giardino, arrabiata pasta sauce the first image would work for me. In general grocery shopping most people know what they are looking for.

  • 3 years ago

    Great to see such interest on the new GS1 Guidelines!

    Just one point of clarification picking up on some of the points above….the scope of this initial work was grocery replenishment items and for images on mobile devices.

    So when consuners are shopping on the move, for products they know (i.e. not the mocked up pasta sauce we’ve used to show the key principles!) the tomatoes are less important than key information we refer to as the 4Ws….we’ll that’s what our industry group told us anyway!

    Talking of our industry group, it was predominantly made up of ‘traditional’ retailers, brands and solution providers and we’ve love to have input from those primarily focused on selling on marketplaces.

    Please let me know if there is anyone out there that would be interested in any further development work in this space.

  • 3 years ago

    Surely the key point should be the packaging design in the first place? The retail marketplace has changed, and packaging design needs to change with it, so clear and concise in a shop, on a pc and on a mobile.
    The weight of an item is often disguised so that we don’t question how the size has gone down for the same price.
    It would bring greater transparency to the whole market place and ensure the consumer gets what they expect as we all know that online purchases are often made from the first image alone.

Featured in this article from the Tamebay Guide – companies that can help you grow and manage your business.


GS1 UK is part of the global GS1 organisation that defines, maintains & manages the standards that ensure products are uniquely identified.

See More Companies >

Recent Comments

3 hours ago
Stephen Walder: Whilst allowing Marlin Equity Partners equitable access to your valued sales data....
4 hours ago
ifellow: I get your point, most of it isn't 'FAKE' thou, its simply 'fake brands' i...
4 hours ago
R: learn to text while doing 56mph, pull out without warning, sit in lane 2 for...
5 hours ago
Richard: Just purchased a quantity of Logitech mice from a 3rd party seller on Amazon which...