Charles Choe, senior product marketing manager, Akamai
Whether online shoppers this holiday season will use a website to find the perfect “I love you” gift for their spouse or that one gift that all the relatives receive, the images used on the site need to send the right message. It all starts with hiring a professional photographer to take beautiful, vivid pictures that draw the perfect emotion; but getting photos from the camera to the shopper in all their dazzling detail without delay to the last-minute shopping frenzy takes several important steps.
The variables that impact user experience on retail websites are many. Great website design is part of it, but the design will not matter if users abandon sites before they load. Online retailers cannot afford to sacrifice either quality or speed as they compete with one another to get the most online visitors to fill their carts and check out.
For this reason, retail sales and marketing teams are putting more and more pressure on their web teams to deliver both visual quality and speed without compromise. It is important for these teams to be aligned at this stage, communicating clear business goals and priorities to their web and IT teams. Only after these objectives are clearly communicated will everyone understand how best to work together toward this common goal.
A picture is worth a thousand variables
Consumers often see websites from a single device; maybe two if they transition from mobile to desktop or vice versa. And when visiting a website, a single, pristine, detailed image can represent the product they intend to purchase, ideally delivered in milliseconds. The irony is that any retailer that actually sets up their web back-end under a model of delivering one pristine image will unfortunately create a poor user experience.
Retailers must account for all possible combinations of devices, connections, browsers, operating systems, resolution levels, and image formats, which also means creating all the various image derivatives to ensure the right version is sent to the right user. So while high-definition desktop monitors may display a pristine image properly, users with slow internet speeds may have sessions time out before the image is fully loaded. And if the image does load, users can still experience problems like vertically oriented screens erroneously cutting off edges, resolution problems or lost details from improper resizing.
Savvy retailers need to account for all these factors and work to ensure that they send the right image version with the fewest possible bytes for a consistent and seamless shopping experience.
It is also important to note that consumers are shopping more on mobile devices. Many are using mobile phones to comparison shop in stores (also called ‘showrooming’) or to make purchases during their commutes.
The growth of mobile makes delivering high-quality images to users more difficult for a couple reasons. First, web pages must be responsive and lightweight to accommodate the lower processing power of mobile devices and the uncertainty of wireless connections; pages that load instantly on a desktop may be painfully slow on a phone. Second, the constant introduction of new devices means that web teams need to accommodate countless screen sizes and breakpoints—from early generation 4-inch screens to the new iPhone XS Max with a 6.5-inch screen—and their respective resolution.
To meet these challenges, web teams need to find a way to deliver the maximum image quality for each and every device without sending unnecessary bytes that can cause over-downloading. The solution is to create derivative versions of each image that are tailored for every end user visiting the site. This is often done through server-side delivery logic, developed in-house or off-loaded to an automated solution.
Two-second rush delivery
Two-day shipping may be fast when it comes to package delivery, but e-commerce sites with two-minute loading speeds would be a laughing stock. Retailers often face challenges in getting their websites to load in two seconds or less for customers. Meeting this benchmark is essential for reducing bounce rates and increasing conversions. By taking into account the factors for picking the right image for the right user, retailers can upgrade their load times from embarrassing to delightful.
There are several key variables that retail marketing and web teams should consider when delivering high-quality images for engaging online shoppers.
- Quality: This is the measure of how much detail in the image gets sent to the end user. The same image can be reduced to a smaller number of pixels, without impacting visual fidelity, which can save on bytes. If the image is being viewed on a small screen or low-resolution monitor, the user will be unable to notice the difference.
- Format: Some browsers have their own unique image formats that differ from traditional file formats, like JPEG. These proprietary formats, like Microsoft’s JPEG XR and Google’s WebP, offer improved compression algorithms that provide high-quality images with fewer bytes, but only for their specific browser. This requires web teams to collect data on which browser each shopper is using to deliver the appropriate image format.
- Size: This involves delivering the appropriately-sized image depending on the orientation and size of the device screen. Web teams should also consider the various layouts, breakpoints, and resolution for each device. This is important because the user experience will vary depending on how images are delivered and their intended use. For example, having cropped images with strong focal points may be necessary to draw attention while on mobile devices; or sending the correct-sized image to mobile devices to avoid over-downloading of pixels (which leads to site latency).
Optimized images on your shopping list
Shoppers, whether making last-minute decisions on the go or methodically researching all their choices, need engaging online shopping experiences that are fast and visually accurate with high-quality images. Sacrificing either speed or quality can be detrimental in the fast-paced world of holiday shopping, but meeting both will result in happy shoppers and even happier retailers.
It takes a savvy web team and close collaboration with product and marketing teams to understand all the technical and business nuances of image optimization and delivery. But executing on the promise of quality without compromise will not only meet your customer expectations, it will exceed your holiday business goals. Understand how images—and all the variables that control them—contribute to the holiday shopping experience and you will find the key to customer satisfaction this holiday season.
Akamai provides content delivery network services to 354 of the Top 1000 online retailers in North America.