A Dynamic Approach to Mobile Ready Hero Images

September 21, 2017

Leveraging product images on lister or search results pages, can prove to be problematic on smaller screen devices, especially for certain types of products (such as those in FMCG for example). While the written product description tends to include details such as the product size, or if an item is a shampoo or a conditioner, many people are visual-led shoppers, and such similar looking product visual can make differentiation more challenging.

AAEAAQAAAAAAAA3bAAAAJDhjNDNjNGY2LWMyMDctNDU3OS05MTAyLWM2ZjUyOWIyYjE3MA

The University of Cambridge in conjunction with Unilever undertook some interesting research (http://ecommerce.inclusivedesigntoolkit.com/) in this area. They investigated the effects of providing visually succinct contextual product information as part of the decoration of the product image on the lister pages, such as that below. I recommend reviewing the research mentioned above, as it gives details of some very interesting results.

AAEAAQAAAAAAAAtaAAAAJGE5ZWVlMWVlLTZkNTMtNDkzMC1iYzJjLTI1YWI4NmJjNDZhMQ

Templates

Amplience Dynamic Media solution includes server based images compositing (sometimes called ‘Roundling’) which you can see here:

http://playground.amplience.com/di/app/#/layers

Utilising this approach we created ‘Transformation Templates’ which encoded the design logic to allow us to use parameters to control and manipulate the various layers of the design, including text content, typeface, sizing, positioning and colours.

Hence, the image was created at request-time by passing in those particular parameter values into the image request:

i1.adis.ws/i/bendemo/7810908695416/tresemme-keratin-smooth-marula-oil.jpg?$MFHI_Full_v2$&w=600&volume=739&units=ml&category=Conditioner&top_rgb=131,15,16&corner_rgb=0,0,0

AAEAAQAAAAAAAAqIAAAAJDdjODlhMjViLWJiNDMtNGQ3Ni1hN2VjLTBhNmU3YTIxMWUxZg

As such, nearly infinite variations of product variant can be generated instantly from just this Template (in this case called $MFHI_Full_v2$, and we can of course have numerous Templates, encoding different designs, logical operators and parameters as required, and the moment a new template is published, it can immediately be utilised with the thousands or millions of product assets in your account.

Additionally, you can apply any of our Dynamic Media commands to the output image i.e. you could make it any size, compression or format including progressive jpg, or webp for optimised delivery.

Meta-data

A further enhancement to the management of this process, is by attaching relevant meta-data to a product image. In this case we added details such as it’s category, size, relevant product colour schemes, as you can see from the screenshot from the Admin interface. We allow fully customisable meta-data schema’s, so these properties can precisely match your product and design needs. (For further details about how to set these up, please contact our Customer Success team).

Once the relevant values are associated with a product image, they are then requestable along with the image itself, such that the parameter values in our earlier example are auto-completed and applied to the Templates, purely using information and assets stored within your Amplience account.

AAEAAQAAAAAAAAtvAAAAJDg4NGQzODE3LWNkODgtNGNmMC05MWY2LWI0YjE0NzYyZWUzYQ

 

This product information could be automatically sourced from your PIM (or product catalogue etc.) via an API integration with our platform, making the end-to-end process scalable from from a workflow and global delivery perspective.

Back to top

Request a Demo

ic-body-success
e-mail

contact@amplience.com

ic-body-success
United States

Call toll free 866 623 5705
or +1 917 410 7189

ic-body-success
Europe

Call +44 (0)207 426 9990