Some websites use GIFs for certain images because they are animated and appear more impressive than static images. Sometimes, the need for an animated image arises, such as in the case of stickers where animation is expected.
However, one of the well-known drawbacks of GIFs is their large file size. Especially on mobile devices with higher resolutions, larger images are required. Even if only a 52px image is displayed, a 156px image needs to be prepared, resulting in increased file size. In terms of web development, it is always better to have fewer and smaller resources to load.
Therefore, many websites have started using the <video> tag to display these animated images. By converting them to the mp4 format, the file size can be significantly reduced. However, there are some downsides to using the <video> tag instead of <img>, such as the lack of native support for lazy loading and other inconveniences.
During my research, I unexpectedly discovered that Safari actually supports mp4 in the <img> tag! This means you can do the following:
<img src="test.mp4">This feature has been available since 2017: Bug 176825 - [Cocoa] Add an ImageDecoder subclass backed by AVFoundation
I found out about this in the following article: Evolution of <img>: Gif without the GIF
If <img> can also support mp4, we can take advantage of the benefits of both tags without having to switch tags. We can have lazy loading support and significantly reduce the file size.
Unfortunately, this feature is only supported in Safari. Even after six years, I haven’t seen this functionality in Chromium or Firefox, and it seems unlikely to be implemented in the future.
Chromium has explicitly stated that it will not support this feature. The discussion thread can be found here: Issue 791658: Support <img src=”*.mp4”>. It was marked as “Wont fix” in 2018, with the following reason:
Closing as WontFix per c#35, due to the following:
- The widespread adoption of WebP (addresses CDN use case)
- Forthcoming AV1 based image formats (ditto).
- Memory inefficiency with allowing arbitrary video in image.
- Most sites have already switched to <video muted> now that autoplay is allowed.The first point mentioned that WebP actually has an Animated WebP format that can be used within the <img src> tag and is also animated. It has even smaller file sizes. For more information on the pros and cons, you can refer to Google’s own documentation: What are the benefits of using animated WebP?
The second point mentions that the newer image format AVIF also has Animated AVIF, which also supports animated images.
If these new image formats can replace GIFs, it seems that there is no real need to use mp4.
As for Firefox, although they haven’t explicitly stated that they won’t implement this feature, the issue hasn’t seen much activity for a long time: Add support for video formats in <img>, behaving like animated gif
Some people hope to add this feature to the specification, but there hasn’t been much progress for a while: Require img to be able to load the same video formats as video supports #7141
In conclusion, it seems that this feature will only be available in Safari.
Unfortunately, the image service I am using only supports converting GIFs to mp4 and does not support converting to animated WebP or animated AVIF, which would have been very convenient.
Summary
If you want to continue using <img> for animated images, the most comprehensive approach would be to use the <picture> tag with multiple file formats, like this:
<picture>
<source type="image/avif" srcset="test.avif">
<source type="video/mp4" srcset="test.mp4">
<source type="image/webp" srcset="test.webp">
<img src="test.gif">
</picture>This ensures that the results are displayed correctly on every browser and selects the image with usually smaller file size.
I tried it out myself with a simple gif that had an original size of 75 KB:
After converting it to WebP, it became 58 KB (-22.6%):
Converting it to mp4 reduced the size to 17 KB (-77.3%):
Converting it to AVIF reduced the size to 11 KB (-85.3%):
It seems that the latest file formats are quite impressive, reducing the size significantly.
Comments