High Performance Images by Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle -- Read -- Imperial Library of Trantor

Index

Preface

Who Should Read This Book What This Book Isn’t Navigating This Book Why We Wrote This Book Acknowledgments Conventions Used in This Book Using Code Examples Safari® Books Online How to Contact Us

1. The Case for Performance

What About Mobile Apps? Speed Matters Do Images Impact the Speed of Websites? Lingering Challenges

I. Image Files and Formats 2. The Theory Behind Digital Images

Digital Image Basics

Sampling Image Data Representation Color Spaces Additive Versus Substractive

RGB (red, green, and blue) CMYK (cyan, magenta, yellow, and key) YCbCr YCgCo Bit depth Encoders and decoders

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 SSIM Butteraugli

Summary

3. Lossless Image Formats

GIF (It’s Pronounced “GIF”)

Block by Block

Header block Logical screen descriptor But wait, there’s more!

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

Ancillary and critical chunks

Filters Interlacing

Image Formats Transparency with PNG There Can Be Only One! Summary

4. JPEG

History The JPEG Format

Containers Markers Color Transformations Subsampling Entropy Coding

Arithmetic encoding to the rescue!

DCT

How does DCT work? How does DCT do its magic? Minimal coding units Quantization Compression levels Dropping zeros Dequantization Lossy by nature

Progressive JPEGs Unsupported Modes

Hierarchical mode Lossless mode

JPEG Optimizations

Lossy Lossless

MozJPEG Summary

5. Browser-Specific Formats

WebP

WebP Browser Support WebP Details 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

6. SVG and Vector Images

The Trouble with Raster Formats What Is a Vector Image? SVG Fundamentals

The Grid Understanding the Canvas viewBox

Getting into Shape

Grouping Shapes Together

The <g> element The use element The defs element The symbol element

Filters

Applying filters Performance concerns The wrong way to do 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

II. Image Loading 7. Browser Image Loading

Referencing Images

<img> tag CSS background-image

File structure Accessibility

When Are Images Downloaded?

Building the Document Object Model The Preloader Networking Constraints and Prioritization HTTP/2 Prioritization CSSOM and Background Image Download Service Workers and Image Decoding

Summary

8. Lazy Loading

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

9. Image Processing

Decoding

Measuring

Chrome Chrome on mobile devices Edge Firefox and Safari

How Slow Can You Go? Memory Footprint

GPU Decoding

Triggering GPU Decoding

Summary

10. Image Consolidation (for Network and Cache Efficiencies)

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

Creating CSS sprites Merging images Creating CSS styles Adding HTML markup Automating to avoid image and link rot Drawbacks and shortcomings

Data URIs

Considerations Better: Deferred data URI stylesheet Tools

Vector Image Consolidation

Icon Fonts

Overview Creating and using icon web fonts Compatibility Web font pros and cons

SVG Sprites

SVG fragment identifier links Fragment identifiers and viewBox Automating SVG consolidation and fallback

Summary

11. Responsive Images

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 <picture> 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

12. Client Hints

Overview

Step 1: Initiate the Client Hints Exchange Step 2: Opt-in and Subsequent Requests 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

13. Image Delivery

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 Secure Transformation: Architecture

Summary

14. Operationalizing Your Image Workflow

Some Use Cases

The e-Commerce Site The Social Media Site The News Site

Business Logic and Watermarking Hello, Images

Getting Started with a Derivative Image Workflow ImageMagick A Simple Derivative Image Workflow Using Bash An Image Build System A Build System Checklist

High Volume, High Performance Images

A Dynamic Image Server

Parsing the request Downloading the master image Decoding the master image Transform! Encoding the derivative image

15. Summary

So…What Do I Do Again? Optimize for the Mobile Experience Optimize for the Different “Users” Creating Consensus

A. Raster Image Formats B. Common Tools

PNG Utilities JPEG Utilities Animated GIF Utilities GUI Utilities Exif Utilities

C. Evolution of <img>

1989: Inline Images, GIFs, and Patents 1995: HTML 2.0 and <img lowsrc> 2000: Dark Ages of Images—HTML 4.01, CSS, and the Status Quo 2007: Mobile! Mobile! Mobile! 2010: Responsive Web Design, Retina Displays, and Responsive Images 2014 Responsive Images HTML Spec New Image Formats 2015: Client Hints and Accepts

Index

← Prev
Back
Next →

← Prev
Back
Next →