High-performance images: Choose your own adventure

Description

Images are an important part of the user experience for the Web and apps alike. However, images are no longer simple. There are many strategies for optimizing images: new image formats, responsive image markup, client hints, chroma subsampling, structural similarity, HTTP/2 priorities, progressive encoding, and more. Each of these strategies improves the end-user experience but can add new complexities to creating maintaining and monitoring the enterprise.

It isn’t just the end consumer that needs high-performance images; other competing users need to be considered, including marketing, devs, operations, and security. These users all have different requirements and expectations:

• Users not only prefer images over text but want images that load quickly on their devices (without eating up cell data).
• Marketing teams want high-quality, fantastic-looking images to promote their brand and products.
• The web teams want to quickly iterate over the frontend and adjust image requirements for responsive web layouts.
• Operations and infrastructure want highly cacheable, limited file footprints and a small disaster-recovery window.
• Security wants to make sure that each image transformed isn’t creating a backdoor vulnerability for “bad guys.”

Sometimes promoting one set of performance improvements feels like a Faustian bargain, where some users are benefiting more than others. In this practical, Choose Your Own Adventure-style tutorial, Colin Bendell tries to find the perfect balance for all users, offering a practical guide that explores different strategies and outlines recommendations to address each of the different user profiles.