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.