Call 2014 the year of the GIF. First Tumblr, then Twitter, then our own Fast Company homepage, and now Pinterest are using the file type. But as whimsical as they seem, GIFs present big technical challenges: They have large file sizes and stream slowly on the web. Compared to an HTML5 video, a GIF that contains the same content is slower and much larger than the video. Not only that, the GIF format compresses visual data into horribly low-quality imagery unless the colors are uniform.
But GIFs still beat out videos on the web for popularity. The HTML5 tag that supports video formats, video, just doesn’t translate to every type of web content, like email signatures, blog themes, and emoticons. GIFs, however, require only the img tag, which is more universal on the web.
"We’ve known for a while that [GIF support] is something that would benefit Pinners," says Ludo Antonov, growth engineer at Pinterest. "But the biggest question was... How?"
The first problem to solve was performance.
Without special GIF support, web pages continually loop GIFs without control. On a site where several GIFs might appear on the same page, like on Pinterest’s, that makes pages load slowly due to lessened bandwidth, and the individual GIF streams would break up. So the team needed a way for the user to control when a GIF would play and remain static to conserve bandwidth and maintain speed.
"The most difficult part was building the GIF playback implementation in a way that follows our brand's high-quality bar. We wanted to be sure to find a way to naturally fit GIFs into the Pinterest experience that Pinners know and love," says Antonov.
Eventually, the team decided on a play button on the bottom left-hand corner of a pinned GIF. Now, when a user clicks on the button, the GIF plays in a loop in the site’s grid layout. Another click pauses the animation.
"Justin [the product designer] designed the visual way that the play triggers work in the grid, and determined the best placement," Antonov says. With the visual quality set in stone, it took just a little more to finish the GIF support concept.
The GIF team got the product working within a couple of hours and then rolled it out on the web for user testing.
Silvia Oviedo-López, an international operations manager at Pinterest, joined the GIF team as its product manager that night. She managed the coordination, testing, and international compatibility for the project. Using a special board she set up for testing, Oviedo-López got other "Pinployees" pinning their own GIFs way into the morning. She says, "It was fun to share the idea and execution with the people who still were around the office at 2:00 a.m., from engineers, to designers, to leadership."
Because the testing worked out well, Pinterest decided it would launch the GIF support for all users, a process it calls "shipping." At the time, GIFs were playable in standard browsers, but it was time to develop for mobile.
Over the course of a couple of weeks, three Pinterest mobile engineers and a product designer worked during normal business hours to round out GIF support for iOS and Android. By Valentine’s Day, GIFs ran rampant on all Pinterest platforms.
Both Oviedo-López and Antonov agree that the GIF support project could not have happened without an evening "make-a-thon," Pinterest's version of an impromptu hackathon.
"Although we're still a small company, it's hard to get everybody’s schedules to align on side projects. This is what makes make-a-thons so valuable. It would’ve been impossible to get this feature out if it wasn’t for the right set of people coming together, which is at the heart of every hacking night," says Antonov.
Oviedo-López adds, "One of the reasons why make-a-thons are the perfect venue for this type of project is because they allow us to take a step back from the roadmap and work on projects that are more spontaneous, which may include moonshots, fun features, or little improvements that can make our users happier."
But picking and choosing the right projects makes or breaks a hackathon. "The most important thing to remember is to think, ‘Can I ship this in the amount of time I have?’ on every step of the way. Sometimes making cuts is hard," says Antonov.
The team made the right call, going with the GIF support project during the make-a-thon. Antonov says, "The theme of this particular make-a-thon was to spur growth through a new feature. Our hunch was that a highly requested feature like GIFs could help us reach our goal, and we were right. GIF repins have been climbing ever since, and have nearly doubled since launch."
Cristina Petrovici, the other growth engineer on the GIF project team, gushes about the make-a-thon. "To me, that make-a-thon is a story I'll tell many, many times and that I hold dear. We got to build this thing we were so excited about, we got to know each other better, and we had tremendous fun. And, I'm telling you, that night, special friendships were born," she says.
"All three of us, Ludo, Silvia and myself, are from three different countries. So there all three of us were, speaking different languages, and having fun reading GIFs aloud and comparing in our native tongues, along with different customs and perceptions," Petrovici says.
While the make-a-thon forged a new team together and left them lasting memories, the biggest takeaway was making it easier for Pinterest users to share GIFs.
"There’s no better feeling than seeing somebody get what you’ve built and enjoy it. Enabling GIF support allowed us to connect people with more content they really enjoy, and that’s huge," says Antonov.