An experiment to solve the animated GIF + mobile problem
The GIF format sucks. Don’t get me wrong: I like to get my Carlton on as much as the next person; I am, I must admit, a bit of a panda addict; and the best part of the VMAs was definitely seeing Breaking Bad’s Hank and Marie mystified by Miley. I love GIFs. The format has matured from the goofy loops of yore to become the de facto language of the internet.
Steadily, the traditional anatomy of media has been breaking down into smaller parts. Until recently, audiovisual media was mostly longer-form experiences — the song, the TV episode, the feature film, etc. Hip-hop and its foundation in remix culture blew this up in music. YouTube accelerated the explosion of short form video (and Vine has taken it a step further).
Why the GIF resurgence? GIFs are our emotional currency. By drawing upon a shared language of pop culture, GIFs allow us to express our feelings in ways that often far exceed written words or snapping a photo.
Yes — GIFs are great. But GIFs are HUGE. They often load painfully slow on mobile devices.
That awesome GIF of Green Bay Packers Linebacker Clay Matthews clotheslining 49ers QB Colin Kaepernick out of bounds from this weekend? A far-too-large 3.7 mb file. That Vine you just shared? Try converting it to a GIF. Not only will you lose the audio, it’ll grow in size from 800k to an absurdly large 6.4 mb file.
This is a problem for everybody. Sites like Tumblr and Imgur have gotten around the issue by not letting users upload large GIFs, and things run pretty smoothly if you’re on a high-bandwidth connection in the home or office. But if you’re on the go on your mobile device? It’s most unfortunate.
My colleagues and I at Zeega have been grappling with this challenge, and so we wanted to open up and share our experiments with fellow animation-lovers. We heard from users that when they viewed Zeegas on their phones, they sometimes got stuck with a looping GIF they did not want to see — the loading wheel of death. 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 in file size 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.
The results are pretty striking.
This GIF is 2.4 mb.
This “ZGA” (i.e. jpg) is 808 kb
This is definitely a work in progress. Right now, it’s just for GIFs that are uploaded directly to Zeega. The next step is converting all GIFs that people add from elsewhere (e.g. Tumblr and Giphy). We’re also working to make it possible to convert a Vine into a ZGA.
Coda
We are rapidly leaving behind an era defined by the written word and moving into a period dominated by audiovisual communication. The explosion of new visual messaging apps like Snapchat, MessageMe and Kik — along with platforms like YouTube, Tumblr, Pinterest, Instagram, Vine, etc.— are all the tip of the iceberg of a new audiovisual language enabled by the web. (Nick Bilton has argued similarly in the New York Times).
I am generally obsessed with what it means to treat the web as a seedbed for fundamentally new mediums — media experiences that are only possible because of the Internet and its networked nature (e.g. this is why I love Twitter). Solving the problem of how to make short clips load quickly on mobile seems integral to future new media.
This is just a start in opening up a process. I know tons of folks are thinking about these same questions. In writing this, I’m hoping to start a dialogue. I’m curious what other approaches can be explored, how as a community we can move towards a future of clips that work beautifully on our devices. We’ll keep sharing our tests and hope to hear from you about what experiments you’ve been running.
