High Performance Images

Chapter 14. Operationalizing Your Image Workflow

Mike McCall

Now that you know all about what makes fast, responsive images, let’s figure out how we can get them into your workflow and onto your site.

If there’s one thing that’s consistent about nearly all imagery that exists on the Internet, it’s that each image started as something completely inappropriate to display on the Web. We call these images our master images, and they’re the reference image each derivative image—the image that actually shows up on your site—is generated from. How one gets from the master to derivative image varies from one site to the next, but there are often common workflows that exist, usually within certain market verticals.

Some Use Cases

To expand on the concepts of master and derivative images further, let’s dig into a couple of use cases to see how master images are created, and how they can sometimes be a huge (in more than one sense of the word) problem for your high-performance image workflow.

The e-Commerce Site

Let’s start by imagining an e-commerce site, filled with a catalog of thousands of products, each product containing shots from multiple angles with numerous color variations. We can also imagine our fictitious e-commerce site has large hero imagery that serves as a section heading, and might contain photos of the products being worn or sale items.

It’s safe to assume that each and every one of these photographs was taken at a studio, with a high-end DSLR camera. While the images ...