Image Optimization (eBook)

Smashing ebooks

Images have always been a key part of the web. Our brains are able to interpret images much faster than text, which is why high-quality visuals drive conversions and user engagement.

That said, loading images efficiently at scale isn’t a little project for a quiet afternoon. It requires understanding of compression techniques, loading behavior, image decoding and image CDNs, adaptive media loading and caching.

This book will equip you with everything you need to know to optimize how you compress, serve and maintain images — boosting performance along the way.

About the eBook

Next to videos, images are the heaviest, most requested assets on the web. Some of the biggest size savings and performance improvements can come through a better image optimization strategy. The fewer bytes a browser has to fetch, the less competition there is for a user’s bandwidth, and the quicker that critical image can be displayed, along with page’s content.

With the new Smashing book, Addy Osmani provides a practical modern guide to delivering high-quality images on the web — from formats and compression to delivery and maintenance.

The book focuses on what matters: modern approaches to image compression and image delivery, practical tools and techniques to automate optimization, responsive images, current and emerging image formats, how browsers load, decode and render images, CDNs, lazy-loading, adaptive media loading and how to optimize for Core Web Vitals. Everything in one, single, 528-pages book. Download a free PDF sample (12MB).

Written by Addy Osmani. Illustrated by Espen Brunborg and Nadia Snopek. Reviewers and contributors include Milica Mihajlija, Colin Bendell, Kornel Lesiński, Estelle Weyl, Jeremy Wagner, Tim Kadlec, Nolan O’Brien, Pat Meenan, Kristofer Baxter, Henri (Helvetica) Brisard, Houssein Djirdeh, Una Kravets, Ilya Grigorik, Elle Osmani, Leena Sohoni, Katie Hempenius, Jon Sneyers, and Mathias Bynens.

The Humble <img> Element
Optimizing Image Quality
Comparing Image Formats
Color Management
Image Decoding Performance
Measuring Image Performance
JPEG
PNG
WebP
SVG
Responsive Images
Progressive Rendering Techniques
Optimizing Network Requests with Caching and …
Lazy-Loading Offscreen Images
Replacing Animated GIFs
Image Content Delivery Networks
HEIF and HEIC
AVIF
JPEG XL
Comparing New Image File Formats
Delivering Light Media Experiences with Data Saver
Optimize Images for Core Web Vitals
Twitter’s Image Pipeline (Case Study)

About the Author

Addy Osmani is an engineering manager working on Google Chrome. His team focuses on speed tools and frameworks, helping keep the web fast. Devoted to the open-source community, the projects Addy has contributed to include Lighthouse (an auditing tool for performance and web best practices), Workbox (libraries for offline-caching files using service workers), Yeoman (the web scaffolding tool), Critical (the critical-path CSS optimization tool), and TodoMVC. Addy is the author of the book Learning JavaScript Design Patterns.