Lightweight GIFs for happier snake people

Here’s the biggest poorly-kept secret of big media: Snake people love GIFs. Such is the conversation ongoing in the virtual halls of NewMediaCo USA. Editorial, we need more GIFs! Sales, why aren’t your ads GIFs? Product, why aren’t people sharing our GIFs? The snake people are demanding them.

hitler

Ok, so, not exactly. Even if the dialogue isn’t quite that predictable, GIFs have seen a renaissance in the age of the social network. A nicely-timed GIF can be better than just about anything for expressing feelings in an instantaneous way.

But the GIF experience is hardly instantaneous.

Here’s a random selection of GIFs uploaded to Fusion in the past few days. Scroll up and down – smooth like butter! How do we manage that? By taking the GIF out of GIFs.

From Fabio Fitness.
Omar Bustamante/FUSION
Giphy

GIFs can commonly be 2-4 MB, which means it takes around 0.2 seconds to download just one GIF at today’s 3G speed (7.2MB/s). These large downloads can easily take up most of a user’s bandwidth, especially on mobile. A GIF file can be converted to a much smaller video file. If we convert our GIFs to video files, and render them as HTML5 video elements, we can significantly reduce the size of downloaded media. That’s why Fusion decided to create a two-part project, GIF2HTML5, to transparently convert our GIFs to HTML5 video.

How does it work?

When a user uploads a new GIF to WordPress media library, the GIF2HTML5 plugin sends the URL of the GIF file to the GIF2HTML5 middleware application. The middleware application converts the GIF to MP4, OGV and WebM formats to serve different browsers. The video is then uploaded to Amazon S3 so it can be served via CDN. The URLs of the new videos are sent back to WordPress, and the GIF2HTML5 plugin associates those video URLs with the original GIF media library item.

When WordPress displays a GIF media library item with associated video URLs it uses an HTML5 video tag and displays a video file instead of using an img tag to display the original GIF. If a user’s browser does not support any of the formats of the video files, then that user will see the original GIF. We’ve also added custom fallback logic for our newsletter, feeds, and other contexts where HTML5 isn’t necessarily supported.

What does performance look like, before and after?

Some of our video files are 1/16th the size of the original GIF — which means a page weighing 25MB reduced to 5MB.

Even a with many GIF's can maintain a svelte sub-10MB page weight using GIF2HTML5.

Even a with many GIF's can maintain a svelte sub-10MB page weight using GIF2HTML5.

How can I help?

By contributing to GIF2HTML5!
We are looking for contributors to join the project. Fusion engineers are active community members in the News Nerdery – you should join if you’d like to discuss the project with us. Or, feel free to just start filing pull requests :).

Have a bug report or feature request? Please file it as an issue in the relevant Github repository.

GIF2HTML5 Middleware App
GIF2HTML5 is a Python application built on Flask. Simple instructions for deploying to Heroku are provided, but you can also run locally or deploy it to your platform of choice. We’ve tried to make it as simple to use as possible, and encourage your constructive feedback. Once you’ve deployed the app, you can call it like this:

[code]
curl -H "Content-Type: application/json" \
-d ‘{ \
"url":"http://media.giphy.com/media/WSqcqvTxgwfYs/giphy.gif", \
"api_key" : "$YOUR_API_KEY" \
}’ \
http://localhost:5000/convert
[/code]

The GIF will be downloaded, processed, and uploaded to Amazon S3.

GIF2HTML5 WordPress Plugin
When a user adds a new GIF to the Media Library, or updates an existing GIF, the GIF2HTML5 plugin will start the image transformation process. This plugin does not handle the actual file transformation routine. The transformation is handled by a standalone web application. The GIF2HTML5 plugin sends the URL of the GIF to the web application, and the web application responds asynchronously with a POST handled via admin_post. The GIF2HTML5 plugin runs a filter over all post content, and replaces img elements with video elements where video replacements are available.

Giphy

WHERE TO WATCH