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 (), 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, Id be skeptical of my claims. To be honest, even I dont believe what I just wrote. Ive 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 re-telling 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, thats 292 bytes for a mental image like the example in .
Figure P-1. 292 bytes to create an image in your minds eye
Figure P-2. In contrast, the photograph is 2.4 MB, which reveals my fraud (not me, not Canada, somewhere warm)
Words can conjure images fast but are very prone to corruption and low fidelity. Unless you know something about marlins, the geography of Northern Canada, or my angling expertise, you cant really grasp how fishy my story sounds. To get that detail you have to ask questions, questions that take time to send. To develop a high quality image in your mind, you need more time (see ).
If only there were a more efficient way to communicate imagesa way to communicate with high performance, if you will.
Figure P-3. How much time it takes to communicate image fidelity: graphical, written, and verbal
Historically, creating images and graphics was hard. Cave paintings require specialized mixtures of substances and are prone to fading and washing away. You certainly wouldnt want to waste your efforts creating a cave painting of a cat playing a piano! Over the last century, photography has certainly made images cheaper and less laborious to produce. Yet, with each advance in image creation, we have increased the challenge of transmission. Just think of the complexity of adding images to a book prior to modern software. Printing an image involved creating plates that were inked separately for each color used and then pressed one at a time on the same pagevery inefficient!
With ubiquitous smartphones equipped with high-quality cameras, we can take high-resolution images in mere milliseconds. And yet, despite this ease, it is still challenging to send and receive photos. The problem is thatdespite the facts that our screen displays are high resolution and have high pixel density ratios; our websites and applications have richer content; our cameras are capable of taking high-quality photographs; and our image libraries have grownit feels as though our ISPs and mobile networks cannot keep up with the insatiable user demands for data.