Image Optimization, Explained: A New Smashing Book by Addy Osmani

Images remain the heaviest and most frequently requested assets on the web, second only to video. For most sites, the biggest performance wins come from a disciplined image optimization strategy. Yet doing this well at scale demands knowledge that spans far beyond resizing a few files—it touches encoding, rendering behavior, delivery, and long-term maintenance.

To unpack that territory, Smashing Magazine has teamed up with Addy Osmani, an engineering manager on Google Chrome with years of web performance experience. The result is Image Optimization, a 528-page guide that walks through the full lifecycle of web images: choosing the right format, compressing effectively, automating the workflow, and serving images under real-world network conditions.

Image Optimization

What the Book Covers

The book focuses on reproducible, practical workflows. It covers the fundamentals of file formats and compression before moving into how browsers actually retrieve, decode, and paint images on screen. It also examines tools and techniques for automating optimization, the ins and outs of responsive images, and how to make smarter calls on lazy-loading and progressive rendering.

A significant portion of the material centers on the newer generation of formats—AVIF, JPEG XL, HEIF/HEIC, and WebP—detailing their trade-offs, browser support, and when each makes sense. There's also dedicated coverage of Core Web Vitals, helping developers understand exactly which metrics their image decisions affect. On the infrastructure side, the book gets into image CDNs, caching strategies, preloading, and how to set up adaptive delivery based on a user's network conditions.

We are so happy, excited, humbled and honored to publish Addy Osmani's new book. A few words from Addy himself about the book.

Chapter Line-Up

The book is organized into 23 chapters that progress logically, starting with the basics and moving into specialized case studies:

  • Foundations: The modern img element, quality settings and compression trade-offs, comparing formats, and color management.
  • Performance principles: Decoding performance, measuring image performance with Lighthouse, and Core Web Vitals optimization.
  • Core formats: Dedicated deep dives on JPEG, PNG, WebP, and SVG, including compression modes and practical production tips.
  • Responsive and progressive: Responsive image markup, progressive rendering and loading techniques, replacing animated GIFs, and lazy-loading offscreen images.
  • Network strategy: Caching, preloading, service workers, and how to set up an image CDN.
  • Emerging formats: Detailed sections on HEIF/HEIC, AVIF, JPEG XL, and a comparison of the new file formats and their strengths.
  • Special topics: Leveraging Data Saver for lighter media experiences and a case study on Twitter's image pipeline.
Image Optimization
Meet our new book “Image Optimization” with everything you need to know to get images on the web right.

Audience and Format

Whether you're just starting to make your images lean or need tighter control over a large-scale delivery pipeline, the text emphasizes strategies that hold up over time, not just quick fixes for the next release. The book's sister publication for Smashing's series, "Image Optimization" by Osmani, is available as an immediate eBook download (PDF, ePUB, and Kindle) or as a hardcover print edition with free worldwide shipping.

Illustrations by Espen Brunborg and Nadia Snopek accompany the material. The book can be purchased as a standalone title or as part of a Smashing Membership.