Gfycat - Jiffier gifs through HTML5 video conversion | Hacker News Reader

Gfycat - Jiffier gifs through HTML5 video conversion

gfycat.com

236 pointsBeTmAsTeR72 comments

Try MediaCrush. It's been on HN a couple times, and it also does the GIF->HTML5 thing, but it's open-source and has a lot of other benefits, like browser extensions and a nice API.

https://mediacru.sh

Prior discussions: https://news.ycombinator.com/item?id=6773039 and https://news.ycombinator.com/item?id=6189397

Open source: https://github.com/MediaCrush/MediaCrush

Browser extensions: https://mediacru.sh/apps

API: https://mediacru.sh/docs

If someone can create a simple Firefox/Chrome addon that takes imgur .gif links, and automatically converts the URL from this:

    http://i0.kym-cdn.com/photos/images/original/000/666/838/7fb.gif

To this:

    gfycat.com/fetch/http://i0.kym-cdn.com/photos/images/original/000/666/838/7fb.gif

I'm sure it would easily become a top 20 addons hands down.

I'm using a greasemonkey script.

https://www.reddit.com/r/gfycat/comments/1s0fip/extension_fo...

Extension is now published, though there is no fancy art yet:

https://chrome.google.com/webstore/detail/autogfy/aleldfepmn...

Enjoy!

Can you put the source on Github please?

Done.

https://github.com/Imdsm/AutoGfy

Wow, this is soooo helpful. Seriously, thanks a bunch for making this. Works just as I envisioned it.

This extension works really well.

Feature request: I would like to be able to use some kind of wildcard/regex system to select which websites or domains it works on.

I will look at this later on.

Really they should convince imgur to use this tech and replace all gifs directly.

Imgur is pretty profitable [1], they may even want to consider buying this company.

[1] http://www.businessinsider.com/imgur-is-officially-bigger-th...

Page views != profitable

Read the last line of the article

"Imgur is also profitable thanks to its paid Pro subscriptions and deals with advertisers."

Firefox, first try:

http://mr-andersen.no/div/send-to-gfycat.xpi

Edit: If you want to inspect the source, download the file and rename the extension to zip.

Edit2: You may have to download the file and drag it into Firefox in order to install.

Renamed to gfycat - Firefox Add-on

https://addons.mozilla.org/en-US/firefox/addon/gfycat-firefo...

Added similar functionality as imdsm's Chrome version, https://news.ycombinator.com/item?id=6976059

Renamed to gfycat Companion for Firefox ;)

https://addons.mozilla.org/en-US/firefox/addon/gfycat-compan...

If anyone uses RES for reddit I just finished up support for converting gifs to gfycat links with the inline image viewer.

https://github.com/honestbleeps/Reddit-Enhancement-Suite/pul...

Is this now live?

I already made a bookmark for this. Posted the code to some places too.

I wrote a Chrome extension called GfyFetcher that adds a context menu item for fetching gifs with Gfycat: https://chrome.google.com/webstore/detail/gfyfetcher/logiomo...

Source here: https://github.com/engstrom/GfyFetcher

This post inspired me to make Imgur-to-gfycat[1][2], which uses the gfycat api to change <img> tags to embedded gfycat objects using gfycat's embed js, and changes anchors to /fetch urls. It's smart enough to change other anchors on a page if it's managed to resolve a gfycat url, and has a few hacks to work well with Reddit Enhancement Suite.

[1] https://chrome.google.com/webstore/detail/imgur-to-gfycat/id... [2] https://github.com/STRML/Imgur-to-Gfycat

Been using this on reddit for the past couple of weeks, and it works wonders. It's especially handy on mobile, where bandwidth can be scarce.

But what has really struck me about the mobile experience is that using HTML5 video significantly improves the performance. This is important for GIFs/videos with a high resolution, which as GIFs would not render in real time on my phone (which has an S800, so I can only imagine what the experience must be like on other phones).

I imagine it's because your phone has hardware H.264 decoders, while GIF is being done in CPU.

No, every mobile can process a 80ties picture format in tiny resolutions. 90ies computers could do that without a problem without any allocation an needed only a fraction of their cpu. Now we have quadcore cpus clocked at >1 GHz in our mobiles. It's just the saved bandwidth. And, btw, hardware allocation is a way overrated. There is a HEVC software implementation for the iphone. Just compare the complexity of HEVC to GIF.

The problem isn't the peak capability of the hardware: it's the strategy used to handle the content. In most web browsers animated GIFs are treated as images, which depending on the browser causes a whole host of potential side-effects (kept around or animating when offscreen, all frames kept in memory, etc.)

Video is video and is in general more properly streamed, evicted from memory, and halted when offscreen.

Yep.

"... But in the worst case all your elements might be grouped into a single layer and the browser has to repaint every single element. And, when it’s done, it still needs to upload everything to the GPU. All of this is work occurs for every GIF frame..."

http://www.html5rocks.com/en/tutorials/speed/animated-gifs/

> No, every mobile can process a 80ties picture format in tiny resolutions. 90ies computers could do that without a problem without any allocation an needed only a fraction of their cpu

GIF's are really a nineties format (90ties??), the animation and alpha components weren't added to the standard until 1989, and adoption wasn't widespread until after then.

You're also overlooking the fact that you simply didn't get 4.5MB+ GIFs in the nineties like the example given because it would take ten minutes to download that on a 56K modem. I must resign myself to the fact some people never grew up with dial-up!

Animated gifs in 1995 were rather different to animated gifs now.

Imgur should do something like this when people are viewing gifs at the Imgur site itself (as opposed to viewing a hotlinked gif file), automatically replacing the embedded GIF file with a video. I imagine they could save a lot in bandwidth costs

As long a imgur promises to never play audio, I think everyone would be very happy with that feature.

Or just to play audio only on a second level of activation, like Vine does now.

They could serve webp files to browsers that claim to support them in their request headers.

It can confuse users that save files to not actually have a gif, though.

When you right click in chrome it says "Save video as..." so I think that's not a problem.

GIF is a terrible format for video, but OTOH it's fairly lightweight for the browser for simple animation. Historically, playing video in the browser has required loading plugins, increasing the attack surface of the browser quite a bit, as well as inflating memory usage, increasing fragility, etc.

HTML5 video is also blocked by my flash blocker. Up until the latest version of Firefox, animated gifs were blocked by my use of image.animation_mode:once in about:config. Providing the element is clickable, the flash blocker makes it easier to play back the desired video on demand.

Is OTOH really an acronym people are using now?

AFAIK, yeah.

IIRC it's been at least a decade.

TBH I've used it for over a decade.

Earliest usage of the term I can of the term on newsgroups is 1988.

I was certainly using it in the early 90s.

Weird. I've been online since the mid 90's, mostly on IRC and newsgroups, and have never seen it. TIL.

I've seen this used on IRC for approximately 7 years.

> but OTOH it's fairly lightweight for the browser for simple animation.

Historically, this hasn't been the case. Certain browsers used to process the entire gif up to the current frame when rendering a new frame, causing long gif animations to slow down progressively.

That sounds like a "feature" which could be used in interesting ways.

Gif is terible. APNG are way better but only firefox support them. https://people.mozilla.org/~dolske/apng/demo.html

That idea originated from https://mediacru.sh/ - I read that article and considered doing my own "gfycat" site, it looks like someone had the motivation to go through with it after all :)

Look at the whois records

> The problem is that html5 video doesn't work everywhere (we actually encode six different videos to cover the most browsers)

Six different videos?? Anyone knows more about html5 video fragmentation and why six videos are required?

They offer the ability to playback in reverse, so I imagine it's three different formats, doubled so that there's a reverse copy of each video.

If I had to guess, they're probably encoding MP4/H.264, WebM/VP8, and Ogg/Theora.

So close:

> Note that there are 6 separate encodings -- mp4, webm, and reduced mp4, for forward and reverse

That makes sense - looks like WebM/VP8 support in browsers is a superset of Ogg/Theora support [1]. It would be silly to serve up Ogg/Theora unless it yielded better quality/bitrate (and I'm not up-to-date on how those two compare in quality at the same bitrate).

[1] http://beta.caniuse.com/#search=video

I love the naming scheme (AdjectiveAdjectiveAnimal) you have used, and wonder whether or not it could hilariously backfire (e.g. the Scunthorpe/Buttbuttinate problem)

For a cross browser solution that just needs one video file, supports mobile browsers and still has a much smaller file size than GIF try jsmpeg: http://phoboslab.org/log/2013/05/mpeg1-video-decoder-in-java...

This is like the old ImageShack and PhotoBucket days. The most important thing in deciding between all these competing services is figuring out whose links will still work five years from now.

I guess the pg question here would be: What happens, if imgur decides they want in on the action?

I cobbled together a similar service [1] a while back, but lost interest since I figured it wouldn't be profitable. FWIW the tech behind doing something like this is pretty simple, in my case a small shell script that uses imagemagick to dump the frames of the GIF as well as its framerate and then pipes into ffmpeg compiled with x264 and libvpx support.

[1] http://www.qwikgif.com/

This is excellent. I've been dealing with weather radar images lately, and they're all terrible animated gifs. This sizes them down nicely.

A service like this really needs to support oEmbed. The oEmbed spec is pretty simple and it would make this more widely usable by popular blogging platforms, and make it easier to use on responsive websites. http://oembed.com/

> I've been dealing with weather radar images lately, and they're all terrible animated gifs

actually, weather radar is an ideal use-case for GIFs. they have limited colors, only a few dozen frames which may need to be delayed for a few hundred ms.

you should really try compressing the gifs using something like gifsicle [1], you'll be astounded by the resulting size (use lzw compression), quality and performance (use a global color palette). it will surpass any video you can make.

what GIFs are terrible at is photographs and video. for the majority of graphics and animations they're awesome sauce.

[1] http://www.lcdf.org/gifsicle/

As someone who's messed around with gifs a fair amount, I recommend using Imagrmagik over gifscicle since Imagemagik offers far more features and can do a much wider variety of compression on gifs.

You're correct: Radar is pretty well suited for a gif. But, it can still lead to 400kb images that are 150kb when h.264 video. For a mobile connection, that's worth caring about.

yes that thanks. gif takes 10x more bandwidth than modern compressed video average (because generally its lower quality)

so fuck gif, really. ive been annoyed by this for a while. even saw sites that find it smart to replace flash videos with gif.

Thank god someone is doing this. I'd been looking for a way to dedicate a core of my laptop to animated gifs.

What format are you converting the GIF to?

The reason for GIF is simple: It autoplays on mobile web reliably.

There is no other reason not to use video.

Is there any way of doing this offline for large animated GIF collections?

ffmpeg can load GIFs and encode into about any video format.

you could look at the source of mediacrush for this. https://github.com/MediaCrush/MediaCrush

Edit: It uses ffmpeg

we badly need a copy pastable video format just like gif. The default html5 video is too video-ish not gif-ish enough.

+1 Go F* Yourself Cat

Handy tool for Reddit users

that's one hell of a sample video

other than that: awesome

Are you feeling sorry for the kid or the cat?

Both? The parents (or whoever shot that video) are obvious assholes.

gfycat is awesome!

you guys will be acquired by imgur

Reply on news.ycombinator.com