Login Customer Hub Partner Portal Developer Playground

Content & Commerce

Discover the latest thoughts from the Amplience team and partners about Retail Engagement.

Responsive images - a ticking time bomb?

November 26th, 2015

If you are considering the next stage of responsive site design, you will no doubt be looking at not just making your site responsive but also the images it contains. The basic approach so far of using CSS to resize large hi-res images that gives the appearance of images being responsive, is no longer fit for purpose as it does not meet all three of the rudimentary requirements:

  1. Scaling images to fit different displays
  2. Improving performance using optimized images for different devices
  3. Providing art direction to make images relevant for the experience

New HTML standards provide a solution for frontend developers to make images responsive, but the implementation of these standards dramatically increases the number of images you need to manage and the complexity for front end development. This is because previously an image on a web page was represented by a single line of code and a single image, but a responsive image has numerous lines of code and multiple image variants.

For example a small ecommerce site with

would require 80,500 image derivatives.

If you then consider other product image variants such as zoom and thumbnails this number can reach hundreds of thousands.

With much greater complexity in development and the exponential growth in the number of images, implementing responsive images can leave you with large more risky development projects, escalating on-going maintenance costs, complex media production workflows and decreasing business agility.

So what should you consider if you are to keep responsive image implementations under control?

First we need to understand how images are going to be delivered;
Second, how images are going to be managed;
Third how images are going to be integrated;
How HTML is trying to help

To understand why implementing responsive images could be a problem we must first understand what HTML is doing to make images more responsive.

Tuning Performance with SRCSET

The HTML element has now been given a shiny new attribute – SRCSET. Using this element, developers can now specify a list of images and rules for their suitability for specific screen sizes. The browser in turn uses the SRCSET to load the best image from the list using its own internal algorithm that analyses the rules provided. In this scenario you give over full control to the browser, letting it decide when and what image to load – the SRCSET only provides a list of hints or suggestions and no guarantees.

This approach can be very effective at improving performance across varying screen sizes, reducing page weights for specific screens – however, you now have to code logic into the image tag and manage multiple image variants.

Providing Art Direction

The SRCSET attribute is great when you are purely concerned about optimizing the weight of your pages, but the lack of control and its unpredictable nature makes it unreliable for sophisticated responsive designs. The concept of Art direction for responsive images is not purely concerned with the physical SIZE of an image but also considers the actual content.

What is Art direction?

Right shape – Responsive design often changes the proportions of the areas where images are displayed requiring images to be displayed in different aspect ratios. For example you may use images with a 16:9 aspect ratio for desktop, a 4:3 for tablets and a square image on mobile.

Right Content – Art direction overcomes the challenges of retaining the original meanings of images through the use of cropping. For example images with broader detailed backgrounds are used on large screens, whereas on small screens the background will be cropped out leaving the most relevant feature.

Right alternatives – In some cases the only choice is to use completely different images to ensure the integrity of original content is upheld.

This is where the HTML PICTURE element steps in, it is similar to the SRCSET attribute in that it uses a list of images and rules, but unlike SRCSET it is controlled by the rules the developer specifies. This is predictable on how and when rules are applied means that the requirements for art direction can be fully realised, however, the flexibility the picture element provides leads to even greater complexity in the code.

Using SRCSET and Picture elements now at last provides developers with the tools to build responsive sites with responsive images, but there is a substantial cost to using these elements.

If you are embarking on the next stage of responsive design images you need to consider the following:

How to deliver responsive images – there are three approaches for delivering images

  1. Static – the old fashioned way of deploying images onto a web server where all image derivatives are created manually and organized using folders and naming conventions. This places a huge burden on designers, developers, and error-prone manual processes. Front end development complexity increases as the number of dimensions for the variants increase to support more sophisticated responsive designs.
  2. Cookie cutting – this approach uses systems to generate the image derivatives based on a set of rules or templates and as above these cookie cut images are uploaded onto webservers to be severed statically. Although this provides automation reducing the designers’ workload, it can become very cumbersome reacting to changes in responsive break points that require new or updates to image derivatives.
  3. Dynamic Imaging – Requires only a single master image to generate any variant image in real time using a simple URL and parameters (e.g. width, height and crop) to specify the image variant. There are major advantages in this approach as it reduces the production workload for designers, reduces the cost and complexity of managing large numbers of physical files, the imaging API gives full control to developers simplifying frontend development and facilitates rapid changes to responsive site designs.

How to manage responsive images – The complexities for all the approaches for delivering images responsively requires far more control over image versions, naming conventions and production workflows. Your choices of where to store images are typically your ecommerce platform, CMS or a dedicated Digital Asset Management (DAM) system. The first two usually provide basic features to organise assets and in most cases your assets will already be scattered throughout these systems, making it harder to get responsive projects off the ground and under control. Using a DAM you can centralize all of your images into one location to use across all your digital channels with a further benefit of reducing the cost and pain of integrating numerous backend systems into your responsive sites. DAM features such as managed workflows, channel syndication and image discovery are also essential for the ongoing management of responsive images.

How to integrate responsive images –

  1. The Problem – Adding images to pages is no longer as simple as a single line of code, it requires more sophisticated code with lists of display rules and images to reflect the responsive design. Wholesale changes to code are required when responsive breakpoints are added or existing breakpoints rules are changed.
  2. CMS Templates – The response so far has been to say that this complexity can be managed using CMS functionality and yes, using CMS or your ecommerce platform templates can provide some level of automation, however, these templates can become difficult to maintain when there are so many varying uses for images across the site with different responsive requirements requiring numerous templates. This is further exacerbated when responsive images are required as content manageable elements nested inside other templates with their own responsive rules. If you are using static or cookie cutting for image delivery this is extremely painful due to the reliance on fixed naming conventions – dynamic imaging simplifies things by facilitating linking between template parameters image variants and rules.
  3. Dynamic Image Templates – When we built the Amplience dynamic imaging system we integrated the ability to create imaging templates that bring together all the parameters to create an image variant into a named template, which can be used in the URL instead of passing the individual parameters. These templates are also managed within the imaging system making it easy to respond to responsive design changes without requiring developers to make fiddly changes to the frontend code. As the requirements for responsive images are so diverse we decided to make images even more flexible givin imaging templates the ability to take values from parameters in URL or from its own meta-data. This level of control within each image working alongside the ecommerce platforms templates makes building responsive sites with responsive images far simpler.
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