Contents
Preface xi
1. The Case for Performance 1
What About Mobile Apps? 4
Speed Matters 5
Do Images Impact the Speed of Websites? 7
Lingering Challenges 8
Digital Image Basics 12
Sampling 12
Image Data Representation 12
Color Spaces 13
Additive Versus Substractive 14
Color Profiles 20
Alpha Channel 21
Frequency Domain 22
Image Formats 22
Why Image-Specific Compression? 23
Raster Versus Vector 23
Lossy Versus Lossless Formats 23
Lossy Versus Lossless Compression 24
Prediction 24
Entropy Encoding 24
Relationship with Video Formats 25
Comparing Images 25
PSNR and MSE 26
SSIM 26
Butteraugli 27
Summary 27
GIF (It’s Pronounced “GIF”) 29
Block by Block 30
Animation 32
Transparency with GIF 33
LZW, or the Rise and Fall of the GIF 34
The PNG File Format 34
Understanding the Mechanics of the PNG Format 35
PNG Signature 35
Chunks 35
Filters 38
Interlacing 39
Image Formats 43
Transparency with PNG 44
There Can Be Only One! 45
Summary 45
History 47
The JPEG Format 48
Containers 48
Markers 48
Color Transformations 50
Subsampling 51
Entropy Coding 53
DCT 56
Progressive JPEGs 66
Unsupported Modes 69
JPEG Optimizations 70
Lossy 70
Lossless 70
MozJPEG 71
Summary 72
WebP 74
WebP Browser Support 74
WebP Details 75
WebP Tools 77
JPEG XR 77
JPEG XR Browser Support 77
JPEG XR Details 78
JPEG XR Tools 79
JPEG 2000 79
JPEG 2000 Browser Support 79
JPEG 2000 Details 80
JPEG 2000 Tools 82
Summary 82
The Trouble with Raster Formats 83
What Is a Vector Image? 84
SVG Fundamentals 85
The Grid 86
Understanding the Canvas 86
viewBox 87
Getting into Shape 90
Grouping Shapes Together 92
Filters 97
SVG Optimizations 102
Enabling GZip or Brotli 102
Reducing Complexity 103
Converting Text to Outlines 104
Automating Optimization Through Tooling 105
Installing the SVGO Node Tool 106
SVGOMG: The Better to See You With, My Dear 107
Pick Your Flavor 108
Summary 108
Referencing Images 111
<img> tag 112
CSS background-image 113
When Are Images Downloaded? 116
Building the Document Object Model 116
The Preloader 117
Networking Constraints and Prioritization 119
HTTP/2 Prioritization 121
CSSOM and Background Image Download 122
Service Workers and Image Decoding 123
Summary 123
The Digital Fold 127
Wasteful Image Downloads 127
Why Aren’t Browsers Dealing with This? 128
Loading Images with JavaScript 128
Deferred Loading 129
Lazy Loading/Images On Demand 130
IntersectionObserver 131
When Are Images Loaded? 132
The Preloader and Images 133
Lazy Loading Variations 136
Browsers Without JS 136
Low-Quality Image Placeholders 137
Critical Images 140
Summary 141
Decoding 143
Measuring 144
How Slow Can You Go? 150
Memory Footprint 150
GPU Decoding 152
Triggering GPU Decoding 155
Summary 155
The Problem 158
TCP Connections and Parallel Requests 158
Small Objects Impact the Connection Pool 160
Efficient Use of the Connection 161
Impact on Browser Cache: Metadata and Small Images 162
Small Objects Observed 164
Logographic Pages 164
Raster Consolidation 166
CSS Spriting 166
Data URIs 172
Vector Image Consolidation 178
Icon Fonts 178
SVG Sprites 185
Summary 190
How RWD Started 193
Early Hacks 194
Use Cases 195
Fixed-Dimensions Images 195
Variable-Dimensions Images 196
Art Direction 197
Art Direction Versus Resolution Switching 200
Image Formats 201
Avoiding “Download and Hide” 201
Use Cases Are Not Mutually Exclusive 201
Standard Responsive Images 203
srcset x Descriptor 203
srcset w Descriptor 204
<picture> 209
Serving Different Image Formats 213
Practical Advice 214
To Picturefill or Not to Picturefill, That Is the Question 214
Intrinsic Dimensions 215
Selection Algorithms 215
srcset Resource Selection May Change 216
Feature Detection 216
currentSrc 217
Client Hints 217
Are Responsive Images “Done”? 217
Background Images 217
Height Descriptors 218
Responsive Image File Formats 219
Progressive JPEG 219
JPEG 2000 220
Responsive Image Container 220
FLIF 220
Summary 220
Overview 222
Step 1: Initiate the Client Hints Exchange 223
Step 2: Opt-in and Subsequent Requests 223
Step 3: Informed Response 224
Client Hint Components 224
Viewport-Width 224
Device Pixel Ratio 225
Width 226
Downlink 227
Save-Data 228
Accept-CH 229
Content-DPR 229
Mobile Apps 233
Legacy Support and Device Characteristics 235
Fallback: “Precise Mode” with Device Characteristics + Cookies 236
Fallback: Good-Enough Approach 237
Selecting the Right Image Width 238
Summary 240
Image Dimensions 241
Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR 244
Image Quality 247
Quality and Image Byte Size 247
Quality Index and SSIM 249
Selecting SSIM and Quality Use Cases 253
Creating Consensus on Quality Index 254
Quality Index Conclusion 255
Achieving Cache Offload: Vary and Cache-Control 256
Informing the Client with Vary 256
Middle Boxes, Proxies with Cache-Control (and TLS) 257
CDNs and Vary and Cache-Control 258
Near Future: Key 260
Single URL Versus Multiple URLs 260
File Storage, Backup, and Disaster Recovery 261
Size on Disk 262
Cost of Metadata 263
Domain Sharding and HTTP2 264
How Do I Avoid Cache Busting and Redownloading? 267
How Many Shards Should I Use? 267
What Should I Do for HTTP/2? 267
Best Practices 270
Secure Image Delivery 270
Secure Transport of Images 270
Secure Transformation of Images 271
Secure Transformation: Architecture 273
Summary 275
Some Use Cases 277
The e-Commerce Site 277
The Social Media Site 278
The News Site 279
Business Logic and Watermarking 280
Hello, Images 281
Getting Started with a Derivative Image Workflow 282
ImageMagick 282
A Simple Derivative Image Workflow Using Bash 290
An Image Build System 293
A Build System Checklist 296
High Volume, High Performance Images 297
A Dynamic Image Server 297
15. Summary 301
So…What Do I Do Again? 302
Optimize for the Mobile Experience 302
Optimize for the Different “Users” 302
Creating Consensus 304
A. Raster Image Formats 305
B. Common Tools 307
C. Evolution of <img> 311
Index 323
Preface
Images are are one of the best ways to communicate. So it’s understandable that you might feel hoodwinked when you pick up a book filled with words discussing images.
Rest assured, you will not be let down. Images are everywhere on the Web—from user-generated content to product advertisement to journalism to security. The creation, design, layout, processing, and delivery of images are no longer the exclusive domain of creative teams. Images on the Web are everyone’s concern.
This book focuses on the essentials of what you need to deliver high performance images on the Internet. This is a very broad topic and covers many domains: color theory, image formats, storage and management, operations delivery, browser and application behavior, responsive web, and many topics in between. With this knowledge we hope that you can glean useful tips, tricks, and practical theory that will help you grow your business as you deliver high performance images.
Who Should Read This Book
We are software developers and wrote this book with developers in mind. Regardless of your role, if you find yourself responsible for any part of the life cycle of images, this book will be useful for you. It is intended to go both broad and deep, to give you background and context while also providing practical advice that will benefit your business.
What This Book Isn’t
There are a great number of subjects that this book will not cover. Specifically, it will avoid topics in the creative process and image editing. It is not about graphic design, image editing tools, or the ways to optimize scratch memory and disk usage. In fact, this book will likely be a disappointment if you are looking for any discussion around RAW formats or video editing. Perhaps that is an opportunity for another book.
Navigating This Book
There is a lot of ground to cover in the area of high performance images. Images are a complex topic, so we have organized the chapters into two major parts: foundations and loading. In the foundation chapters (Part I), we cover image theory and how that applies to the different image formats. Each chapter is designed to stand on its own, so with a little background knowledge you can easily jump from one section to another. In the Loading chapters (Part II), we cover the impacts of these formats on the browser, the device, and the network.
Why We Wrote This Book
Thinking about images always reminds me of a fishing trip where I met the most cantankerous marlin in the freshwater lakes of Northern Canada. The fish was so big that it took nearly 45 minutes of wrestling to bring it aboard my canoe. At times, I wondered if I was going to be dragged to the depths of the lake. It was a whopping 1.5 m long and weighed 35 kg!
Pictures! Or it never happened.
If I were you, I’d be skeptical of my claims. To be honest, even I don’t believe what I just wrote. I’ve never been fishing in my life! Not only that, but marlin live in the warmer Pacific Ocean, not the spring-fed lakes from the Atlantic Ocean. You are probably more likely to find a 35 kg beaver than a fish that size.
Images are at the core of storytelling, journalism, and advertising. We are good at retelling stories, but they can easily change from person to person. Remember the childhood game of “Telephone,” where one kid whispers a phrase to the next person around a circle? The phrase “high performance images” would undoubtedly be transformed to “baby fart fart” in a circle of eight-year-old boys. But if we include a photograph, then the story gains fidelity and is less likely to change. Images add credibility to our stories.
The challenge is always in creating and communicating imagery. The fishing story created an image in your mind using 369 characters. Gzipped, that’s 292 bytes for a mental image like the example in Figure P-1. But that image was just words and thus not reliable like the photo in Figure P-2.
