Designing JPEG XL’s Image Quality Comparison Tool

One of the most crucial elements of the new JPEG XL website is the image quality comparison tool – the feature that will allow users to visually compare JPEG XL with other image formats.

The challenge lies in creating an intuitive interface that clearly communicates the differences in image quality and file size. We've been experimenting with various  designs, trying to strike a balance between functionality and aesthetics.

Jon suggested our prototype should include two modes: “compare size” and “compare quality”.  This allows users to either see how different formats perform at the same quality level or how they compare when constrained to the same file size. It’s a bit confusing when you first see it, so hopefully people will get it.

We've also been debating how to represent the quality and size metrics. Should we use a simple numerical scale, or something more visual like a color gradient? There's also the question of how much technical detail to include – we want to provide accurate information without overwhelming non-technical users.

We've decided to have an info button that hides some of the more technical details, especially since we're also going to show DSSIM and Butteraugli rather than just SSIMULACRA 2.

As we continue to refine this feature, we're excited about its potential to clearly demonstrate the benefits of JPEG XL to a wide audience.

Share this post