Responsive design has transformed how we build websites in this multi-device world. But unfortunately, responsive design isn’t as simple as it first appears. That is especially true when you consider imagery.
This post is sponsored by ImageKit.
When most of us think of responsive design, we think about how a layout adapts to fit the available space. But in truth, there is a lot more to it than that. Unfortunately, these other areas get neglected. A great example of that is photography, which is problematic as responsive imagery is essential.
Why Responsive Imagery Matters
When it comes to imagery on responsive websites, many rely on simply scaling imagery with CSS. But this is not enough.
The most obvious problem with this approach is that imagery will be bigger than required in most cases. Designers will create images at the maximum size they will appear and then scale them down with CSS for small screen devices. However, this doesn’t reduce file size.
The result is that mobile devices are downloading bigger images than necessary, eating into data allowances and offering a poor experience over slow cellular networks.
But there are more subtle consequences. For example, I have written before about how poor site performance undermines the user experience, but there are financial considerations too.
Sites that are slowed down by loading images will see a sharp decline in conversion rates as well. In fact, according to Bing, a 2-second delay in load time will lead in average to:
- 4.3% loss in revenue per visitor.
- 3.75% reduction in clicks.
- 1.8% drop off in queries.
According to Akamai and Gomez.com, nearly half of users expect a site to load in 2 seconds or less. They are also likely to abandon a website that hasn’t loaded within 3 seconds. Also, 79% of users shopping online won’t return to a site and buy again if they experience issues with performance. In fact, 44% of them will go on to share that bad experience with friends.
The impact of performance on the experience is something that Google has become increasingly vocal about. In fact, they have now started to factor performance into their algorithm meaning those bloated images could well be undermining your site's visibility, as on average, 64% of page weight is down to imagery.
However, even if all of this was not the case, imagery resized with CSS is far from idea. Browsers just don’t do that great a job at resizing. It often results in blurry imagery, especially when that imagery includes text.
So unresponsive imagery undermines the user experience, reduces content visibility and kills engagement. What then can we do about it?
The most obvious solution is to upload multiple images resized for different devices. But that presents challenges as well.
The Problem With Multiple Image Sizes
Unfortunately, the practicalities surrounding creating, uploading and managing multiple image can prove challenging.
For a start, you can end up having to create a lot of different sizes of imagery. It is not merely a matter of uploading a “desktop” or “mobile” version of each image. Depending on the site, there could be many breakpoints in the layout, each of which would ideally have a uniquely sized image.
The number of images required increases further as soon as the image appears in multiple places. For example, an image relating to a news story may well be found on the article page at full size, and also in a listing as a thumbnail. Even that thumbnail may change size depending on whether the listing appears in a central column or a smaller side one.
Expecting content creators to produce and upload images at all of these different sizes is unrealistic. Not only is this time consuming, but it is also unreasonable to expect content creators to have the technical skills to worry about resizing images, let alone ensuring they are adequately compressed.
The way that many deal with this problem is to process the image on the server side. Upload a picture and the server churns out the various sizes required, all nicely compressed and ready to go.
That is a neat solution, but even this has some shortcomings. For example, creating this kind of functionality is expensive and time-consuming. But more importantly, what happens when you redesign the site or even introduce a new breakpoint?
You now face the need to reprocess potentially thousands of images to ensure they work at the new size, presuming the server has even kept the original image.
Fortunately, that is where a service like ImageKit can help. These services will deliver an image to any predefined size and compression value in real-time. What is more, ImageKit integrates with your existing web server (WordPress, Magento, Shopify) or even Amazon S3 bucket and Google storage. That is great if for content creators but also handles any existing images that need reprocessing.
Content creators merely upload the largest, highest quality image they can and services like ImageKit does the rest. But because it is producing your optimised image in real time, it doesn’t matter if the required dimensions change. You request the new image size in your code, and ImageKit does the rest.
The beauty of these services is that they create a straightforward experience for content creators, improve the performance of your site (by delivering highly optimised imagery via a CDN) and future proof your pictures as the design evolves.
They are also incredibly simple to integrate with your site. You include the parameters of the image in the URL you call. If you can embed a standard image, you can insert a dynamic image. That means it works with the srcset attribute seamlessly.
All of this is great in most circumstances, but there is still a slight wrinkle when it comes to background images or other images that require cropping.
The Problem With Cropping
Although I use a real-time image optimisation platform on this site, I have always held back on recommending them for every project. After all, sometimes images need the human touch to format them correctly.
Take for example a carousel. Typically these have a background image with text overlaid on top. The narrower the available space to display that text, the more lines it will wrap on so increasing the height. Also, as the carousel reduces in width, the background image will need to reduce in height to avoid cropping. That is not going to work. The background image will have to crop to accommodate the text.
Then there are the occasions when we use the same image in different contexts. For example, a product image might be displayed prominently on an ecommerce product page, but be reduced to a square thumbnail on the listings page. Once again the image will need cropping.
The question is, how do you crop the image? If it is always cropped in the same way by some piece of software, it could easily crop out the subject of the photograph. It requires human judgement.
That is one area where ImageKit can be of particular help. Unlike many of its competitors, ImageKit will intelligently crop the image. It will identify the subject and crop the image in such a way as to ensure the subject remains central.
No Reason Not to Create Responsive Imagery
With the introduction of intelligent cropping, I can see no reason to ignore genuinely responsive imagery. Services like ImageKit make it ridiculously simple, and the price is negligible compared to the other costs of creating a website.
Best of all, it will help the experience, enhance performance and even improve search engine placement. All of this ultimately improves the bottom line, which makes it a complete no-brainer.
ImageKit is an image optimisation, resizing and CDN delivery service which helps you automate image management for your website and app.