Impact of Unoptimized Images on Your Store

Jon Arne S.
ImageEngine
Published in
4 min readMay 12, 2020

According to a recent large-scale research performed by Google, pages from the retail sector, on average, are one of the slowest to load.

A website could be bogged down for a multitude of reasons, however it’s almost undeniable that e-commerce shops tend to rely heavily on rich formats such as video and images.

Magento stores, in particular, request on average 2.75MB of data per page when it comes to mobile clients (and this is only inches away from desktop), out of which images comprise a staggering 1.55MB (56%).

This spells bad news for buyers shopping from their smartphones. Why? Conversions are something every e-commerce site strives for, however they happen at the very end of a purchase funnel. The majority of web traffic comes from mobile these days, and mobile conversion rates are typically lower compared to desktop. Despite the uptick of users on 4G networks, mobile connections are still brittle and slow — it might take awhile until first pixels are painted onto the screen, let alone downloading the complete asset bundle. If every step of the way shopper’s patience is tested because they are subject to the same amount of payload you’d serve to a desktop-grade computer, then it’s highly likely that drop-off and cart abandonment rates will be disappointing.

How to Address this Performance Hurdle?

Image optimization is a low-hanging fruit when it comes to accelerating media-rich websites. It offers enormous byte savings, but comes with a lot of pitfalls, culprits and costs if you decide to assemble your own pipeline and put in place required infrastructure. Unfortunately, Magento doesn’t offer any built-in optimizations when it comes to serving responsive images to your customers. On the bright side, Magento’s marketplace features several plugins geared towards improving image delivery, which means you can offload this rather complicated process to an external service. One of those extensions, an Image CDN called ImageEngine, promises to deliver images in the most suitable format and quality, which at the same time would optimally fit any device — thanks to its unique, intelligent device detection algorithm. And it does so automatically, as fast as possible — with little to no setup required.

What is an Image CDN?

An image CDN is a distributed global network system (unlike a standalone origin server) designed to bring a copy of your images closer to your users while ensuring proper optimizations and responsiveness. It’s capable of reducing latency and increasing download speed as it finds the shortest hop to the user and serves optimized images from a cache. Download speed affects page load time, and this is one of the most important metrics for both user experience and conversion.

Attempting to optimize images by yourself and integrate them into responsive websites is not something that can be tossed off in one day as there is no single bullet-proof approach for how to compress an individual image. Finding the optimal settings for your image requires meticulous analysis along many dimensions: fidelity/file size ratio, format capabilities, proportions for seamlessly endless variants of screens and DPIs, and so on.

An added benefit of using an image CDN is that it future proofs your responsive image loading strategy. The DIY approach requires maintenance, keeping tabs on browser support for emerging formats and following trends within the image compression community.

What’s so Special About ImageEngine?

Compared to other plugins on the Magento marketplace, it boasts a comprehensive list of supported formats, including the most efficient ones for Chrome and Safari: WebP and JP2, respectively. ImageEngine provides format coverage that overshadows any solution out there. Even if you combine several plugins, you’ll still be missing JP2 and SVG support. Try to imagine all the orchestration and configuration that goes along with that, let alone associated monetary costs. What’s also important to point out is that none of the other plugins include a global CDN.

The whole process of compressing, converting and fine-tuning your images is completely automated and tweaked to perfection by ImageEngine’s engineers who specialize in image optimization. Everything just works out of the box! You can still manipulate images in various ways if need be, however, through special directives.

Ultimately, ImageEngine has a trick up its sleeve no other service does — a clever and precise device detection algorithm. Complete awareness of a requesting device’s parameters, such as dimensions and DPR, allows ImageEngine to drive the whole optimization process towards the best possible end result, no matter the device type. This includes smartphones, desktops, tablets, SmartTVs, and game consoles.

If you’d like to get the most out of ImageEngine, it’s a good idea to enable Client and Resource Hints — they are essentially additional bits of information which could be used to further enhance the user experience.

Reap Rewards!

Website speed is crucial to success no matter what kind of business you’re in. Images comprise the bulk of almost any Magneto shop’s payload. While the easiest way to achieve nimble load times is to reduce the amount of media transferred, we cannot simply stop delivering images to smartphones as they’ve proven to increase conversion rates.

By the same token, failing to optimize images degrades the user experience, which negatively impacts the bottom line. No online retailer wants that. ImageEngine can help you reduce the painful strain imposed on a shopper’s connection by hefty, unoptimized images while driving conversion, engagement, and SEO metrics upward.

Put ImageEngine image CDN to test for free and observe the positive impact it brings with your own eyes.

--

--

Jon Arne S.
ImageEngine

Making the web mobile ✩Entrepreneur ✩ VP at @ScientiaMobile ✩ Tweets about mobile ✩ Techie ✩ Mantra: Do it different and do it well!