跳至主要内容

可麗餅幫我省了二十萬

· 閱讀時間約 3 分鐘

可麗餅最愛的休息地點之一,是我的電腦主機上。我猜大概是因為那裡很暖、還會微微震動,有按摩床的感覺。我平常是不太介意她躺在那裡⋯⋯直到昨天中午,她決定在上面嘔吐

(就是這裡)

我的機殼是那種有一大堆通風洞洞的設計,所以嘔吐物就直接流進了主機裡。

案發當下其實我在琴房裡工作,沒有目擊到現場。根據檸檬卷的證詞,她聽到電腦發出「碰」的一聲,接著聞到燒焦味,然後就馬上叫我出來。

我衝出房間,急忙把所有插頭拔掉的同時,人生跑馬燈式地閃過了 GPU 和 RAM 現在的市場價格,並且開始祈禱:「拜託!隨便什麼地方壞都可以,千萬不要是 GPU 和 RAM 燒掉呀!」這台是兩年前買的電腦,AMD 的 24 核心 CPU、128 GB RAM,還有兩張 Nvidia RTX 4000,當時就已經不算太便宜,但如果是 2026 年的現在要配到這規格,絕對是要接近二十萬了呀!

工作結束後,我就緊急把主機抱去 MAQ 維修。順帶一提,我真的超推這家店,他們的價格也許貴了一點點,但老闆真的超級專業、服務超好,對待電腦就像是對待精密工藝品一樣。如果是工作上的重要機器,交給他們處理真的超放心。

結果拆機一測:可麗餅嘔吐的點,剛好位於電源供應器上方,所以液體流進去後只燒掉了電源供應器,其他昂貴的部份──CPU、GPU、RAM、主機板──全部都沒事!謝天謝地我的 GPU!我的 RAM!

(耶!我的 GPU 和 RAM 都活著!)

最後我「只」花了幾千塊換掉電源供應器,電腦就起死回生啦!

我也順便把原本的水冷散熱換成空冷(簡單地說就是靠風扇散熱)。原本機殼正上方是水冷散熱器排熱的地方,不能把那裡堵住;換成空冷後,就變成是風扇往機殼後方排氣了,那我以後就可以在機殼上方堆東西來防堵可麗餅,而不會影響散熱。

老闆還很貼心地用雙面膠加上塑膠袋,幫我在機殼上方做了「防貓嘔吐機制」。

(DIY 防嘔吐機制)

老闆說,我還不是最慘的案例。他有另一位客戶,新電腦才交機一週,貓就直接尿在上面,整個主機板就毀了。相較之下,可麗餅只是吐而已,而且還懂得吐在最便宜的零件上方,簡直是天使。

我才剛把主機抱回家,就坐下來打這篇 blog。今天有一種撿到二十萬的感覺,還多了一個 blog 主題。感謝可麗餅!

綁約

· 閱讀時間約 4 分鐘

巷口的魯肉飯不會綁約。

老闆不會在你點第一碗的時候,要求你簽一份「月繳型年度計畫1」合約,逼你一定要連續吃一年。老闆唯一留住你的手段,就是把魯肉飯做好。你今天覺得好吃,明天自然就會想再來吃,直到永遠。

「綁約」往往是服務品質的反指標。因為對自己有信心的人,根本不需要靠綁約來留住對方。

綁約圖鑑

走進健身房,業務一跟你對上眼,就開始瘋狂想用折扣、贈品等等手段,誘騙你簽下三年的長期合約。他們一副很關心你身體健康的樣子──事實上,他們最希望你簽完約走出門後,就徹底忘記這間健身房的存在(記得付錢就好,別來占著我們的器材)。

有些音樂教室會要求學生預付整期學費,並規定老師在學生請假時,一定要另找時間幫學生「補課」(而不能直接跳過那堂課)。表面上是為了學生的進度著想,但更多是為了確保教室的現金流。結果就是,學生被迫在三天內連上兩堂課,沒有時間練習、也吸收不了新內容,只為了讓教室的收支表好看一點。

結婚是更危險的綁約。有些人一旦結了婚,就會產生一種「反正取消訂閱的違約金太高,你很難離開我了」的傲慢心態,於是開始展現各種瘋狂行徑。(嗯,為什麼我會知道呢?)

說到違約金,怎麼能不提 Adobe 這個史上最猖狂的勒索集團呢?他們在訂閱頁面上,用貌似優惠的價格誘拐你訂閱最高級的 Pro 方案(而把更便宜的 Standard 方案藏在頁面最下方2),並且絕口不提這只是第一年的優惠,第二年價格是幾乎兩倍唷!訂閱頁面寫著「14 天內取消訂閱可獲得全額退款」,卻刻意忽略如果你在第 15 天後取消,不僅只能用到當月為止,還要另外付「剩下沒用到的月份的 50% 價格」當作懲罰!3 4

綁人是會造成惡性循環的:因為怕對方走所以綁越緊 → 認為對方跑不掉而降低品質 → 對方更想走 → 更害怕對方走、綁得更緊。

隨時可以走

不綁約未必就對賣方不利。

例如,我的鋼琴課就從不要求預收學費、也不綁約,這其實也是在保護我自己──如果遇到頻率不對、真的教不下去的學生,我也可以選擇主動結束,不會落入「因為已經收了三個月的學費,只好硬著頭皮上完課」的痛苦情況。

另一方面,這也確保了學生每次來上課,都是因為當下真的想上課才來的,而不是「錢都已經付了只好把課上完」。這樣上起課來,雙方的感覺都更好。

最好的留人策略

想留住一個人,最有效的方式就是跟對方說「你隨時可以走」。

能說得出這句話的底氣,正是對方捨不得離開的原因。

Footnotes

  1. 這是 Adobe 用來誤導你的話術:明明就是「綁約一年」,但刻意用「月繳」兩個字偷換重點,讓消費者誤以為自己可以隨時喊停。

  2. 自己去看,看看你能不能找到 Creative Cloud Standard 方案?

  3. Adobe 的合約原文:您可以隨時透過 Adobe 帳戶或聯絡客戶支援取消訂閱。如果您在提交初始訂單後 14 天內取消,您將獲得全額退款。如果您在 14 天後取消,我們將向您收取剩餘合約款項總額的 50%,而您的服務將繼續直到該月的帳單周期結束為止。

  4. 舉個例子:如果你在 1 月 1 日付了 1,270 元訂閱,到了 1 月 15 日突然發現自己不需要,決定取消。你不但只能用到 1 月底為止,而且還需要付剩下 11 個月價格的一半(1,270 × 11 ÷ 2 = 6,985 元!),加上你第一個月已經付的 1,270 元,總共是 8,255 元!

密室逃脫癮

· 閱讀時間約 4 分鐘

自從上次跟只贏一起去玩密室逃脫之後,我染上了「密室逃脫癮」。好想要找東西、動腦、解謎喔!

於是,為了滿足這個癮,我找到了 Blue Prince 這個遊戲。(官網預告片 YouTube 連結

尋找密室

Blue Prince 不是一個密室「逃脫」遊戲,反而是「尋找」密室的遊戲。

它的故事是:你繼承了一棟豪宅,豪宅裡有 45 個房間,但這 45 個房間每天都會長得完全不一樣──昨天的書房,今天可能變成廚房;今天的臥室,明天又變成走廊。你的任務,是找到那間神秘的「第 46 個房間」。

回想上次去玩實體密室時,小天使1提示實在給得太快,我都還沒來得及好好思考,答案就直接塞過來了。雖然我知道是因為實體遊戲有時間限制,他們不希望玩家卡太久,但是沒完全靠自己解出來,就是有點不夠爽快。

所以這次玩 Blue Prince2,我決定不查攻略,嘗試靠自己的力量破關。

這個遊戲非常考驗觀察力,並且需要大量的英文閱讀(沒有其他語言版本),我還準備了一本筆記本來記錄線索,已經寫了十幾頁。許多謎題都滿難的,但靠自己的力量解開謎題、獲得一點點進展的時候,真的很爽呀!

玩了幾天,目前遊戲時數快要 20 小時,覺得自己的專注力和閱讀能力都提升了呢!如果你最近覺得自己的大腦被短影片和社群媒體弄壞了,我真心推薦來玩這個遊戲復健一下

這篇我不打算細聊這個遊戲,畢竟我還沒有破關,只是想分享兩件事。

軌跡球好用耶!

第一件事是:用軌跡球玩第一人稱遊戲,意外地好用耶!

我一開始是用 XBox 手把玩,但覺得用右類比搖桿控制視角好遲鈍。後來換成用鍵盤 W S A D 加上軌跡球(我的 Linux 電腦沒有滑鼠),竟然超級順手耶!我現在甚至覺得比滑鼠還要好用!

視角移動又省力又精準,而且因為軌跡球是在原地滾動,不會像滑鼠一樣滑到沒空間還要抬起來移回原地(或是把旁邊的飲料打翻),對於桌面超亂的我來說,超級舒服!

三個盒子

第二件事是:Blue Prince 裡面有一個「三個盒子」的邏輯小遊戲3,我覺得好有趣!

規則是:

  • 有三個盒子,裡面一定只有一個有寶物,另外兩個一定是空的。
  • 每個盒子上面都寫了一句話。
  • 三句話當中,至少有一句是真的,也至少有一句是假的。

你要根據這些資訊,推理出寶物在哪一個盒子裡。

來玩玩看一題吧:

藍色盒子寫:「這個盒子上寫的話是真的。」

白色盒子寫:「黑色盒子上寫的話是真的。」

黑色盒子寫:「寫了假話的其中一個盒子裡面有寶物。」

寶物究竟在哪個盒子裡呢?不告訴你,畢竟我不想當那個太快給出提示的小天使,之後某天再回來更新到文章中。想到答案的話,歡迎分享在自己的部落格上!

解答更新 2026-05-25

Andyttheng 都寫了文章解答這個問題,可以過去看看唷!

Footnotes

  1. 密室逃脫工作人員的俗稱。

  2. 在這遊戲中,你會一直拿著豪宅的設計藍圖(blueprints)──正是「藍色王子(Blue Prince)」的雙關諧音梗。台灣譯名直接用諧音梗翻成《藍途王子》,我覺得滿聰明的。

  3. 很可能是取材於 Raymond Smullyan 的 What is the Name of this Book? 裡面的 The Mystery of Portia's Caskets 章節。

回到學生時代

· 閱讀時間約 3 分鐘

看到 Eo 這篇〈回不去了〉我好有同感喔!

他在文章裡討論一個假設問題:「如果可以時光倒流回學生時代,但所有條件隨機重置,你願意嗎?」Eo 的答案是不要,因為遇到爛同學、爛老師、爛家長,以及被體制邊緣化的風險實在太高了。

我才不要當學生

我的話,當然也是不想回到學生時代。到底是要對現在的生活有多絕望,才會想回去當學生啊?

學生超級可憐的耶!他們其實是最被社會剝奪自由、地位最低的一群人,甚至連嬰兒都不如:

  • 💩 嬰兒想大便直接拉出來就好,學生想上廁所還要舉手被老師批准;
  • 😴 嬰兒想睡覺隨時直接就睡,學生連打瞌睡都要偷偷來,休息時間還要被無數冗事剝奪;
  • 🍑 嬰兒可以光著屁股跑來跑去,學生連制服第二顆扣子沒扣都會被記過。

生小孩的話,他會變成學生耶

這也是我不敢有小孩的主要原因之一。一想到要眼睜睜地看著自己的小孩變成學生,就覺得實在太恐怖了:

  • 📚 他得唸不想唸的課本、忍受無聊的老師、被灌輸一堆我不認同的觀念。
  • 🫥 他沒辦法選擇自己的同學。萬一遇到糟糕的那種,他很可能會 a) 一起變糟糕,或 b) 拒絕變糟,然後被排擠霸凌。
  • 📝 他要跟考試、補習、升學文化搏鬥,順便把整個家庭一起拖下水。
  • 💻 學校從小要求他用 ChromeBook 或 iPad、專有軟體、註冊 Google 帳號,從十歲就開始被精準投放廣告。
  • 📄 他用 Markdown 格式交了作業,老師不知道怎麼打開,責罵他為什麼不用「正常的格式」。
  • 😤 他解釋「要求學生交 Word 檔案,等於是在當微軟的免費業務員」,老師聽不進去、惱羞成怒,直接鬧脾氣給了零分,並在旁標示「格式不符」。
  • 🎪 他被抓去參加啦啦隊和愛國歌曲比賽,每天放學後加練。
  • 🛍️ 他看到 IG 上同學都有什麼,回家要求我買給他,好讓他拍照炫耀。
  • 🫠 而我,會被強行拉進一個充滿虛偽問候、勾心鬥角的家長 LINE 群組
  • 📲 我還會被要求安裝「電子聯絡簿 App」,每天放學後必須打開看老師有沒有更新事項。當然,這個 App 只能從 App Store 下載,並需要開啟所有的手機權限才能正常使用。
  • 🌀 如果他滑短片上癮,我會把他的手機直接丟到樓下去。

何苦呢?如果愛小孩,為什麼要把他生出來,然後讓他去上學?

我自己當過一次學生就夠了。再用家長的身份重來一次?我不要!

離線國語辭典

· 閱讀時間約 1 分鐘

每次想查個字典都要連去教育部的網站,覺得很不方便。於是剛剛把教育部國語辭典公眾授權網裡面的《重編國語辭典修訂本》和《國語辭典簡編本》資料做成了離線版本。

(我知道唐鳳已經做了「萌典」,但我想要更簡單、更輕量的版本。)

因為純粹是自己要用的,所以我把資料庫中我不需要的欄位──部首、筆劃數、同義詞等等──全都刪掉了,只留下注音和解釋。

有兩種版本唷!一種是直接打字就會出現的網頁版:

另一種是終端機版本,只要直接 dic [想查的字] 就會出現解釋啦:

有興趣的話,到我的 code.wiwi.blogGitHub 頁面下載,上面也有安裝說明。

AI 資訊圖美學

· 閱讀時間約 3 分鐘

Windows 95 年代時的科技產品包裝設計,有一種很特別的美學邏輯:為了讓消費者感受到產品「很強大、很科技、很值錢」,所以把所有能代表這件事情的東西,全部塞進一張圖裡面。

像是以下這個 Corel WordPerfect Suite 的包裝盒,設計師大概是這樣想的吧:

先放顆地球吧,因為我們的軟體是全球等級的呀!然後來點意義不明的二進位數字作裝飾⋯⋯喔靠這看起來超科技的,爽啦!

再來,讓一堆簡報和文件從螢幕中飛出來,一定要用飛的唷,因為只要東西會飛,就等於高科技!要確保文件中有 3D 長條圖和圓餅圖,因為長官看到它們就會高潮。然後再放個鍵盤、來幾顆閃閃星光、當然要放招牌的 Corel 熱氣球。嗯,想不到還能加什麼,那再加上更多的意義不明的二進位數字好了⋯⋯哇靠這看起來超豐富的,爽啦!

對了,怎麼能忘記告訴大家,我們有 150 個字體,還有一萬張美工圖案呢?

現在到處看到 A 寶們生成的「懶人包資訊圖片」,總讓我想起這樣的包裝盒。一張圖片裡面塞了七八個圖示、三種字體、五個色塊、一堆沒必要出現的箭頭和步驟說明,角落還有齒輪、燈泡、放大鏡等「象徵思考」的小物,硬要假裝這張根本沒在思考的圖正在思考。

差別只在於,90 年代的包裝盒其實帶著一顆笨拙的真心,它只是想說「我超想讓你看看我的產品,我真心覺得它很酷」;而 2026 年的 AI 資訊圖,只散發著「我花了三秒鐘生了一張圖,現在請給我流量」的廉價感,讓人想要火速逃離現場。

欸,不要因為現在圖片生成模型中文字終於不會亂碼了,就硬要把每一篇貼文畫成「自以為資訊量很大」的圖好嗎?這樣並不會看起來比較有料,讀者看了也不會高潮,頂多只是讓三十年後的人有東西可以拿出來嘲笑而已。

(以下這張:我沒有給 ChatGPT Images 2 看過 Corel WordPerfect Suite 的包裝盒原圖,光憑文字敘述它就完全學到精髓!而且,它還精準地把整張圖畫成了自己正在嘲諷的風格,讓我看到都高潮了,甘拜下風。)

卡了菜渣

· 閱讀時間約 3 分鐘

Kobe Bryant 在 Jimmy Kimmel 的節目中1說過一段話:

"If you're sitting there and eating across me you have something in your teeth. I can have that moment of being uncomfortable and tell you you have something in your teeth, not let you look like an idiot in front of everybody else, or not have that moment and just let you look like an idiot in front of everybody else. So I'm not afraid to tell you you have something in your teeth."

「如果你坐在我對面吃飯,牙齒卡了菜渣。我寧願承受那個不舒服感,直接跟你說:『欸你牙齒卡菜渣了』,也不要因為怕尷尬而不說,而讓你繼續在大家面前出糗。我這個人,是不怕跟你說實話的。」

以前在音樂系琴房練琴,如果聽到隔壁間的人一直彈錯同一個地方──不是不小心失誤的那種喔,是他真的把譜看錯,而且已經把錯誤的版本練到很熟的那種錯──我通常會去門口偷瞄一下看看是誰,如果是認識的人,我可能就會敲門提醒他,說「你看錯譜了」。

這真的不是我雞婆喜歡抓別人錯誤,而是如果沒人跟他講,他在上台演出時就會彈出錯誤的版本,這樣不是害他在更多人面前出糗嗎?所以主動去糾正他,是一種關心對方的表現,對方通常也會謝謝你的提醒。

不過,如果是不認識的人,我大概就不會跟他說了。

牙齒卡菜渣、看譜看錯音這種事,說出來很容易。因為很客觀,一講完對方馬上就可以修正,然後馬上感謝你。

但如果是別的面向就很難這樣做了。例如,當你發現朋友開始沈迷社群媒體、短片刷到品味全滅、中邪變成 A 寶,或價值觀越來越勢利時,去開口提醒就好像在說教或嫌棄對方,而且大概不會得到好的反應2。這種時候,好像真的就只能眼睜睜看著他們一路歪下去

除非真的是非常非常親近的人(例如檸檬卷),不然我真的無法像 Kobe Bryant 一樣,有告訴對方「欸你的價值觀卡了菜渣」的勇氣。

Footnotes

  1. https://www.youtube.com/watch?v=eX3wAZ0yr7w

  2. 原本寫「反饋」,被說是菜渣詞了!我完全沒感覺耶,學到一件事了,感謝提醒。

波希米亞人

· 閱讀時間約 2 分鐘

幫檸檬卷推一下這部影片。

我覺得這部寫得╱剪得很好耶,可惜 YouTube 演算法不這麼認為。

(以下嵌入的是 Wiwi.Video 上的影片,如果你偏好在 YouTube 看,請按這裡。)



高雄市交響樂團在 6/26 和 6/28 會在衛武營歌劇院演出《波希米亞人》。如果你看了這部影片之後有了興趣,想去現場被感動的話,可以用檸檬卷的折扣碼 2026operajanet 買票,有八折優惠唷!

購票連結:https://www.opentix.life/event/2018291334221635585

(你買票的話,檸檬卷不會拿到分潤,但會讓業主相信找她業配是明智的決定。)

說來諷刺,我自己決定停止接業配、減少 YouTube 更新,正是因為不想再為「演算法不推」這種事情焦慮。結果我現在還是在這裡,因為演算法不推檸檬卷的影片而發這篇文章。

我真的很討厭 YouTube,每次發片都讓人心情不好。

是不是該開始大力遊說檸檬卷寫部落格了?

地球上「真正最重要」的軟體

· 閱讀時間約 4 分鐘

才剛寫完一篇用 FFmpeg 製作 WebP 動畫的文章,然後 Lex Fridman 就出了一集超過四小時(!)的 Podcast,訪問了 FFmpeg 的貢獻者 Kieran Kunhya 和 VLC 的核心人物 Jean-Baptiste Kempf。(YouTube 連結

FFmpeg 是什麼?

FFmpeg 絕對是地球上最多人「用過但完全不知道自己用過」的軟體之一。

FFmpeg 可以處理「幾乎所有格式1」的影片、聲音和圖片。不論你想要轉檔、剪輯、壓縮、串流、錄影、加字幕、截圖、做縮圖、合併、分割⋯⋯基本上你想得到的操作,FFmpeg 都可以辦到。

地球上幾乎所有跟影音有關係的軟體和服務都依賴它:YouTube、Netflix、Instagram、OBS⋯⋯甚至連 Mars 2020 火星探測車上面也跑著 FFmpeg,用來壓縮影片和照片。

NASA 的直播中特別提到了 Linux 和 FFmpeg。)

你以為 Instagram 很重要?哼,要不是有 FFmpeg,你可是連一個限動都發不出去呢!這不是我亂講,是 Meta 的官網說的:

"FFmpeg plays an important role in enabling new video experiences... Meta executes ffmpeg (the main CLI application) and ffprobe (a utility for obtaining media file properties) binaries tens of billions of times a day."

「這些新的影片體驗,背後都是靠著 FFmpeg⋯⋯Meta 每天執行 ffmpeg(主程式)和 ffprobe(取得檔案資訊的工具)數百億次。」

──Engineering at Meta

地球上「真正最重要」的軟體們

好可惜,像是 FFmpeg 這些「真正最重要」的軟體,行事都太低調了,完全沒有得到大眾應有的重視。

除了 FFmpeg 以外,我馬上想得到的還有像是:

  • 🗄️ SQLite:資料庫軟體。每一支手機(不論 iOS 或 Android)、每一個瀏覽器、每一個作業系統裡面幾乎都有它,管理著你(根本沒意識到存在)的重要資料2。根據 SQLite 官網,目前世界上有超過一兆個 SQLite 資料庫正在運作。
  • 🗜️ zlib:壓縮函式庫。你每天看的許多網頁(包含這篇)、每個 PNG 圖檔、每個 .zip 檔案,全部都依賴 zlib 的壓縮演算法。幾乎所有「現代人類文明產物」中都有 zlib 的存在!他們在官網狂妄地說,與其列出哪些東西用了 zlib,不如改列「誰沒有用到 zlib」還比較快。
  • ⚙️ GCCLLVM 等編譯器:它們可以用來把人類(或 AI)寫的程式碼,翻譯成電腦能執行的機器語言;沒有它們的話,幾乎所有你叫得出名字的軟體都無法存在。如果說前面的 FFmpeg、SQLite 和 zlib 是「現代人類文明的地基」的話,那編譯器大概就是地基下面的地殼吧。

(我本來還想把 Linux 寫進去,但 Linux 其實已經有很多人知道了。)

這些真正讓世界正常運轉的自由軟體,幾乎都不怎麼賺錢、不擅長行銷、沒有人感謝它們;但如果少了它們,現代文明就會直接停止運作。反觀那些超級知名的軟體和服務──Windows、Photoshop、Google Chrome、Instagram、Facebook──少了它們,地球會怎樣呢?好像不會怎樣耶,說不定大家還會睡得更好呢!

有興趣的話,去聽聽看那集 Podcast 吧(我是前天睡前聽的)!你會發現,這個世界並不只是由 Google、Apple、Microsoft、Meta 等科技巨頭構成的,FFmpeg 和它的自由軟體夥伴們才是真正撐起這個世界的骨幹。

Footnotes

  1. 這不是誇飾,是真的什麼鬼奇怪格式都可以!

  2. 有沒有想過,你的 iPhone 為什麼能儲存簡訊、通訊錄、行事曆、相簿這些東西,而且還可以很方便地搜尋呢?沒錯,就是因為 SQLite

動畫圖的正解是 WebP

· 閱讀時間約 5 分鐘

最近看到 ShuyuEddie 在各自的 Blog 上都提到了關於 GIF 動畫圖的問題。讓我來分享一下我的做法。

(這是一張長達 10 秒鐘的循環動畫圖,檔案大小只有 659 KB!)

GIF 很老

有很長一段時間,GIF(Graphics Interchange Format,圖像互換格式)是唯一能在網頁上顯示動畫的圖片格式,這也是為什麼「GIF」成為了動畫圖的代名詞。

但問題是,GIF 格式非常老舊,1987 年發明,最後一次更新是 1989 年(其實好像也還好,沒有我老?)。如果只是用在 88x31 的小按鈕就算了,但現代人使用動圖的習慣非常「奢華」──長寬動不動就 500 px 起跳、每秒 30 格(台灣的講法是「影格╱畫格╱張」都可以,但不是「」唷)──用 GIF 來存的話,檔案大小瞬間就會爆掉

小秘訣

如果一定要用 GIF 格式,但還是想讓檔案盡可能小一點,試試看用 Gifsicle 這個軟體來最佳化(不是「優化」喔)!

改用 MP4?氣質不對

一個解決方式是直接插入 MP4 影片檔。不過 Markdown 中沒有插入影片的原生語法,每次都要手寫 HTML <video> 標籤,有點麻煩。

而且,我覺得影片檔的「氣質」就是跟動圖不一樣。就算把播放控制列關掉、設定成循環播放,味道就還是不太對,沒有動圖那種完美的無縫循環感。更別說動圖還支援設定「每獨立」的延遲時間,可以做出影片格式無法呈現的節奏感。

另外,影片檔如果有聲音,瀏覽器就不會讓它自動播放,得在程式碼裡額外設定成靜音;可能還會需要加 playsinline,才能讓某些手機瀏覽器就地播放,而不是跳到全螢幕。

動畫圖的正解是 WebP

WebP 是 Google 在 2010 年推出的開放圖片格式,同時支援靜態圖和動畫,而且壓縮效率比傳統格式好非常多。

因為 WebP 是真正的「圖片」,所以你只要用 Markdown 寫 ![哈囉可麗餅](cat.webp) 或一個普通的 <img> 標籤就可以直接插入了。它會自動循環,不需要任何奇怪的 JavaScript,也沒有累贅的播放介面。用起來就像 GIF 檔案一樣簡單,但檔案小非常多!

想把影片轉成 WebP 動畫圖片,只要一行 FFmpeg 指令就搞定:

ffmpeg -i input.mp4 -vf "scale=360:-1,fps=12" -c:v libwebp_anim -loop 0 -compression_level 6 -quality 70 -an output.webp
  • scale=360:-1 是縮放尺寸。只要設一邊就好,另一邊寫 -1,FFmpeg 就會自動等比例縮放。
  • fps=12 每秒幾。我覺得動圖的每秒數不要太多,會更有動圖的氣質;我大部分都設 8-15 之間。
  • -compression_level 6 是設定「盡最大努力」尋找最佳壓縮方式。會比較慢,但檔案會更小。
  • -quality 70 是品質設定。我覺得 70、75 左右是甜蜜點,想要檔案更小的話可以試試看更低。

實測檔案大小

我用了可麗餅的十秒鐘影片來測試,以下是兩種格式檔案大小的比較:

解析度╱格數GIFWebP -quality 70
640x360, 30fps13.8 MB5.4 MB
320x180, 30fps3.4 MB1.7 MB
320x180, 15fps2.2 MB940 KB

這篇文章最上面實際用的那張,最後調成 360x203、每秒 10 格(不是「」!)、品質 70,檔案大小只有 659 KB。

WebP 的唯一缺點

WebP 格式唯一的缺點,就是要比較近代的瀏覽器才支援。1

Chrome 在 2014 年支援、Firefox 拖到 2019,Safari 甚至要到 2020 年以後(而且必須搭配 macOS 11 或 iOS 14 以後版本)才能完整支援 WebP 格式。所以我在 Wiwi.Blog 上只在動畫圖才用 WebP,一般的圖片還是選擇相容性最好的 JPEG 和 PNG。

像是我手上的 iPad Mini 4(2015 年出品),系統最高只能跑到 iOS 12,瀏覽器再也無法更新,就完全看不到 WebP。一台明明還很漂亮的平板,卻因為被蘋果的軟體綁死,現在連一張貓咪動圖都打不開,超鳥。當然對於蘋果來說,這設計完全合理──如果十年前的平板,今天還能正常地看到 WebP,誰會想要換新機呢?

再次印證了 Richard Stallman 的那句話:「如果使用者不能控制程式,那就是程式在控制使用者。」千萬別買只能跑封閉作業系統的產品呀!

(iPad Mini 4:看不到 WebP 動圖,但至少還能用來 ssh 啦。)

Footnotes

  1. 其實在 WebP 之後,還有一個更新、壓縮率更好的格式叫 AVIF。但 AVIF 的相容性就更差了,許多 2024 年以前的系統和裝置都不支援,現在用它可能還太早。