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:
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
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 –
Call toll free 866 623 5705
or +1 917 410 7189
Call +44 (0)207 426 9990