New Findings: The Wrong Image Format Measurably Hurts the User Experience

Faster load times correlate with improved business metrics (ranging from page views to revenues). With images comprising more than half of a typical page’s weight, it only makes sense that optimizing images so that they render more quickly in the user’s browser should be a priority for every site owner.

Selecting the best image rendering format is the first step on the path toward fully optimized images, but even this first step is fraught with debate. At the core of the debate is this seemingly simple question: Should we use baseline or progressive images? If you’re not a web designer or developer, you might find yourself wondering if this is really a crucial question. But if you are a designer or developer, you’re aware that this question has major ramifications in terms of creating the best possible user experience.

At Radware, our latest research — released today — explores this important user experience issue and yields answers that are supported by real data.

Background

Using a pioneering neuroscience technology called facial action coding — which maps and analyzes changes in individual facial expressions — we tested 280 participants on their reactions to a series of online transactions. While watching an online transaction, participants were randomly served one of three different image rendering formats:

• Original – Standard lossless image.
• Progressive JPEG – Image is downloaded in lower resolution, displayed in the browser, then “progressively” downloaded and re-displayed until the full resolution is shown.
• PerfectImage – Lossy image that is carefully degraded using a DCIM (Digital Camera Images) human vision algorithm. This technique results in a 5% loss in image quality with a much smaller filesize. (Note that PerfectImage is a proprietary image format currently in development at Radware.)

With the exception of the format in which the images were rendered, the pages were otherwise identical. Participants were also surveyed about their thoughts and attitudes about online images.

Key Findings

This research yielded some fascinating findings — some of which were expected, and some of which were surprising.

• Default (original)  image formats, used by up to 95% of all websites, do not deliver the highest level of user satisfaction.
• Overall, the preferred format was PerfectImage. Progressive JPEG was least preferred.
• 65% of participants have felt frustrated by images taking too long to load.
• 51% of participants wait for most or all of a page’s images to load before they begin to interact with the page.
• 50% of participants feel that the way in which images load affects their web browsing experience.

Takeaway

The preferred image format was PerfectImage, which is not yet available to Radware customers. (You can be sure we’ll trumpet it loud when it is.) Site owners can, however, take advantage of a myriad of optimization techniques — such as compression, consolidation, deferral, and preloading, to name a few — that will help images render faster, which will help pages load faster. The ultimate payoff is increased user satisfaction and a corresponding increase in business KPIs.

Get the Report

For a detailed discussion of our research methodology and results, as well as an overview of image optimization techniques —  I encourage you to download the report: Progressive Image Rendering: Good or Evil?