Evolution of <img>: Gif without the GIF

In the latest Safari Tech Preview it’s now possible to use MP4 files in <img> tags. Intended use case is short, muted, looping video. Colin Bendell digs deeper into this.

By enabling true video formats (like MP4) to be included in <img> tags, Safari Technology Preview has fixed performance and UX problems. With it, our micro-form videos can be small and efficient (like MP4s delivered via the <video> tag) and they can can be easily preloaded, autoplayed, and shared (like our old friend, the GIF).

Evolution of <img>: Gif without the GIF →

Getting the actual GIF from a tweet with TWEET2GIF


Twitter supports GIFs (and more recently: longer/bigger GIFs!), yet they render them as MP4 files. So how to get the original GIF? Enter TWEET2GIF:

Ever wanted to download that gif that you saw on Twitter? Maybe share it on Facebook or other social networks? You’re at the right place!

Just paste in the URL of a tweet and you’re done 🙂

TWEET2GIF — Convert tweets into real GIF or MP4 files →

UPDATE 2018.02.28 Updated the URL to a Heroku URL since the tweet2gif.com domain got snatched.

Extracting Looping GIFs From Videos


Finding and extracting well-looping segments from a movie requires much attention and patience […] To make things easier I wrote a Python script which automates the task. This post explains the math behind the algorithm and provides a few examples of use.

Fuck yeah, math! Or, as the author states:

Yet another big problem of the Internet era tackled by Mathematics.

An Algorithm to Extract Looping GIFs From Videos →

(via @patrickdebois)


This library shows how to achieve realtime text communication using GIF images as transport.

The idea is pretty simple. We use Animated Gif images to stream data in real time to the browser. Since a gif image doesn’t specify how many frames it has, once the browser opens it, it will keep waiting for new frames until you send the bits indicating that there’s no more image to fetch.

And yes. It works in IE6.

gifsockets →

Animated GIFs the Hard Way

The Sublime Text Website has some nifty animations to show of a few features. Turns out they’re not animated gifs.

One of the criteria was that the animations should work everywhere, from IE6 to an iPad. This ruled out two common video options, Flash and the <video> element. Animated GIF files would have been a candidate, except for two issues: the 256 color limitation, which would have made the animations ugly, and the encoders I tried spat out huge files, at almost 1MB per-animation.

Instead, I wrote a small Python script that takes a collection of PNG frames as input, and emits a single packed PNG file as output, which contains all the differences between the frames, and some JSON meta-data specifying which bits of the packed PNG file correspond to each frame. JavaScript turns the PNG and JSON into an animation, using either the canvas element, or emulating it using overlaid div elements for older browsers.

Deliciously hacky!

Animated GIFs the Hard Way →