High-quality images have an amazing power of attraction. Just add some stunning photos and graphics to your website or app and watch your user engagement and conversion numbers climb. It can be tricky, but with this practical guide, you’ll master the many facets of delivering high performance images on the internet—without adversely affecting site performance.
You’ll learn the nuts and bolts of color theory, image formats, storage and management, operations delivery, browser and application behavior, the responsive web, and many other topics. Ideal for developers, this book also provides useful tips, tricks, and practical theory for processing and displaying powerful images that won’t slow down your online product.
Explore digital image theory and the different formats available
Dive into JPEGs, SVG and vector images, lossless compression, and other formats
Use techniques for downloading and rendering images in a browser, and for loading images on mobile devices and cellular networks
Examine specific rendering techniques, such as lazy loading, image processing, image consolidation, and responsive images
Take responsive images to the next level by using content negotiation between browser and server with the Client Hints HTTP standard
Learn how to operationalize your image workflow
Contributors include Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle, and Mike McCall from Akamai Technologies.
Chapter 1The Case for Performance
What About Mobile Apps?
Do Images Impact the Speed of Websites?
Image Files and Formats
Chapter 2The Theory Behind Digital Images
Digital Image Basics
Chapter 3Lossless Image Formats
GIF (It’s Pronounced “GIF”)
Transparency with GIF
LZW, or the Rise and Fall of the GIF
The PNG File Format
Understanding the Mechanics of the PNG Format
Transparency with PNG
There Can Be Only One!
The JPEG Format
Chapter 5Browser-Specific Formats
Chapter 6SVG and Vector Images
The Trouble with Raster Formats
What Is a Vector Image?
Getting into Shape
Automating Optimization Through Tooling
Chapter 7Browser Image Loading
When Are Images Downloaded?
Chapter 8Lazy Loading
The Digital Fold
Wasteful Image Downloads
Why Aren’t Browsers Dealing with This?
When Are Images Loaded?
Lazy Loading Variations
Chapter 9Image Processing
Chapter 10Image Consolidation (for Network and Cache Efficiencies)
Vector Image Consolidation
Chapter 11Responsive Images
How RWD Started
Standard Responsive Images
Are Responsive Images “Done”?
Responsive Image File Formats
Chapter 12Client Hints
Client Hint Components
Legacy Support and Device Characteristics
Chapter 13Image Delivery
Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
Achieving Cache Offload: Vary and Cache-Control
Single URL Versus Multiple URLs
File Storage, Backup, and Disaster Recovery
Domain Sharding and HTTP2
Secure Image Delivery
Chapter 14Operationalizing Your Image Workflow
Some Use Cases
Business Logic and Watermarking
High Volume, High Performance Images
So…What Do I Do Again?
Optimize for the Mobile Experience
Optimize for the Different “Users”
Appendix Raster Image Formats
Appendix Common Tools
Animated GIF Utilities
Appendix 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
Colin Bendell is part of Akamai’s CTO Office, where he focuses on web performance. He speaks to global audiences about images, mobile, and web development while also trying to imagine six impossible things before breakfast. Colin has a Masters degreein Business and has worked in a variety of industries, including roles in software development for real estate to managing the Infrastructure and Operations for Cameco, the worlds largest uranium mining company. He is also an accomplished entrepreneur and former owner of KelvinsWheel, an automotive wheel repair shop.His musings and writings can be found at http://bendell.ca.
Tim is the head of developer relations at Snyk—a company focused on making open code source more secure. Prior to that, he was a developer advocate at Akamai. He is the author of Implementing Responsive Design: Building sites for an anywhere, everywhere web, and was a contributing author for Smashing Book #4: New Perspectives on Web Design, and the Web Performance Daybook Volume 2. Along with Katie Kovalcin, he also co-hosts The Path to Performance Podcast.
Yoav Weiss has been working on mobile web performance for longer than he cares to admit. He takes image bloat on the web as a personal insult, which is why he joined the Responsive Image Community Group and implemented the various responsiveimages features in Blink and WebKit. Yoav is now working at Akamai as a Principal Architect, focused on making the web platform faster by adding performance-related features to browsers, as well as working on server-side optimizations. When he’s not writing code, Yoav is probably slapping his bass, mowing the lawn in the French countryside, or playing board games with his family.
Guy Podjarny (@guypod) is a web researcher and entrepreneur, constantly aiming to make the web faster and safer. Guy is currently cofounder at Snyk.io, focusing on securing open source code. He was previously CTO at Akamai and founder of Blaze.io (acquired by Akamai). Prior to that, Guy led dev and product for the first web app firewall and security code analyzer. Guy is a frequent conference speaker, theauthor of Responsive & Fast (O’Reilly 2014), and the creator of Mobitest, a mobile performance testing agent.
Nick Doyle is a software developer at Akamai on the Image Manager team, focusing on image transformations and optimizations. Previously, he worked on the Front End Optimization product with Blaze and Akamai, working on optimization developmentand web performance. Before Blaze, he worked with IBM on their Java Virtual Machine. When not optimizing the internet, Nick makes noise with modular synthesizers; sometimes it even sounds like music.
Mike McCall is a Product Architect at Akamai Technologies’ Web Division, focusing on the development and management of image products. Mike has experience in indepth performance analysis of a variety of environments, ranging from large-scale distributed systems to website end-user experience. He is well-versed in writingscripts or using SQL for data analysis, and more recently using technologies like Hadoop MapReduce and HBase to dig deep into data. Mike has previous experience in large-scale systems administration on Linux and UNIX platforms and systems administration team management.
The animal on the cover of High Performance Images is a brown hare (Lepus europaeus). It is part of the Leporidae family and can be found in Europe and parts of central and western Asia. It is also known as the European hare.
As with deer, male brown hares are known as bucks and females as does. Both males and females look alike, with body mass ranging between 5.5 and 15 pounds. They are larger than the rabbits they often get confused with, and have head and body lengths between 19 and 30 inches. Another giveaway that they're hares and not rabbits are the black tips on their ears and tails (the ears have an average length of about 4 inches). They are a rustic brown color on their backs and shoulders, with white undersides. In the winter, areas of the head and base of the ears develop white areas as well.
Brown hares are herbivores and eat various grasses and shrubs. With agriculture taking over much of their habitat, though, they are also known to eat farm crops in their foraging groups. In the winter season when grass and shrubs are bare, they will eat the bark of shrubs and buds of fruit trees. They also resort to eating their own pellet feces in order to retain protein and vitamins.
Breeding season for brown hares lasts for more than half the year, from January until August, but it isn't until March and April that females are able to carry more than one fetus to term. Once breeding is in full swing, females will carry around three or more fetuses, with gestation lasting up to 42 days. Females will give birth two to three times per year on average.
Many of the animals on O'Reilly covers are endangered; all of them are important to the world. To learn more about how you can help, go to animals.oreilly.com.
The cover image is from British Quadrupeds. The cover fonts are URW Typewriter and Guardian Sans. The text font is Adobe Minion Pro; the heading font is Adobe Myriad Condensed; and the code font is Dalton Maag's Ubuntu Mono.