Optimize for the Mobile Experience

• Use WebP and JPEG 2000. Android and Chrome users can benefit from WebP; iOS and Safari users can benefit from JPEG 2000. Both provide superior byte savings (and feature capabilities) over JPEG. Finally, for desktop users, use MozJPEG.

• When using JPEG/WebP/JPEG 2000 images, take advantage of chroma subsampling. Chroma subsampling not only leads to reduced file sizes, but if you use 4:2:0 subsampling, it also allows browsers to make clever optimizations to reduce the impact on memory and CPU drain—important considerations, particularly in our increasingly mobile world.

• Send appropriately sized images to the browser. Sending images that are larger than needed is one of the most common, and most troublesome, mistakes made online. It makes the browser work harder and costs your users precious time and bytes. For bonus points, use a breakpoint budget of ~24 KB (16 packets) per breakpoint.

• Lazy-load images. We know that users may not scroll very far and many images “below the fold” may not be seen. Delaying download of these images saves bandwidth and helps improve the web performance. Images are one of the easiest resources for the browser preloader to discover and can compete with dynamically loaded content, including JavaScript and API calls.

Optimize for the Different “Users”

There isn’t just one user to consider for high performance images. It might be easy to assume that only the end consumer requirements need to be optimized. In reality, there are many “stakeholders”—each with different opinions and competing interests for high performance images. It isn’t just the end user experience that we have to manage.

• Users want fast, so optimize for the fewest bytes on the network and the fastest browser rendering.

  • Ideal state: Sending the smallest possible size of image for each port view and layout, using the best image formats, and using all the format-specific optimizations.

  • Reality: Users are a highly fragmented browser ecosystem, with different device sizes and variable network conditions that can result in hundreds of permutations (if not thousands) for each situation.

  • Action: Create performance budgets using groups of like-sized viewport ranges. Use the responsive images srcset and sizes HTML5 tags to let the browser pick the smallest image for the experience.

• Creative teams care about aesthetics, so optimize for the highest-quality possible.

  • Ideal state: High-resolution, high-DPR, lossless images. A web page or app should be pixel-perfect if you walk up to a 100-inch wall mount display.

  • Reality: The higher the quality, the larger the file size, which will negatively impact the user experience.

  • Action: Use SSIM to determine the lowest-quality index you can use in an image without the human eye noticing. If lossless is required, utilize newer formats such as WebP and JPEG 2000.

• Web and dev teams want flexibility to make changes to responsive layouts and art direction requirements easily without having to force reprocessing of an image library.

  • Ideal state: One image that CSS and JavaScript crops or scales to the necessary dimensions.

  • Reality: Using a “one size fits all” approach will serve the lowest common denominator, which will be targeted to the desktop and large monitor experience.

  • Action: Use HTML5 responsive images tags to support art direction (<picture> and <source>) and eliminate the need for client-side JavaScript.

• Operations, infrastructure, and security teams want fewer image files to back up and are concerned about long-running reprocessing jobs. They are also concerned with how to ensure that transforming images doesn’t create other security vulnerabilities.

  • Ideal state: No images, or just one image per product.

  • Reality: Images need to be resized, cropped, and watermarked. Unchecked, this can create many terabytes of data to back up and security concerns as images are transformed and manipulated.

  • Action: Eliminate raster images and use vector (SVG) images wherever possible. Plan ahead and inform infrastructure of breakpoint requirements—strike a balance of storage requirements, disaster recovery requirements, and breakpoint volume. Finally, create a secure sandbox for any image transformation service to ensure that optimizing images doesn’t create an enterprise vulnerability.

Creating Consensus

Images are awesome. There is no doubt that high performance images improve usability, reputation, and brand. There are many strategies, approaches, and opinions, but there is no silver bullet.

The best way to create consensus is to experience, firsthand, the pain and the benefit of high performance images. There are two strategies:

• Re-create the experience. Start with a histogram of performance experience and create a persona representing why a user is at that part of the curve. How do these users differ? Is the variation because of mobile hardware, screen size, CPU/RAM, network latency, or bandwidth? Finally, re-create these user experiences so that stakeholders and managers can experience that user. Either use real hardware so that everyone has an authentic experience, or create side-by-side videos of the experience using tools like WebPageTest.org.

• Visualize the results: you don’t necessarily have to go to the full length of acquiring hardware and slowing down browser rendering. You can also show side-by-side comparisons of the output. Show how different sizes, formats, and other optimizations do not degrade the experience. This will demonstrate that you can preserve the experience while improving operations, performance, and other metrics.

With these strategies, together, we can make high performance images.