Unsplash + imgix

How Unsplash uses imgix to build new features
quickly and serve 350 million images per month.

The Challenge

“We changed our business model and had 3 months worth of cash left to turn things around.”

This was where Crew, an online marketplace that matches vetted creative professionals to customers, found itself in 2013—they needed to build both sides of their network with no marketing budget.

Inspired by this situation and unused photos from a recent website redesign, the Crew team built Unsplash, a stock photo site with a unique proposition: 10 free high-quality photos released every 10 days with no licensing strings attached.

The site was originally built on Tumblr and used Amazon S3 for master image storage, but Unsplash switched to a self-rolled web app and found that their existing image processing solution wasn’t as robust as their users required. The site currently contains over 40,000 master images, and 1000–2000 are added each week by Unsplash’s community of photographers and designers.

Header.png?ixlib=rails 1.1
Unsplash01.jpg?ixlib=rails 1.1 Unsplash03.jpg?ixlib=rails 1.1 Unsplash02.jpg?ixlib=rails 1.1

With thousands of hi-res photos, multiple image-heavy layouts, and a wide variety of devices to support, providing sharp visuals without sacrificing speed was key. In addition, the rapid growth of the community indicated a need to provide user profiles and attractive avatars.

We previously used ImageMagick and a background worker to resize images to predefined sizes. It has always led to problems, like deciding what image to display to users when an uploaded image is still being resized.

According to Product Designer Luke Chesser, resizing in general became problematic given the infinite scroll and masonry layout of the site. Images needed to be served “at the exact right size to reduce the browser's rendering and paint times. If we were to serve larger images and require the browser to resize them, it would lead to slower scrolling.”

Unsplash06.jpg?ixlib=rails 1.1

The Solution

As they transitioned to the new web app, Unsplash was interested in an easy-to-implement solution to handle these resizing issues, and also help speed new feature development. Chesser estimated that using imgix “knocked a week of development and design time off,” enabling Crew to create the new version in about a month. “Since then,“ he added, it’s saved us hundreds, if not thousands, of hours of engineering time.”

Being able to rely on imgix to work without any issues has saved us a lot of potential problems and allowed us to focus our time elsewhere.

Crew was also able to focus on a feature to support their growing community: profiles with circular user avatars. According to Chesser, this is normally a complicated problem, requiring multiple technologies to solve two key issues: the uploaded images aren’t always square, and the face isn’t always centered.

Using imgix, these issues were solved with a minor code tweak, allowing Unsplash to provide a better experience at almost no engineering cost.

Original, resized 400px wide.
?w=400
Cropped
?w=400&h=400&fit=crop
Face Detection Crop
?w=400&h=400&fit=crop&crop=faces
Add Ellipse Mask
?w=400&h=400&fit=crop&crop=faces&mask=ellipse
With imgix, the problem of cropping avatars took us 30 seconds to solve, as we simply specified two parameters—crop=faces and fit=crop—to create perfect, circular avatars.
Unsplash05.jpg?ixlib=rails 1.1

The Results

Unsplash is a small team, so getting the most out of their technology stack is crucial to growing the site. Chesser noted, “with every other technology, as we’ve scaled we’ve had at least one problem. In a year of usage, as we’ve scaled from 20 million images a month to 350 million, we’ve had zero problems with our image delivery via imgix.”

Unsplash screen03.png?ixlib=rails 1.1
Unsplash provides “free (do whatever you want) high-resolution photos” with the help of imgix.
Thanks to open-­source tools and a few key services like imgix, we’ve been able to focus our efforts entirely on building for growth. It’s been as core to our engineering stack as Rails and Heroku.
Unsplash screen01.png?ixlib=rails 1.1

Using imgix has also empowered Unsplash to focus on creating features that appeal to their community, helping them compete against larger photo sites. Or as Chesser put it, “some of the major sites have teams working to create features that imgix has made extremely simple for us.”

Most importantly to Crew, launching Unsplash and quickly developing new features on their own platform brought them attention (more than 5 million unique site visitors) and an influx of new talent. They’ve converted that attention into business, and can expand the marketplace with much less effort—Unsplash is now Crew’s #1 referral source for new designers. From Unsplash and other efforts, Crew has grown 15 times over since 2013 and now serves businesses such as IDEO and Eventbrite.

Unsplash screen06.png?ixlib=rails 1.1
Made with Unsplash showcases products and designs made with unsplash images.

Schedule a Demo Sign Up with imgix

imgix is a real-time image processing service and CDN. Thousands of companies around the world use imgix to deliver the best images at the perfect sizes to their customers.