Automating resource selection with Client Hints

Building for the web gives you unparalleled reach. Your web application is a click away and available on most every connected device—smartphone, tablet, laptop and desktop, TV, and more—regardless of the brand or the platform. To deliver the best experience you’ve built a responsive site that adapts the presentation and functionality for each form-factor, and now you’re running down your performance checklist to ensure that the application loads as quickly as possible: you’ve optimized your critical rendering path, you’ve compressed and cached your text resources, and now you’re looking at your image resources, which often account for majority of transferred bytes. Problem is, image optimization is hard: Determine the appropriate format (vector vs. raster) Determine the optimal encoding formats (jpeg, webp, etc.) Determine the right compression settings (lossy vs. lossless) Determine which metadata should be kept or stripped Make multiple variants of each for each display + DPR resolution … Account for user’s network type, speed, and preferences Individually, these are well-understood problems. Collectively, they create a large optimization space that we (the developers) often overlook or neglect—“ain’t nobody got time fo that”. Humans do a poor job of exploring the same search space repetitively, especially when many steps are involved. Computers, on the other hand, excel at these types of tasks. The answer to a good and sustainable optimization strategy for images, and other resources with similar properties is simple: automation. If you’re hand-tuning your resources, you’re doing it wrong: you’ll forget, you’ll get lazy, or someone else will make these mistake for you—guaranteed.