We all know the expression “content is king.” But if we want to be more specific, we really need to clarify that, on the web, images are king. (As a writer, it pains me to say it, but it’s the truth.)
As internet users, we crave images — the bigger, the better. But as developers, content creators, and site owners, images cause us no end of performance-related angst. According to the latest HTTP Archive data, the average page weighs in at 1795 KB, with 56% of that weight (1000 KB) comprised of images. This makes images arguably the most fertile ground for improving web performance. And this is why, at Radware, we focus so much of our R&D energy on image optimization.
In this post, let’s talk about why images are so immensely valuable, and what we can do to make them as efficient as they are important.
Adding images to a page, or making existing images larger, is a proven way to increase conversion rates (the percentage of site visitors who convert to active customers):
For obvious reasons, images aren’t going to go away. But we need to mindful of this…
Earlier this year, Radware did some fascinating (if I say so myself) neuroscientific research into how people respond to various image rendering formats in ecommerce transactions. While the focus of our study involved facial action coding and implicit response testing, we also surveyed our 742 test participants to find out what they think about images on the web. Here’s what they told us…
Some of our other survey findings:
The takeaway from this survey is that most people are very sensitive to image rendering. Because of this, we need to do whatever we can to make images as fast as possible for the majority of web users who will delay interacting with a page until images have rendered.
You may already be aware of most or all of these practices. But if you are, then you’re in the minority. In surveys performed by Radware and other organizations, most sites fail to fully take advantage of all these techniques.
Image compression is a performance technique that minimizes the size (in bytes) of a graphics file without degrading the quality of the image to an unacceptable level. Despite the benefits, we’ve found that 43% of the top 100 retail pages failed to implement image compression.
Reducing an image’s file size has two benefits:
Inappropriate image formatting is an extremely common performance issue, especially in organizations where you have a lot of content creators with varying degrees of performance know-how dumping images into a CMS. An image that is saved to the wrong format can be several times larger than it would be if saved to the optimal format. Images with unnecessarily high resolution waste bandwidth, processing time, and cache space.
As a general rule of thumb, these are the optimal formats for common image types:
Yes, this is probably all old hat to you. I guarantee that it is not old hat to many people in your organization.
This touches on both compression and format. WebP (which you can read more about on the Google Dev blog) is a new-ish image format that offers lossy and lossless compression for web images. At Radware, we’ve been experimenting with a format — which we’ve dubbed PerfectImage — that takes a lossy compressed WebP image and degrades it until its Structural Similarity (SSIM) Index is 0.985 compared to the original.
Spriting is a CSS technique for consolidating images. Sprites are simply multiple images combined into a rectilinear grid in one large image. The page fetches the large image all at once as a single CSS background image and then uses CSS background positioning to display the individual component images as needed on the page. This reduces multiple requests to only one, significantly improving performance.
This principle seems like a no-brainer, but it’s amazing how many times I analyze pages that load primary content last. Site owners should be aware of the usability consequence of delaying the rendering of feature content: according to this Nielsen Norman Group eyetracking study, a user who experiences instantaneous page rendering spends 20% of their viewing time within the feature area of a page, whereas a user who endures an eight-second download delay spends only 1% of their total viewing time looking at the featured space on a page.
Help your visitors see the page faster by delaying the loading and rendering of any images that are below the initially visible area (sometimes called “below the fold”). Deferring non-essential content won’t change your bottom-line load time, but it can dramatically improve your perceived load time.
Not to be confused with browser preloading, auto-preloading is a powerful performance technique in which all user paths through a website are observed and recorded. Based on this massive amount of aggregated data, the auto-preloading engine can predict where a user is likely to go based on the page they are currently on and the previous pages in their path. The engine loads the resources (i.e. images) for those “next” pages in the user’s browser cache, enabling the page to render up to 70% faster.
(Note that this is necessarily a data-intensive, highly dynamic technique that can only be performed by an automated solution. Learn more about auto-preloading.)
I can handle waiting for a slow image that is either entertaining or offers important information. But waiting extra seconds just to see a stock image render makes me feel like chump for wasting my time. Images should always, always, always offer value to the user. If they don’t, they’re performance dead wood and should be pruned.
Tackling images is one of the easiest ways I can think of to pluck the low-hanging performance fruit. As I said earlier in this post, most or all of these techniques may be very familiar to you. But if your organization has a large number of content creators who are responsible for generating and uploading images to your CMS, I can guarantee that they will not be familiar with them. In the new year, consider making it your mission to spread the gospel of image optimization throughout your organization.