Image Is Everything Part 2: It’s Never Just a Blur — Quality Versus Speed

Image source: Adobe Stock by rh2010.

We all want our content delivered in a flash — but not with a blurry result. I think everyone struggles a bit with the optimal tradeoff between the quality of images versus image load times.

Our recent Adobe Brand Content Survey reveals that half of visitors abandon content of all types when it takes too long to load — this is how consumers measure quality. We all love rich media, but if your experiences aren’t optimized and fast in loading, you’ve lost your audience.

Your rich media strategy is how to guide your optimization of image quality versus speed. You can use Dynamic Media within Adobe Experience Manager Assets or Dynamic Media Classic as a tool to develop your strategy and automatically execute it for all your content. Strategy is so critical to quality that half of participants in the Image is Everything webinar series update their strategy for every campaign. It’s worth your while to take a few simple steps to improve yours.

Image Presets are your super-power. By creating Image Presets for various types and uses of content, such as banners or product images, you guarantee that the content has good quality and loads as rapidly as possible.

To illustrate how powerful Image Presets are, I created a few test web-pages with rich media, including product, editorial, and video, and created three Image Presets. I used various page load time measures.

Here’s some big news: my Quality Preset loaded in one-sixth the time of the page that wasn’t optimized. And the Speed Preset was even faster.

Preset tested

Download size

Download time

Total page load time

1. Not optimized

36.7MB

4.79 sec

4.91 sec

2. Optimized for quality

1.9MB

591 ms

837 ms

3. Optimized for speed

782 KB

563 ms

767 ms

I could see no quality difference between tests 1 and 2, and little between 2 and 3. It’s obvious to me that the page that wasn’t optimized delivered far more frustration than engagement. Page weights are dramatically reduced. Optimizing for speed reduces it the most — almost half compared to optimizing for quality. This is important to keep in mind when you are doing an experience inventory and deciding whether a page is a candidate for speed or quality optimization.

Image Presets manage pixel dimensions, automatically downsampling to fit the destination. This often means lighter pages. They describe the rules and patterns for your content delivery.

My recommendations for Image Presets

I have a few suggestions for your Image Presets, particularly with format, quality, and sharpening:

I recommend using the format that is most ubiquitous across all browsers. This is usually JPEG.

JPEG is a lossy compression scheme. I typically start the quality slider, which controls compression, at 70. I then inspect the sample image and decide whether I can slide to a more aggressive value, such as 75, or if I need to back it off. I would also enable JPEG Chrominance downsampling. This compresses color data more than the luminance data that our eyes see best.

By the way, downsampling is unavoidable. If an image is resized, it is downsampled.

Downsampling degrades quality, and sharpening fixes this. How sharp the images should be is dependent on your brand’s visual aesthetic and image content.

I never use Simple Sharpening because I want control. Found within the advanced menu, I use these settings:

• Resampling: Sharp2 yields the most realistic images.
• Tool: Unsharp Mask. This is a sharpening filter, the same setting is in Photoshop.
• Apply: Each color (default).
• Amount, radius, and threshold: These values adjust sharpness. Over-sharpening produces banded and very bright edges, and you can see the changes in your sample image as you change these values. Amount is the intensity of the sharpening effect. The values 1 to 5 correspond to Photoshop’s 1-500 range. Radius indicates the distance from a pixel of the effect. A “1” means the effect extends 1 pixel. Threshold specifies how many pixels to sharpen. A higher value is better for images of people, whereas a lower value is likely better for fabrics or clothing on models.

Tinkering is for problems and perfectionists. If you can’t find the time right now to tinker, here’s some more great news: our Rich Media Strategy Image Preset Guide provides the gold standard for optimizing for quality or speed for small, medium, and large content.

Keeping up the momentum

Now that you’ve started updating your rich media strategy, here are three ways you can keep that going:

1. Engage with the three-part Image Is Everything webinar series to get practical tips, and learn how Dynamic Media and Dynamic Media Classic help you evolve your strategy. The webinars explain how to develop a well-defined rich media strategy for optimal experiences, optimize webpage layouts for speed or quality, optimize video experiences, and avoid rich media gotchas.
2. Use our Rich Media Strategy Kickstart Guide and Rich Media Strategy Image Preset Guide to perfect your strategy.
3. Follow the Dynamic Media and Dynamic Media Classic blog for tips and guidance with top posts like Has your Rich Media Strategy Expired? and Video the Experience Maker — or Breaker.