The Challenge
Word and image are the original power couple; together, they turn heads and leave a lasting impression. What happens when you make it easy to pair them up? Exposure.co is finding out by creating a community where photographers, storytellers, and organizations can combine high-resolution images and text into beautiful stories that are greater than the sum of their parts. Clients such as Filson, WWF, and charity:water are using the site to expand their reach and engage audiences directly through imagery.
Focusing on photography in the responsive design era presents several problems, however. Incoming images are large and need to be displayed in a variety of sizes to avoid long download times, given device constraints. Exposure’s photo grid feature, “the lifeblood of the product,” added another level of complexity, according to developer Kyle Bragger.
“The grid is redrawn if the browser is resized or device orientation changes, etc., so we might potentially serve dozens of different sizes of the same Origin Image. Handling that would be nearly impossible without some kind of on-the-fly image resizing service.”
As a lean two-person team, Bragger and co-founder Luke Beard were also concerned about incurring a huge hosting bill for all of the derivative images required by the design. As they built out the site, they looked to imgix to reduce this potential cost.
The Solution
Because they were aware of imgix’s capabilities before they created Exposure, the team was able to simplify their image pipeline up front. Users upload Origin Images for their stories directly into an Amazon S3 repository, which Exposure connected to imgix. As photos are viewed on the site, Exposure requests the resized derivative images (an average of seven per Origin Image) from imgix, which creates and then caches them for later re-use. Only the Origin Images incur storage costs, and derivatives only incur bandwidth charges when they are requested for an actual page view.
“Images literally never touch our application servers. Replicating and scaling imgix would be something we’d need to get competitive pricing on, given how much image bandwidth we serve. Instead, we concentrate on building the core product, rather than infrastructure someone else already nailed.”
By architecting the site to use imgix from the beginning, Exposure has been able to take advantage of best practices right away. To keep more image sizes cached, they create derivative images in increments of 100 pixels, and then adjust to the exact size needed from these smaller versions. Along with automatic content negotiation to convert to image formats with better compression, this allows for complete flexibility in the design and much faster page load times for readers.
The Results
With over 15,000 new images uploaded to Exposure each week, imgix helps the team scale demand and add new features without a corresponding cost in infrastructure or engineering for image processing.
“We don’t worry about photo infrastructure. It just works. And, we get all new performance enhancements for free, like Progressive JPEG and WebP. It’s good to stick to what you're really good at; we know photo storytelling and community, imgix knows image processing and performance.”
Bragger and Beard are keeping the team small while continuing to expand into brand storytelling and other community features. By trusting the complexity of their image processing to imgix, Exposure’s ability to create new and innovative ways to present photo narratives is only limited by their and their customers’ imaginations, not the size of the team.
