Twitter  Quartz found an unlikely inspiration for its relaunched homepage: The email newsletter. nie.mn/1AQXuxD  
Nieman Journalism Lab
Pushing to the future of journalism — A project of the Nieman Foundation at Harvard
prince

Can you build a better GIF? Zeega wants to remake the aged animation format for mobile

The multimedia storytelling company is experimenting with a new file format to make the animated images easier to use on mobile devices.

We have become a nation of GIFs.

Okay, maybe that’s a slight exaggeration. But the image format has long since migrated from Tumblrcentric sideshow into the mass media. Yes, it’s BuzzFeed, but it’s also NBC News.

But there’s plenty of room for improvement — if not in style, at least in efficiency. That’s an issue that the team at Zeega is trying to work on these days, and they think they’ve got an answer.

“It’s a uniquely emotional format,” said Jesse Shapins, co-founder of Zeega. “I think it’s one of the reasons they are so popular. They’re like condensed emoticons.” (Or, as in the GIF above, a way to indicate that rotund Detroit Tigers first baseman Prince Fielder might not enjoy salads.)

Condensed emoticons, or perhaps shrunken movies. The reason GIFs have seen a resurgence has as much to do with their age as their expressive qualities — the format’s been around since the 1980s, and it’s supported in almost every web browser without the need for an external plugin like Flash. But the problem with GIFs is a technical one too: the files can be huge, which can be a big problem, particularly on underpowered mobile devices.

johnny-manziel-zeega-zga-gifSo the team at Zeega has created what they hope will be a more efficient format for short animated images: the ZGA. (Zeega is itself named for Soviet film pioneer Dziga Vertov, so the name has some resonance beyond startup-promotion.) An animated GIF is, in essence, a stack of individual still GIFs all stored in the same file. But GIF as a file format doesn’t compress well, so combining all those GIFs can stack up quickly.

For most large images on the web, we moved from GIF to JPEG long ago — JPEG being much more compressible and featuring much smaller file sizes without too much loss of quality. A ZGA is, essentially, a JPEG filmstrip, with each frame just below its predecessor. Then some JavaScript allows the animation to flow while taking advantage of JPEGs’ smaller file size. “There’s no issue with the way the GIF works as a looping experience,” he said. “But sheer data size is one of the hangups for us.”

You can see a few ZGAs — starring Johnny Manziel, Homer Simpson, a psychedelic fish, and more — on Zeega’s website. Here’s how Shapins described it on Medium (where, for technical reasons, you can’t see the ZGAs actually, um, zig-zag?):

Now, when you upload a GIF to Zeega, on the server side we parse out each individual frame and then create a new, single .jpg image that has each frame one after another, just like a vertical filmstrip. (The media history nerd in me loves how this brings us back to celluloid). This .jpg (what we jokingly call a ZGA for now) is typically 3-5x smaller than the original GIF, making it massively faster to load on cell networks. The framerate is added to the filename and then we use JavaScript to read that information and do the animation on the frontend using CSS3 transitions.

At the moment, the ZGA format only works on Zeega. Shapins said next they’ll need to make it possible to convert GIFs that come from elsewhere on the web like Tumblr or Imgur. One imagines that the technical limits — like requiring some extra JavaScript — will limit the ZGA’s uptake on the broader web. (One of the geniuses of GIFs is that they are self-contained and can be shared as individual units of content — linked in a tweet, embedded in a comments section, emailed to a friend.) But for a publisher who wants to use GIFs a lot but doesn’t like the bandwidth impact, it might be worth including the extra code.

Zeega’s been focused on the visual world since Shapins and his cofounders launched as part of the Knight News Challenge in 2011. The tools created by the company allow anyone, journalists or individual storytellers, the ability to create short multimedia stories through material culled from the web. A video, Flickr images, Soundcloud audio files, GIFs — it’s all fair game. The reason they got interested in finding a better file format was feedback from Zeega users having trouble looking at GIFs on their phones, Shapins said. As mobile takes a greater and greater share of all online attention, a file format that can be laggy or crashy on your phone becomes even more of a problem. “In terms of mobile speed is critical, so getting down the data throughput is important. But the end experience has to be comparable” to a regular GIF, Shapins told me.

Zeega’s not the first media company interested in remaking the GIF. Last year, BuzzFeed introduced its own innovation in GIFs with the “rubbable GIF,” which allows users to control the animation in the image through their mouse, or a finger on mobile. Similar to the ZGA format, rubbable GIFs rely on a bit of JavaScript to make the magic happen, but its focus was on building a usable interface for GIFs (which otherwise do their thing without user input) rather than cutting down the file size. As former BuzzFeed editor Scott Lamb explained to The Atlantic Wire last year, “It’s the code on the webpage that makes them rubbable, not the way the .gifs are made.”

But while all GIFs can be rubbable, not all of them will (look for a “Make rubbable” button). While Rubbing a GIF is not just for special occasions, the editors typically keep them out of serious or sensitive stories. Alice DuBois, BuzzFeed product lead for editorial tools said this over email:

Our awesome dev team built this revolutionary rubbable GIF technology in house so we wanted to roll out this technology for any GIF on the site. Rubbable GIFs work best when they show a specific action or gesture that you want to slow down and look at again and again, like this cute kid berating his dad for dropping a foul ball. Rubbable GIFs could be a inappropriate for sensitive subjects, so the feature is disabled in those posts.

Other publishers, like The New York Times, have created things that look an awful lot like GIFs — the animation, the looping, the autoplay — without actually using GIFs. The GIF-looking animation of the Statue of Liberty at the top of this story, for instance, is revealed in the code as a 15-second movie file in MP4 format. CSS animation and other JavaScript approaches can also do some of the same work a GIF can.

Building a better GIF is an ambitious idea, but browser and platform support loom as big barriers to massive uptake. What places like Zeega and BuzzFeed are trying to do is supplement the GIF experience in ways useful in the controlled environments of their own platforms. That’s a noble goal — but the GIF, short, spastic and imperfect, looks set to endure for some time longer.

                                   
What to read next
Police Shooting Missouri
Joseph Lichterman    Aug. 22, 2014
Local meets global: The papers are jointly seeking reader-submitted stories of racial profiling and are cross-publishing each other’s work.
  • Oluseyi

    Zeega needs to move further up the content chain if they want to supersede the GIF. Consider APNG (Animated PNG), which the Apngasm project (no, that’s not a pun on “orgasm”; it stands for APNG ASeMbler) is looking to revive: the objective has to be export support in the tools used to create the media to begin with, so translucency can be captured (GIF has none; JPGs from GIFs have none) and a self-contained, compact, *lossless* file can be shared easily.

    Cute, but I don’t see this taking off.

  • Vagner Santana

    Hey guys, take a look on Frame Player – http://vagnervjs.github.io/frame-player/