High Performance Images SHRINK, LOAD, AND DELIVER IMAGES FOR SPEED Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle & Mike McCall High Performance Images Shrink, Load, and Deliver Images for Speed Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle, and Mike McCall Beijing Boston Farnham Sebastopol Tokyo High Performance Images by Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle, and Mike McCall Copyright © 2016 Akamai Technologies All rights reserved Printed in the United States of America Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 O’Reilly books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles (http://safaribooksonline.com) For more information, contact our corporate/ institutional sales department: 800-998-9938 or corporate@oreilly.com Editor: Brian Anderson Production Editor: Shiny Kalapurakkel Copyeditor: Rachel Monaghan Proofreader: Charles Roumeliotis August 2016: Indexer: Judy McConville Interior Designer: David Futato Cover Designer: Karen Montgomery Illustrator: Rebecca Demarest First Edition Revision History for the First Edition 2016-08-25: First Release 2016-10-31: Second Release See http://oreilly.com/catalog/errata.csp?isbn=9781491925805 for release details The O’Reilly logo is a registered trademark of O’Reilly Media, Inc High Performance Images, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc While the publisher and the authors have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the authors disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work Use of the information and instructions contained in this work is at your own risk If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights 978-1-491-92580-5 [LSI] Table of Contents Preface xi The Case for Performance What About Mobile Apps? Speed Matters Do Images Impact the Speed of Websites? Lingering Challenges Part I Image Files and Formats The Theory Behind Digital Images 11 Digital Image Basics Sampling Image Data Representation Color Spaces Additive Versus Substractive Color Profiles Alpha Channel Frequency Domain Image Formats Why Image-Specific Compression? Raster Versus Vector Lossy Versus Lossless Formats Lossy Versus Lossless Compression Prediction Entropy Encoding Relationship with Video Formats Comparing Images PSNR and MSE 12 12 12 13 14 20 21 22 22 23 23 23 24 24 24 25 25 26 iii SSIM Butteraugli Summary 26 27 27 Lossless Image Formats 29 GIF (It’s Pronounced “GIF”) Block by Block Animation Transparency with GIF LZW, or the Rise and Fall of the GIF The PNG File Format Understanding the Mechanics of the PNG Format PNG Signature Chunks Filters Interlacing Image Formats Transparency with PNG There Can Be Only One! Summary 29 30 32 33 34 34 35 35 35 38 39 43 44 45 45 JPEG 47 History The JPEG Format Containers Markers Color Transformations Subsampling Entropy Coding DCT Progressive JPEGs Unsupported Modes JPEG Optimizations Lossy Lossless MozJPEG Summary 47 48 48 48 50 51 53 56 66 69 70 70 70 71 72 Browser-Specific Formats 73 WebP WebP Browser Support WebP Details iv | Table of Contents 74 74 75 WebP Tools JPEG XR JPEG XR Browser Support JPEG XR Details JPEG XR Tools JPEG 2000 JPEG 2000 Browser Support JPEG 2000 Details JPEG 2000 Tools Summary 77 77 77 78 79 79 79 80 82 82 SVG and Vector Images 83 The Trouble with Raster Formats What Is a Vector Image? SVG Fundamentals The Grid Understanding the Canvas viewBox Getting into Shape Grouping Shapes Together Filters SVG Optimizations Enabling GZip or Brotli Reducing Complexity Converting Text to Outlines Automating Optimization Through Tooling Installing the SVGO Node Tool SVGOMG: The Better to See You With, My Dear Pick Your Flavor Summary Part II 83 84 85 86 86 87 90 92 97 102 102 103 104 105 106 107 108 108 Image Loading Browser Image Loading 111 Referencing Images tag CSS background-image When Are Images Downloaded? Building the Document Object Model The Preloader Networking Constraints and Prioritization 111 112 113 116 116 117 119 Table of Contents | v HTTP/2 Prioritization CSSOM and Background Image Download Service Workers and Image Decoding Summary 121 122 123 123 Lazy Loading 125 The Digital Fold Wasteful Image Downloads Why Aren’t Browsers Dealing with This? Loading Images with JavaScript Deferred Loading Lazy Loading/Images On Demand IntersectionObserver When Are Images Loaded? The Preloader and Images Lazy Loading Variations Browsers Without JS Low-Quality Image Placeholders Critical Images Summary 127 127 128 128 129 130 131 132 133 136 136 137 140 141 Image Processing 143 Decoding Measuring How Slow Can You Go? Memory Footprint GPU Decoding Triggering GPU Decoding Summary 143 144 150 150 152 155 155 10 Image Consolidation (for Network and Cache Efficiencies) 157 The Problem TCP Connections and Parallel Requests Small Objects Impact the Connection Pool Efficient Use of the Connection Impact on Browser Cache: Metadata and Small Images Small Objects Observed Logographic Pages Raster Consolidation CSS Spriting Data URIs Vector Image Consolidation vi | Table of Contents 158 158 160 161 162 164 164 166 166 172 178 Icon Fonts SVG Sprites Summary 178 185 190 11 Responsive Images 193 How RWD Started Early Hacks Use Cases Fixed-Dimensions Images Variable-Dimensions Images Art Direction Art Direction Versus Resolution Switching Image Formats Avoiding “Download and Hide” Use Cases Are Not Mutually Exclusive Standard Responsive Images srcset x Descriptor srcset w Descriptor Serving Different Image Formats Practical Advice To Picturefill or Not to Picturefill, That Is the Question Intrinsic Dimensions Selection Algorithms srcset Resource Selection May Change Feature Detection currentSrc Client Hints Are Responsive Images “Done”? Background Images Height Descriptors Responsive Image File Formats Progressive JPEG JPEG 2000 Responsive Image Container FLIF Summary 193 194 195 195 196 197 200 201 201 201 203 203 204 209 213 214 214 215 215 216 216 217 217 217 217 218 219 219 220 220 220 220 12 Client Hints 221 Overview Step 1: Initiate the Client Hints Exchange Step 2: Opt-in and Subsequent Requests 222 223 223 Table of Contents | vii Step 3: Informed Response Client Hint Components Viewport-Width Device Pixel Ratio Width Downlink Save-Data Accept-CH Content-DPR Mobile Apps Legacy Support and Device Characteristics Fallback: “Precise Mode” with Device Characteristics + Cookies Fallback: Good-Enough Approach Selecting the Right Image Width Summary 224 224 224 225 226 227 228 229 229 233 235 236 237 238 240 13 Image Delivery 241 Image Dimensions Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR Image Quality Quality and Image Byte Size Quality Index and SSIM Selecting SSIM and Quality Use Cases Creating Consensus on Quality Index Quality Index Conclusion Achieving Cache Offload: Vary and Cache-Control Informing the Client with Vary Middle Boxes, Proxies with Cache-Control (and TLS) CDNs and Vary and Cache-Control Near Future: Key Single URL Versus Multiple URLs File Storage, Backup, and Disaster Recovery Size on Disk Cost of Metadata Domain Sharding and HTTP2 How Do I Avoid Cache Busting and Redownloading? How Many Shards Should I Use? What Should I Do for HTTP/2? Best Practices Secure Image Delivery Secure Transport of Images Secure Transformation of Images viii | Table of Contents 241 244 247 247 249 253 254 255 256 256 257 258 260 260 261 262 263 264 267 267 267 270 270 270 271 ... transmit images This is where we start: no more fish tales We begin with the question of how we communicate and present images and graphics to a user with high performance This book is about high performance. .. High Performance Images Shrink, Load, and Deliver Images for Speed Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle, and Mike McCall Beijing Boston Farnham Sebastopol Tokyo High. .. Without high performance images, how would we share cultural memes like the blue and white (or was that gold and black?) dress or share the unsettling reality of the Arab Spring? We need high performance