Bruce Lawson’s personal site

Video as the new GIF in Safari

The latest pre-release of the next version of Safari is chock-full of exciting web technologies like Service Worker, Web App Manifest, Payment Request API. Congratulations to the webkit team – this looks to be great work.

One aspect of the release hasn’t met with universal acclaim, however. That’s the ability to have a short, silent video as the source of an <img> element:

<img src="adorable-cat.mp4" alt="adorable cat tears throat out of owner and eats his eyeballs">

This is basically designed to do the same job as an animated GIF, but more performantly. As Colin Bendell writes,

Early results show mp4s in <img> tags display 20x faster and decode 7x faster than the GIF equivalent – in addition to being 1/14th the file size!

People have commented that this isn’t “standard” – but there is no “standard” for the format of images. We’ve used GIF, JPG and PNG because they’re supported everywhere. But nowhere is there a prescription of what kind of images are allowed or disallowed on the <img> element.

Animated GIFs were always a hack; the GIF specification says

The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.

The best way to serve mp4 images with fallback to GIF etc for non-supporting browsers is to use the <picture> element, which was invented by a team of legendarily gorgeous chaps, and Marcos Cáceres:

<picture>
  <source type=video/mp4 srcset=adorable-cat.mp4>
  <img src=adorable-cat.gif alt="adorable cat tears throat out of owner and eats his eyeballs">
</picture>

However, as Colin Bendell also writes

there is this nasty WebKit bug in Safari that causes the preloader to download the first <source> regardless of the mimetype declaration. The main DOM loader realizes the error and selects the correct one. However, the damage will be done. The preloader squanders its opportunity to download the image early and on top of that, downloads the wrong version wasting bytes. The good news is that I’ve patched this bug and it should land in Safari TP 45.

Given that these mp4 animations will not play sound (so make sure you strip out the audio to make it even smaller), and are more performant than GIFs, I welcome this addition from the webkit team.

4 Responses to “ Video as the new GIF in Safari ”

Comment by nothrem

It’s worth noting that Safari and iOS since version 8 supports animated PNG (APNG) which supports True-color and 15-level 7zip compression so the GIF limitations are not that important.

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.