A quick update,
Chrome does a terrible job with huge gif files, they can choke the web browser and cause all sorts of nasties not to mention mobile paying a hefty price on traffic and blowing data plans.
Gifv technique championed by imgur is good
https://i.imgur.com/zvATqgs.gifv
<video id="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop" poster="//i.imgur.com/zvATqgsh.jpg">
<source src="//i.imgur.com/zvATqgs.webm" type="video/webm">
<source src="//i.imgur.com/zvATqgs.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" height="370" width="660" data="//s.imgur.com/include/flash/gifplayer.swf?imgur_video=//i.imgur.com/zvATqgs.mp4&imgur_width=660&imgur_height=370&imgur_url=//imgur.com/zvATqgs">
<param name="movie" value="//s.imgur.com/include/flash/gifplayer.swf?imgur_video=//i.imgur.com/zvATqgs.mp4&imgur_width=660&imgur_height=370&imgur_url=//imgur.com/zvATqgs">
<param name="allowscriptaccess" value="never">
<param name="flashvars" value="height=370&width=660">
<param name="width" value="370">
<param name="height" value="660">
<param name="version" value="0">
<param name="scale" value="scale">
<param name="salign" value="tl">
<param name="wmode" value="opaque">
</object>
</video>
It’s really just a video element with a bunch of fallbacks.
I see a few actionable things we can do here:
-
If people hotlink anything larger than say 10mb force a “click” to actually download the image and hide it behind a preview
-
get ffmpeg into our base image and do the webm and mp4 conversion for all animated gifs, don’t worry about the flash fallback.
-
Offer an integration piece with imgur that uses imgur to do this … any gif larger than X gets sent to imgur for recompression. (or use a different service)