Eliminate These 9 Rich Media Gotchas to Supercharge Your Customer Experiences

Image source: Aaron Amat / Adobe Stock.

How quickly an image loads, the crispness of an image, how smoothly a video plays — all this can have a major impact on the customer experience. Learn about a few rich media “gotchas” that may be causing your customers to have a suboptimal experience. Then discover ways you can transform those experiences from less-than-stellar to outstanding.

Gotcha 1: Failing to use image delivery intelligence

Delivering images in formats that perform poorly or don’t load because they are not supported by the browser is a common problem. This is especially egregious in mobile, where processing and load times can easily exceed a customer’s patience. Developers of browsers optimize performance for selected image formats, so processing of images in those formats is as streamlined as the developers can make it. When images are not delivered using a browser’s preferred format, the customer experience is burdened with slower loading and higher computing demands.

Tip: Experiences perform best when they use a browser’s preferred format because they reap the benefits of streamlined and fast loading that have been developed for each browser. Smart imaging in Adobe Dynamic Media automatically delivers the desired bespoke formats to match each browser’s preferences.

**Result: Load images on mobile almost 2X faster.
**

Explanation: In the Smart Imaging online documentation, a graph shows load time for JPG files with and without Smart Imaging. With a JPG quality, or “QLT” setting of 100, the image loads at 8ms with Smart Imaging and 15ms without. That’s almost 2X faster.

Gotcha 2: Using a larger image than needed

This gotcha is universal and ubiquitous. It is typical to see a 750-pixel image being delivered to a 350-pixel container. The load size is twice what it needs to be, which makes the load time excessive.

Tip: Significantly reducing the image size to match what is actually required for the size of the image used on the page can help. Image Presets in Adobe Dynamic Media manage pixel dimensions, automatically downsampling the image to fit the container. When used in tandem with the responsive design library, you get good quality imagery with faster load times.

Result: Load images on mobile almost 2X faster.

Explanation: You’re delivering 400 fewer pixels with a 350-pixel image, so 400/750*100%=53% smaller image and therefore faster load time.

Gotcha 3: Using URL-based image parameters

Are you hand coding URL parameters for every image on every page? Ouch! Building a specific URL for each image increases complexity of creating, managing, and maintaining rich media delivery. Having to change each individual URL in order to try out new behaviors stifles flexibility in creating and delivering customer experiences at scale.

Tip: Instead of defining URL parameters for each image, use Image Presets in Dynamic Media. One Image Preset can describe how to deliver all images. Presets can also be created for various media subsets like “Thumbnail,” “Electronics,” or of a specific campaign. Stack multiple presets to achieve specific desired behavior. Doing this makes your workflow easier if you are making changes, experimenting, or starting a new campaign. Experiment with media, changing behavior across the site by editing one Image Preset versus editing hundreds or thousands of individual URLs.

**Result: Order of magnitude boost in efficiency and flexibility.
**

Gotcha 4: Not optimizing load order

Users respond to what they can see on a page, but a significant and critical portion of the page is invisible to the user: tracking, analytics, payment process, etc. When a page loads these invisible portions before the more interesting content, your customer has to wait for the good stuff to show up.

Tip: Reorder the delivery of the elements on the page so that the enticing bits come first. Do that, and your customers will enjoy nearly instant gratification — as much as a 67% improvement in the apparent speed of the page load. Consider loading the images and copy first. Cart, analytics, payment process, and review modules should be postponed. Work with your frontend developer and IT team to craft the perfect load order for your experiences.

**Result: Give users more immediate gratification.
**

Gotcha 5: Not enough video compression

How do you know your videos need to be compressed more? Just look. If they are slow or choppy, or worse yet, don’t run, your video is being delivered at a quality setting that is too high for the size being displayed. Small moving images in video don’t need the quality that of a still image because the eye just can’t perceive the difference.

Tip: Offer users the quality video experience they crave. You can compress video as much as 50% to 60% without a perceived difference in quality.

Result: 50% or greater video compression can deliver a higher quality experience.

Gotcha 6: Image quality is set too high

Another common gotcha? Setting the image quality too high, which results in a file that is way too heavy. According to HTTP Archive, on average images make up for more than 60% of data on a web page.

Tip: Reducing overall image sizes is key to fast-loading experiences. Set JPEG quality at 75% to 85%. You’ll find that a setting of 80% is generally great. Higher quality settings make a heavier image, without apparent visual improvement. As an example, by dropping quality from 90% to 80%, a 430KB image drops to 294KB — a third smaller in size. This adds up to a 20% improvement in load time for the average page.

Result: Exceptional image quality, at 2/3 the size.

Explanation: 294/430*100%=69%. The 294KB image is approximately 2/3 the file size of the original 430KB image.

Gotcha 7: Using the wrong image format

JPEG format can compress images with no visual loss of fidelity out — even at a reduction ratio of 1:10. PNG and GIF formats are loss-less, and cannot achieve the small size, but high-quality images produced with JPEG’s lossy compression.

Tip: Don’t use PNG or GIF unless you have to, such as for their transparency and animation features. Use the format that is the most ubiquitous across all browsers — JPEG. Here’s your golden rule:

• PNG and GIF for icons
• JPEG for images

Result: Painless (image) weight loss.

Learn more about PNGs vs JPGs, when to use them and how to do so effectively.

Gotcha 8: Making multiple image requests for icons

Yes, you need many icons to paint a navigable, useful page — navigation icons, shopping cart icons, and perhaps a big fat PNG for logo transparency. Asking for each image one at a time piles on a lot of additional weight and processing. If your page has 15 icons at 14KB each, it could make 30 requests and download 210KB.

Tip: Use CSS Sprites to make one request and download all the images at once. CSS Sprites have intelligence to pull down images when needed in fewer requests. They do that by creating an image sprite, a collection of images put into a single image. The 15 icons on the page mentioned earlier could be downloaded all at once as an image sprite, reducing the download size from 210KB to perhaps just 99KB. Using image sprites reduces the number of server requests and saves bandwidth, reducing page load time for icons by 54%.****

**Result: Load icons significantly faster.
**

Gotcha 9: Not using adaptive video sets

Of course you want to streamline the work involved in delivering a great customer experience. But hoping that one encoding will be okay for every situation is just as ineffective for video as it is for images. Linking to one encoding and hoping it will work on all browsers and devices is a losing strategy. Too often, users get choppy, interrupted, slow loading, and low-quality video. They give up on the experience.

Tip: Use adaptive video sets, in tandem with an intelligent video player. With this combo, you are certain to deliver the right quality for each device, with a fast-loading experience. Adobe Dynamic Media provides automatic transcoding from a single master video.

Result: Make 100% of video experiences quality experiences.

Ready to deliver stellar experiences?

Adobe Dynamic Media can help you overcome many of these gotchas and do so much more to deliver your customers the engaging, rich media filled experiences they crave. Learn more about Adobe Dynamic Media.