Upworthy is a digital publication that seeks to harness the power of viral content for good, creating stories that spread on social media and bring awareness to important issues. Founded in 2012, by 2013 it had the third most article shares of any publication on social media, surpassing organizations many times its size and leading to it being named the “fastest growing media site of all time” by Forbes. Its stories now generate more than 50 million pageviews each month, and all of it is powered by technology designed and maintained by a team of just six engineers.
The motto of Upworthy’s dev team is to focus on small things that have a huge impact. When they investigated changes that could boost metrics and streamline editorial processes, images quickly emerged as one of the most compelling areas for improvement.
It was obvious that the images were the biggest thing slowing down pages. They made up as much as 70 percent of the weight of some pages. We realized that if we could get that down, it would help everything else.
Image handling also proved to be a limiting factor on the productivity of Upworthy’s editorial team. The team had created a guide to manually editing and uploading images, but it was time consuming and as a result wasn’t followed consistently in the quick-hit, always-on environment of a real editorial department.
Upworthy’s developers found that often when they investigated a page that wasn’t performing, the culprit was an image that hadn’t been properly formatted. This was compounded by the fact that, when there were errors that negatively affected the user experience, they were hard to correct because the original was no longer available.
There was no telling how many bad images like that were out in the wild because we had to rely on people manually reporting them. I’d guess 90 percent of the poor-performing images went uncaught.
According to Upworthy’s Director of Engineering Josh French, “There were many times where editorial would come to me with a page that had an overcompressed image that looked terrible, but there was only so much we could do if we only had the version that was uploaded.”
What they needed was something flexible, extensible, and dependable, which could free the team up to work on more interesting problems.
“I wanted a thing you could just plug in, and it works,” French said. “I don’t have to think about it anymore. I don’t have to onboard anyone onto it, I don’t have to maintain it, and I can build what I need to build because I know it’s always going to do what I need it to do. imgix does that for us.”
After exploring several options for automating its image handling, Upworthy decided imgix was the best choice for its needs.
Key to that decision was the fact that imgix functioned as an on-demand image processor with caching, transforming images only when they were requested by a user. This was considerably more efficient for the dev team, because unlike maintaining a tool for batch processing, it removed images from the scope of things they had to worry about when making changes or building new features. This gave the team much more flexibility.
“imgix sits at the right level of the stack. Because it’s the last tool that touches an image, we’re able to overhaul vast parts of the things behind it without touching our image configuration,” French said.
And because the interface to imgix was very simple, it was easy for the team to implement quickly.
I can’t actually remember much about integrating imgix, which tells me there wasn’t much to it.
After implementing imgix, the team was able to standardize its imagery and drive down load times across the site.
This had an immediate impact on behavior. One of the metrics Upworthy tracks is its number of Active Visits, those visitors who stick around and consume content rather than immediately clicking over to something else. After turning imgix on, Upworthy saw its daily Active Visits spike by as much as 50 percent.
As a team, our motto has always been to do the little things that make the biggest impact. Moving our image processing over to imgix definitely fits into that category. We saw noticeable improvements with minimal amounts of tuning.
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.