How understanding the user experience can help web developers in managing images effectively
Online experiences have in many ways supplanted in-person experiences. Today, no one would hesitate to buy a luxury watch online instead of from a jewelry brick-and-mortar store. But as these online experiences become the norm, user expectations for a seamless and “in-person like” customer journey have increased as well. When customers buy that watch, they expect to see every gleam of precious metal and stone that proves its worth before they add it to their shopping cart. This can only happen with the highest quality visual imagery that kindles an emotional connection.
But getting these high-quality images from the photographer’s camera to the shopper is a bigger challenge than most understand. Web development teams often receive raw photographs in obscure formats, or high-resolution files designed to preserve image quality to nearly microscopic detail; but these files will undoubtedly impact site performance due to sheer size.
Speed and quality are often at odds in the web development process as companies embrace the need to provide richer and richer online experiences. Web developers need to master the best ways to deliver site performance while balancing marketing needs.
Optimizations Based on User Experience
Developers need to understand how image optimization can impact the user experience. No one disputes the goal of delivering images with the best quality possible to end users, but the part that is challenging is how subjective and wide the range of “best quality possible” can be.
First, it’s important to note that quality can vary depending on whether a content delivery network (CDN) is used to deliver images, the connection speed and device used. For example, an overclocked gaming desktop with a hardwired, high-speed internet connection with images served from local servers is going to provide a drastically different experience than a smartphone overdue for an upgrade on a roaming signal. Also, delivering desktop images to mobile devices can result in site latency and user frustration due to over downloading. On the flip side, delivering images intended for mobile devices to desktops will result in pixelated images that will displease viewers.
As for devices, different screen sizes mean different viewing experiences. A wide shot on a website viewed on a computer screen will show more detail than a 2-by-5-inch phone. For example, a scenic shot of a hotel with a beach in the background may clearly show the hotel name on a computer screen but be too small to make out on a mobile device. But since more and more people are using mobile devices to access digital content, it will benefit web development teams to ensure images serve their intended purpose with focus points and zoom capabilities.
Delivering Based on Insight
Once developers know their objectives in terms of user experience, they need a plan to deliver this experience at the highest possible quality. As mentioned above, the highest quality image does not necessarily translate into the highest quality experience; therefore, it’s important for developers to configure their delivery systems according to varying user needs. Developers can start by collecting accurate information about their users and how they access content. In addition to network conditions and screen size, the user experience can be impacted by what browser, operating system and device visitors are using. Collecting real user data can provide the insight needed to deliver the right quality and size image to the right user.
To make matters more complex, many browsers and device environments have native image formats that differ from standard formats such as .png or .jpg. For example, Apple computers and devices support JPEG 2000, while Microsoft has a proprietary format called JPEG XR. These formats offer better image compression for delivery, meaning that web teams can use higher quality images without sacrificing faster load time or bandwidth. However, the fact that they are limited to specific environments requires web teams to create all the variant derivatives, store multiple copies and develop the logic to deliver the correct format to the appropriate browser and operating system.
Automation All Day, Every Day
Web teams and developers can benefit from automating their image optimization decisions given the challenges they face when delivering images, such as various combination of internet speed, screen size, device performance, operating systems and browsers. Automation to CDN cloud providers can also offload the decision-making logic (which can be CPU heavy) away from the main server, speeding up overall response times.
Developers also need visibility into how images load and display on user devices. This means their job is not done after delivery. Having this level of insight will help identify bottlenecks and prioritize images for optimization. Automation services that have this option will be best positioned to help web teams.
Web developers are faced with increasing pressure to meet aggressive marketing priorities. Quality and performance may seem at odds, but by taking stock of all factors that go into image requirements, web teams and developers can build websites that deliver stunning image-driven user experiences without sacrificing quality.
