影片轉檔小動畫放網頁上? mp4 轉 gif、webp

GIF 圖檔、WebP 都能讓靜態無趣的圖片動起來，且不用像影片還需要使用者按下播放，就會自己開始播放，就像網頁上的動畫一樣。且能直接將 mp4 影片轉檔成 gif、WebP，不用什麼複雜製作手法。

gif、WebP動畫示範

上面可以看出，將影片轉成 gif 或是 WebP 將大大增加頁面的吸引力和表達力！尤其在介紹方案的著陸頁（Landing Page）是常用的技巧。

如何將影片轉為 gif、WebP 動畫？

轉 gif、webp 非常容易，只要像轉檔一樣透過工具

google 搜尋一下就能找到很多線上轉換的工具。但是有些可能會需要付費。

而本文要介紹的方法完全免費，透過安全的開源軟體

FFmpeg 是完全開源的免費軟體！雖然使用方式要開打黑黑的終端機來下指令，但其實很簡單，轉成 gif 或 webp 的指令我都幫你整理好了，直接複製使用吧！

FFmpeg 簡單介紹

FFmpeg 是一個跨平台的音訊、視訊處理核心。可以錄製、轉換、串流市面上幾乎所有的音視訊格式。採用 LGPL 和 GPL 授權。

• 免費且開源：所有原始碼都在 GitHub 上公開
  功能超強大：支援上千種音視頻格式和編解碼器
  跨平台：Windows、Mac、Linux 都能用
  命令列工具：透過指令進行各種複雜操作

ffmpeg 下載安裝

請點擊下方按鈕到 ffmpeg 官方網站下載安裝後，就可以使用我下方的指令來做轉換。

下載 ffmpeg

ffmpeg 影片轉檔成 gif、webp 網頁可用動畫

ffmpeg：mp4 轉檔 gif

假如你的檔案位置在:

C:\Users\PRY\Videos\我的影片檔案.mp4

ffmpeg 轉檔指令:

ffmpeg -hwaccel auto -i "C:\Users\PRY\Videos\我的影片檔案.mp4" -vf "scale=600:-1,fps=12,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse=dither=bayer:bayer_scale=2" "C:\Users\PRY\Videos\我的影片檔案.gif"

windows 和 Mac 在檔案上方按右鍵，都有一個複製路徑可以選，就會知道檔案位置了。

把上述 C:\Users\PRY\Videos\我的影片檔案.mp4 改為你要轉地的檔案的位置即可。

ffmpeg：mp4 轉檔 Webp

ffmpeg -hwaccel auto -i "C:\Users\PRY\Videos\我的影片檔案.mp4" -c:v libwebp -lossless 0 -quality 75 -preset default -loop 0 -vf "scale=600:-1,fps=12" "C:\Users\PRY\Videos\我的影片檔案.webp"

圖片大小選項：影響檔案大小最大因素

如果你要放到網頁上，你會發現不論是 gif 還是 webp 檔案都很大 (尤其 gif 實測同畫質下檔案大 3 倍！)。所以犧牲畫質是必須的。

而影響畫質最大的因素就是圖片大小，因此我上面的指令有加入轉為 600 寬度的圖片動畫。如果你想再縮小、或是提高，請改：

scale=600

顯卡 GPU 硬體加速運算

建議一律用 auto 讓 ffmpeg 自動偵測即可

指令前面的 -hwaccel auto 是啟用顯卡加速轉檔，如果知道自己的 GPU 種類也可以自行改成下面：

NVDIA 顯卡

-hwaccel cuda

intel 處理器的內顯

-hwaccel qsv

AMD 顯卡

-hwaccel d3d11va

通用加速(自動偵測)

-hwaccel auto

如果遇到一直無法轉檔成功，也可以把 -hwaccel auto 完全拿掉，讓 CPU 來跑就好，雖然會比較慢。

各種問題直接問 AI，請他幫你調整。

其實 ffmpeg 的指令非常多，如果你轉出來的檔案太大、太小，想調整尺寸、品質等。都可以問 AI 請它幫你生成新的指令。我這邊只是拋磚引玉，告訴大家 ffmpeg 可以幫你轉檔，免去你找一些須付費的線上轉檔網站，還不一定比較好用 (因為它們背後也是用 ffmpeg! )。

動畫究竟要轉 GIF 還是 WebP 呢?

建議優先選擇 WebP，因為檔案小很多

放網頁上很重要的就是檔案大小，盡量不要讓單個圖檔超過 2MB、而實際上最好情況最好控制在 1MB 之內。你會發現不論 GIF、WebP 都很難做到。

因此請一定要只擷取最精華的幾秒鐘來展示，就像我文章開頭示範的動畫一樣，就幾秒鐘，畫質也看得出被壓縮過，這樣大小是多少呢? 答案是 976KB

早期因為網頁支援性不同，很多舊裝置只支援 GIF 動畫而不支援較新的 WebP。現在手機滿街跑、電腦設備網頁技術也已輪了一大輪，我認為現在可以安心選擇 WebP 了。

但實際上來說，除了 WebP 也沒其他選擇了，除非你的影片可以更短，否則 GIF 的動畫檔案大小實在太大，不太可能擺上網頁。