The service powering Unsplash’s beautiful imagery
We’re big believers in outsourcing parts of our development stack to 3rd-party services.
Outsourcing our image transformation and delivery was probably the most controversial and important technical decision we’ve ever made.
As many developers know, there are few 3rd-party services that you don’t quickly come to regret.
Creating the right abstraction for a service is incredibly hard because simplicity and flexibility are usually at odds with each other. What is easy to setup on day one becomes extremely difficult to control for all the use cases you need on day 365.
In the case of Unsplash, photos are kind of our thing, so finding a service that would meet all of our needs should have been challenging, if not impossible.
imgix is a lightning-quick image delivery and processing service that performs image transformations (like resizing, effects, cropping, and more) on demand via an incredibly simple URL-based API.
In the 3 plus years of Unsplash using imgix, imgix is one of the only technologies that has scaled with us through thousands of product iterations, multiple platforms, and thousands of 3rd-party API applications while remaining incredibly simple and incredibly powerful.
While imgix does a great job of explaining all of their obvious benefits like limitless transformations in realtime, single master file storage, and rock solid reliability, I want to show some real-world examples of where imgix has saved us countless engineering hours and surprised our team with world-class features above and beyond what we ever expected.
Easy Avatars 😍
Circular avatars seem to be the norm today which usually means an extra developer headache since users rarely upload square avatars as the source image.
Without imgix, this would require an additional client-side cropping step to make sure the avatar uploaded is square. While that sounds easy, image croppers are awkward and highly error prone, as they usually don’t play well across mobile and desktop devices.
With imgix, no client-side cropping step is needed, since face detection with a cropping parameter returns a perfect square avatar every time, focused on the face of the avatar.
When we first realized this, we were able to ship avatars in a matter of minutes instead of days.
World-class image infrastructure 🌏
Most small and medium sized companies miss out on the latest advancements because they don’t have the resources to implement the latest technologies or optimizations.
imgix gives every company these technologies, as they’re constantly updating their infrastructure with the latest changes.
For example, when Facebook’s engineering team discovered an optimization for the SRGB color profile, imgix shipped the same feature to all of their customers with a simple opt-in parameter, significantly reducing the file size of small images with no visually perceptible changes.
For Unsplash, that meant that all of the avatars and small images we display were significantly smaller in file size, but just as beautiful.
When Apple announced that iOS 11 and MacOS would use a new standard, HEIF, to replace the older JPEG standard as the default image format, imgix had support almost immediately.
For Unsplash, that meant we didn’t have to update any of the code on our iOS or web uploaders, and everything Just Worked™ on day one of the OS releases.
When Chrome announced support for WebP, a much improved compression algorithm, imgix responded with automatic content negotiation, a way to let imgix automatically decide on the optimal file format for each browser, saving our users significant bandwidth.
Personalization 🎁
One of the most surprising features of imgix has been its ability to personalize content.
We showed their sandbox tool to our designers and ever since then they’ve been using it to design personalized images for product features.
For example, when we were redesigning our photographer emails that are sent when they hit certain major milestone statistics, we were able to personalize these achievements by combining a mask of the stat with their most popular photo, making the email feel more personal and (hopefully) meaningful.
When we added the ability for photographers to add stories to their photos, we wanted a simple way to combine their stories with their photo to make it easy to share on social networks. Using imgix’s multiline text, we were able to construct beautiful quote overlays on demand.
Customization 💅
We’ve worked closely with imgix for years obviously, but even with that relationship they’ve still surprised us with their ability to make special customizations work.
Two of my favourite examples of this underly Unsplash’s most powerful data feature: the view statistics for photos.
To power our original implementation, imgix processed their image logs and extracted Unsplash’s usage, dumping it into a daily CSV for easy parsing by our data team.
When our community asked for more realtime statistics, we worked with imgix to move the logs into a BigQuery database and process the data every 10–20 minutes.
Now, with Unsplash powering thousands of applications, including many large applications, understanding how photo views are distributed across each application is incredibly important to our understanding of how Unsplash’s distribution power is evolving.
While it would be possible to append a custom parameter to each image depending on the application and usage, our cache would become heavily fragmented as the unique URLs would bust the cache causing a re-render and slower overall performance.
imgix implemented a scratch parameter allowing us to pass through a custom data parameter without busting the cache. While we’re still exploring all of the possible uses of this parameter, our initial implementation has it allowing us to track usage across a variety of dimensions, including page, position, and application.
There are only a handful of services that manage to live up to the incredibly difficult task of abstracting a complex problem into an easy and simple service.
I remember the first time I used Stripe. What had previously been an extremely complex problem became the easiest feature in a new product.
imgix is in this same exclusive group. Once you use it, there’s no going back.
