
Twitter's GIF hack - kwntm
http://blog.embed.ly/post/89265229166/what-twitter-isnt-telling-you-about-gifs
======
ars
This is not true:

"A GIF is literally a sequence of independent images squeezed into the same
file. An mp4 video can take advantage of all kinds of fancy compression
techniques like keyframes and forward-predictive frames."

That's not why the mp4 is smaller. A GIF is not [just] independent images, you
can have each frame reuse pixels from previous frames.

The mp4 is smaller because lossy jpeg compression is used on each frame, while
the gif stores each frames losslessly.

This has implications from the predictive frames as well - the jpeg is lossy,
so two almost similar parts of the images can be considered "the same", while
the gif is not, so they must be identical in order to compress that way, and
the realities of video noise makes that unlikely.

~~~
anon4
Not quite true yourself :).

GIFs store deltas, true, but they are still raster images.

H.264 on the other hand contains specific techniques for compressing
sequential frames, including things like recording only pixel motion for some
frames. You can see it in those "corrupt movies" gifs (which on twitter would
be mp4s... talk about irony) where you take a clip and remove some keyframes
from it - then transformations are applied on the wrong blocks and you get
really weird things like someone's head splitting open and stuff flowing into
each other.

Additionally keyframes in movies are usually compressed with even more loss
than standard jpegs. In most cases only the Y channel is recorded at full
resolution and the two colour channels - U and V - are recorded at half.

There is also motion-jpeg which really is literally a sequence of jpeg images.

~~~
mikeash
Just a nitpick, JPEG always encodes the color channels at half resolution.
It's amazing how difficult it is to notice this, though.

~~~
brigade
No, there are 4:4:4 and 4:2:2 modes in JPEG.

H.264 also defines such modes, but no consumer hardware decoders support them
so they aren't commonly used.

~~~
mikeash
My mistake, I must have been going off what's common versus what's allowed.
Thanks for pointing it out.

~~~
dunham
Apple's jpeg animation hack used 4:4:4 so the blocks wouldn't interfere with
each other. It's a neat hack, worth reading about if you haven't seen it yet:
[https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG...](https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI)

~~~
mikeash
Holy moly. What a hack.

------
Rudism
Correct me if I'm wrong, but wasn't the whole reason gifs started
proliferating on the net because people wanted to share short video loops, but
didn't want to embed flash or video which may not load or play correctly in a
user's browser? And now we are championing the conversion of those gifs back
into video? Seems like a strange round-about way of doing things.

I forsee a future where all video clips on the net have been converted back
and forth between gif and video so often that they all slowly merge into a
single amorphous blob of greyish-brown pixels. Actually, now that I think
about it, that would almost certainly be an improvement over the current
situation.

~~~
blt
I don't think gifs' recent surge in popularity has anything to do with
technical issues like browser compatibility. They became popular because of
artistic/aesthetic value and web culture. These features all differentiate
gifs from _2010-mainstream_ forms of embedded video like Youtube:

    
    
      - starts playing automatically
      - loops seamlessly
      - never has sound
      - no logos or buttons like "share" and "embed"
      - no scrubber bar on the bottom
      - repeated instances of the same gif play back in lockstep
      - no frame around it
      - pixel-perfect control
    

All these features make it possible to create art that wouldn't work with
embedded video. (Defining art broadly; captioned movie clips are included.) In
the past few years, some creative people started making really good gifs that
took advantage of these features. Then the trend spread through web culture.
The next generation made gifs because "making gifs is what clever artistic
people do on the internet".

It's always been easy to create a looped animation format that combines the
feature list above with a better compression scheme. Now that gifs are so
popular, someone recognized the need and made one.

IMO, the 256-color dithering was more of a necessary evil for most gif
creators, although some took advantage of it. It looks nostalgic on 90s
Gourard-shaded untextured computer graphics. But for movie clips, etc, I think
many will be glad to get rid of it. I bet we'll see a sect of gif creators who
think mp4s are not authentic while most people won't care.

Your last comment reminds me of Alvin Lucier's "I Am Sitting In A Room"
(wiki/youtube). Someone repeats that idea with every lossy medium we invent.
I've seen jpeg and vhs examples but I can't find the links right now.

~~~
freyr
I think your list of features is spot on, but I don't think their mainstream
popularity had much to do with artistic expression. I'd include one other big
feature:

    
    
       - They are dead simple to save (or link to) and drop into your own page/blog/comment.
    

and claim that GIFs are just really easy to share and view. They've offered a
better experience both for post and viewing a short soundless clip than could
be provided by an embedded Youtube player.

~~~
mbesto
How about the fact that there is _zero_ advertising. IMO this is the number
one piece of friction for videos (mainly YT) and the users don't want them for
especially quick moments (a la Vine).

~~~
michaelmior
There's nothing really stopping people hosting GIFs from putting in
advertising. Although it's true that I haven't seen examples of this
happening.

------
kudu
This article makes it sound like Twitter invented a whole new optimization,
when they really just recycled a concept already in use by gfycat
([http://www.gfycat.com/](http://www.gfycat.com/)) and MediaCrush
([https://mediacru.sh/](https://mediacru.sh/)).

~~~
Sir_Cmpwn
The latter being open source (I made it):
[https://github.com/MediaCrush/MediaCrush](https://github.com/MediaCrush/MediaCrush)

------
Permit
I'm curious if anyone is noticed the flickering Loading icon when the .mp4
version loops? It only shows up for 50 ms, but seems kind of annoying. Or
maybe it's just my machine?

Here's a cap: [http://imgur.com/2R84ImD](http://imgur.com/2R84ImD)

~~~
Drakim
Yeah, I see it too. Very annoying.

~~~
mhurron
Also annoying to have to allow javascript to see what is supposed to be an
image.

------
stonogo
This is on a fully-patched RHEL6 workstation:

[http://i.imgur.com/NleqJTD.png](http://i.imgur.com/NleqJTD.png)

Another example of "use bleeding-edge tech or go fuck yourself" from the
modern web.

~~~
fixermark
Support for mp4 isn't bleeding-edge tech on other operating systems /
distributions, unfortunately. It's a couple of years old in terms of being
supported by Chrome; it's supported in Firefox as of last August.

At this point, desktop configurations that can't play mp4s are at risk of
being considered "broken."

~~~
callahad
Is it really that difficult to supply a free format like WebM in addition to
patent-encumbered H.264? If you only supply H.264, you're cutting out Firefox
on OS X, Chromium, and Opera.

~~~
garblegarble
It does mean you need to transcode and store twice as many files, which can be
a serious pain if you've got a number of different bitrate H.264 assets. It
can be a big pain if your software assumes there'll only be a single media
file. Not insurmountable but painful for small operations (and for large
operations, where there may be a back-catalogue to worry about)

I'm with you in spirit, but in practice I think we can all understand why
people often just go for H.264

~~~
kibibu
This is a new feature launched by one of the biggest web brands there is, so
presumably theres no back catalogue.

------
Sir_Cmpwn
I made a site that drove this innovation, MediaCrush. It's open source.

[https://github.com/MediaCrush/MediaCrush](https://github.com/MediaCrush/MediaCrush)

if you want to try to do this yourself, our code is a good reference.

[https://mediacru.sh](https://mediacru.sh)

~~~
sillysaurus3
Why did Gfycat win? I've always wondered.

~~~
mkishi
I'd bet on UI and marketing.

The player is very unobtrusive and minimalist, and simple things like
pronounceable random names probably appeal to the user.

Also, features that are well-known to heavy reddit users (such as easily
resizeable videos) only helped with the word-of-mouth.

------
billmalarky
"Videos allow Twitter to leverage the browser. This means play, pause, and
seek, but also cool things like slow-motion. Think your GIF is funny now? Wait
til you see it in slow motion."

Gifs have built in slow motion, it's called waiting for the 10mb file to
download frame by frame upon initial play-through.

------
protopete
Unfortunately the MP4 looks worse than the GIF, due to chroma compression in
the YUV 420 colorspace. While each pixels luminance value is kept, the color
information for a 4-pixel square is stored as a single CrCb pair, which is
really obvious when you look at how the orange hat has artifacts against the
blue background. Increasing the bitrate won't solve this either, since it's a
limitation of the colorspace.

~~~
ferongr
Or alternatively browsers could use non-terrible chroma upsampling algorithms.

[http://screenshotcomparison.com/comparison/79805](http://screenshotcomparison.com/comparison/79805)

~~~
Kayou
Thank you! I was gonna post the exact same thing. Nice website, though.

I encoded the gif in 420 (subsampling), 422 and 444, having a nice quality
with 444 with VLC, I embed the three different videos in a web page and when
playing in my browser, they are all as bad as the twitter video! I thought
that Firefox was using a standard library to play MP4?

~~~
ferongr
Firefox uses the Windows-bundled decoder on Windows Vista or later. Chroma
upsampling happens after decoding so it's the renderer's responsibility
(Firefox, Chrome, VLC, madVR etc).

Depending on the webpage you uploaded them, the videos could be re-encoded (or
VLC's options could be no-ops and the artifacts hidden when played back in VLC
due to better chroma upsampling) hence the problem.

~~~
Kayou
Okay, thanks for the explanation on the chroma upsampling! I use Linux but it
should work all the same.

When I said that I embedded the videos in a web page, I wrote a small page
from scratch to display them in my browser, locally, without any server. So no
re-encoding. I think that VLC just has a better chroma upsampling.

------
rudog
We've been doing that at my company on our mobile applications for a few years
now. There is no reason to be shoving 5-10mb GIFs down a users throat on a
mobile device. Not only does are MP4s smaller (file size), frames per second
will be constant on all browsers, unlike GIF (although most browsers are
supporting up to 50fps these days). Although outdated, you can read more about
that here. [http://nullsleep.tumblr.com/post/16524517190/animated-gif-
mi...](http://nullsleep.tumblr.com/post/16524517190/animated-gif-minimum-
frame-delay-browser-compatibility)

I wrote a simple js lib for detecting the duration of a GIF for each browser.
It was a fun weekend project.
[https://github.com/rfrench/gify](https://github.com/rfrench/gify)

If webp gains more adoption, it's another alternative now that it supports
animation.

------
bluedino
Haven't things like gfyCat been doing HTML5 video from GIF's for a while?

~~~
discreditable
In a way they're doing it better. Twitter only seems to support MP4 whereas
gfycat et al will deliver WEBM or MP4 based on the user's browser.

~~~
skrowl
Agreed. MP4 doesn't work on Firefox (out of the box).

~~~
pyre
You should probably qualify that somehow, because MP4 works for me on Firefox
(on OSX 10.9).

~~~
preek
It does not work for me, too. FF30, OSX 10.9.3.

[https://www.evernote.com/shard/s19/sh/e81e070a-4e2e-4367-9eb...](https://www.evernote.com/shard/s19/sh/e81e070a-4e2e-4367-9eb1-83a7f6fe151f/42755f0246227bd75eb5e1099f857348/deep/0/About-
This-Mac-and-Embedly-Blog,-What-Twitter-Isn't-Telling-You-About-GIFs---
Vimperator.png)

~~~
pyre
OSX 10.9.2 + FF30 here:
[http://i.imgur.com/uTlQkg7.jpg](http://i.imgur.com/uTlQkg7.jpg)

~~~
DCKing
Right click the video. It's probably Flash. Plays using Flash in Firefox on my
machine.

OS X is the last platform where Firefox doesn't support H.264. They're working
on it, but it doesn't seem to be landing soon.

------
TazeTSchnitzel
Much like what [http://gfycat.com/](http://gfycat.com/) do, then?

Interesting also that 4chan recently added looping, muted WebM videos for
similar reasons.

------
gdulli
Is there a flash blocker solution that removes all traces of the page element
rather than leave an ugly placeholder? It's going to be annoying to see this
on Twitter from now on.

------
eph_unit
So, what is an easy way to convert gifs to mp4? How did they do this. I run a
small gif-sharing site and should probably do this.

~~~
GHFigs
I had a convoluted method using gifsicle to extract the frames and then encode
as a stream of frames, but then sometime in the past year or so ffmpeg
improved native gif support. This is what I use (the options are both for
compatibility):

    
    
        ffmpeg -i foo.gif -pix_fmt yuv420p -vf crop=floor (in_w/2)*2:floor(in_h/2)*2 foo.mp4
    

Works for WebM just by changing the extension, too.

------
brickmort
I think now would be a good time to introduce HTML5 videos to the feed, or
gfycats. At least on certain browsers.

------
jstalin
It's annoying to an oldtimer, like me, that _animated_ gifs have now simply
become _gifs_.

------
ahassan
This is why 4chan supports WebM videos now in addition to the traditional
gifs.

------
supercoder
Can I skip the GIF and have Twitter just play an MP4 I upload ?

------
pyrocat
The twitter "GIF" is a black box. gg

------
cbr
Another option (for supporting browsers) is to use animated webp:
[https://developers.google.com/speed/webp/faq#why_should_i_us...](https://developers.google.com/speed/webp/faq#why_should_i_use_animated_webp)

------
shmerl
GIFs indeed are bad for video (quality, size, no control, no sound, etc.) but
in order for that to be really true, the site must allow embedding videos
using the video tag (i.e. videos which people upload in proper video formats).
Does Twitter allow it?

------
lawl
So. Who was first. 4chan or twitter?

How long has twitter been doing this? Just out of curiousity.

(Yes I know 4chan doesn't convert but there was some talk that 4chan might be
a major player in pushing webm forward. Is it even webm or x264? On mobile.
Can't check right now.)

~~~
underwater
gfycat.com and others have been doing this for a while.

------
megablast
This is what I see on the page:
[http://i.imgur.com/wFjEY8t.jpg](http://i.imgur.com/wFjEY8t.jpg)

I can understand why twitter is saving money on hosting these new "gifs"

------
cosmeen
This is what Gfycat [http://gfycat.com/](http://gfycat.com/) is been doing
since last year but as a service.

------
RRRA
The saddest part is that you can't add a zip to that gif and use twitter as a
sharing platform.

cat x.zip >> y.gif and upload would have been nice ;)

~~~
shawnz
Combined with twitter's link shortening, you could use this instead:
[https://code.google.com/p/furl/](https://code.google.com/p/furl/)

------
user24
Great, and we've lost the ability to save them to your computer, and to share
them outside of twitter's ecosystem.

------
malkia
I would think it's to avoid any traces of steganography... naaah I'm just
kidding....

------
johnnymonster
Does anyone know what they are doing for the conversion? Any services out
there do this?

------
goblin89
For me the main lesson here is that I should be more attentive and
investigate. I remember noticing some un _gif_ fy vibe about animated clips on
Twitter, but quickly dismissing the observation. Perhaps if my timeline
contained a lot of GIFs I'd dig deeper, but it doesn't help feeling shallow.

------
webXL
This is an automated fix. Animated GIFs are the hack!

------
zobzu
its like many other sites do it and its much better that way

------
tomphoolery
attn: reddit, please do this

------
neotoy
Hopefully this will contribute to the extinction of gifs.

------
raverbashing
I had noticed that. Because of flashblock.

Yeah, a 20+ years file format doesn't do compression between frames, who would
have thought...

~~~
ars
Except that it does do that, the article is wrong.

As I wrote in a different comment the actual reason is lossy jpeg compression,
not intra frame compression.

~~~
raverbashing
Aah you're right.

Yeah, for pictures jpeg is much better (and smaller) than gif.

Not to mention in several gifs they really reduce the quality to have a
smaller file size

