原來 img src 也支援 mp4（Safari 限定）

2023年9月11日 Front-end

有些網站會用 GIF 來做一些圖檔，畢竟會動嘛，看起來就比一些靜態的圖片還要厲害，還要來得更吸引人。或其實不只是因為吸引人，而是有些需求本來就需要一個會動的圖，例如說貼圖，會動是很正常的。

但是 GIF 的缺點之一眾所皆知，就是檔案很大，真的很大。尤其是手機上因為解析度比較高，可能會需要用到三倍大小的圖片，就算只顯示 52 px，也要準備 156px 的圖檔，佔的空間就更多了。以網頁來說，當然是要載入的資源越少越好，越小也越好。

因此，很多網站會改用 <video> 標籤來呈現這些動圖，只要先轉成 mp4 格式，檔案大小就能小很多。不過轉成 <video> 的問題大概就是原先用 <img> 的一些好處會不見，像是 lazy loading 似乎就沒有原生支援，有一些麻煩。

而我在查資料的過程中，居然意外發現在 Safari 上面，<img> 是支援 mp4 的！也就是說，你可以這樣做：

<img src="test.mp4">

而且這個功能推出很久了，從 2017 的時候就有了：Bug 176825 - [Cocoa] Add an ImageDecoder subclass backed by AVFoundation

我是從這篇文章知道的：Evolution of <img>: Gif without the GIF

如果 <img> 裡面也可以放 mp4 的話，就可以同時利用到兩者的優點，又不用換標籤，又支援 lazy loading，然後檔案大小又一下縮減了許多。

但可惜的事情是，只有 Safari 有支援而已，就算過了六年，在 Chromium 以及 Firefox 上都沒看到這個功能，而且未來也沒什麼機會看到了。

之所以會這樣講，是因為 Chromium 已經明確表示不會支援，討論串在這邊：Issue 791658: Support <img src=”*.mp4”> ，在 2018 的時候就已經被標記為 Wont fix，理由如下：

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.

第一點提到的是 WebP 其實也有個 Animated WebP 的格式，可以放在 <img src> 裡面而且也會動，檔案大小更小，其他優缺點可以參考 Google 自己寫的：使用 WebP 動畫有什麼好處？

而第二點是在說比較新的圖片格式 AVIF 也有 Animated AVIF，同樣也支援動圖。

如果這些新的圖片格式都可以取代 GIF 的話，好像確實沒什麼必要一定要使用 mp4？

而 Firefox 的話雖然沒有說不會做，但是 issue 也已經很久沒動了：Add support for video formats in <img>, behaving like animated gif

也有人希望可以把這個功能加入規格，但也有一陣子沒有動靜：Require img to be able to load the same video formats as video supports #7141

總而言之，看起來這個功能應該只會在 Safari 上面有了。

可惜我在用的 image service 的自動轉檔功能只支援 GIF 轉 mp4，不支援轉成 animated WebP 或是 animated AVIF，不然就超方便的。

總結

如果想要繼續用 <img> 來放動圖的話，最完整的方式應該是使用 <picture> 標籤搭配多種檔案格式，像這樣：

<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>