當仙草凍比遊戲還大
在這個人人都有手機網路吃到飽、高速光纖網路到府的時代，似乎有一群人真的以為網路頻寬是天上掉下來的免費禮物。沒錯，我說的就是現代的網頁設計師們，他們之中有許多人已經連基本圖片使用、頻寬節省的常識都沒有了。
現在在網路上，你到處都可以看到這些荒謬的情況：
- 直接把印刷用的高解度圖片丟到網頁上
- 用超大圖片來當縮圖
- 搞不清楚到底應該用 PNG 還是 JPG
- 明明只是根本不會注意到的背景圖，卻用檔案超大的圖
這些設計師們彷彿活在一個頻寬無限、流量免費的平行宇宙裡。
台 灣彩券：誰需要縮圖？
之前寫刮刮樂那篇查資料的時候，我就注意到大家現在都不做縮圖了耶！
在台灣彩券官網的「歷史刮刮樂銷售資訊」頁面，這個在螢幕上看起來小小、寬度還不到 200 畫素的縮圖（下圖紅箭頭處），實際上載入的竟然是一張 500 KB、1080 x 720 畫素的大圖！這個頁面有十幾張這樣的縮圖，累積起來很快地就超過 5 MB 了。1
（這個小不拉嘰的縮圖，檔案大小要 500 KB！）
他們應該怎麼做：先把圖片縮放到實際要顯示的大小（以這種小縮圖而言，可能 200 x 133 畫素就夠了），然後用 JPEG 格式壓縮，品質大約 70-80% 即可。這麼簡單的步驟，就可以把原本要 500 KB 的圖，縮小到只有 14 KB。
但設計師不 care，反正網路頻寬又不用錢。
（下面這張圖，檔案大小只要 14 KB！我知道你可以用 WebP 格式讓檔案更小，但那對舊裝置的相容性比較不好。）
京城銀行：在你看不見的地方揮霍
最近檸檬卷到京城銀行的網站辦事，發現他們的網站慢到你可以先泡杯咖啡再回來。
首頁最上方那個圖片跑馬燈（carousel），放了八張長寬為 2720 x 1300 畫素的圖（比 1080p 影片還大），光是這樣就毫無意義地浪費了 4 MB 的頻寬。
（圖片上半部是圖片跑馬燈：沒有人會看，但很佔頻寬）
（沒錯，這張圖的大小真的是 2720 x 1300）
拜託，現在是 2025 年，沒有人會在你的首頁上看圖片輪播！沒有人會坐在電腦前面，看著你的圖片三秒換一張，然後期待地想：「不知道下一張會是什麼驚喜呢？」不會的，所有人都會直接無視它們！而且沒人的裝置可以完整顯示那 2720 x 1300 的圖，我們不是用 80 吋家庭劇院在上銀行網站，快拿掉這些愚蠢的圖片輪播！
往下捲一點，來到「NEWS」區。考考你，這區的重點是什麼呢？
（益智問答：這區的重點為何？）
你說重點是那些最新消息？拜託，誰在意最新消息？訪客來京城銀行網站，當然是為了看背景那張模糊的花圖片呀！這張名為 bg_flower01.png 的藝術品是 1493 x 996 畫素、檔案 1 MB 的 PNG 檔案！
（如果你是正在國際漫遊，當日超過流量被限速的用戶，這張模糊的花圖片會讓你等上 31 秒）
這只要用個二十分之一檔案大小的 JPG 圖片就可以達到完全同樣的效果了。連我這個音樂系畢業的、不是網頁設計師的人都有這個常識。
但他們不 care，反正網路頻寬又不用錢。
鮮芋仙：頻寬終結者
但以上這些，全都比不上史上最強的頻寬浪費王者——「鮮芋仙」。
我多年前已經在好檸檬 Podcast 嘲笑過它官網的肥大，但它到現在還是一樣驚人：首頁檔案大小 90.5 MB！
（鮮芋仙首頁：90.5 MB。載入時間足夠你出門買一碗真的仙草凍回來。）
（看看統計數字，真的就是 90.5 MB，不要懷疑。）
到底是要怎麼把一個首頁弄到 90.5 MB 啦？到底塞了什麼東西在這裡面？
首先，圖片輪播當然少不了。但他們放的是 8000 x 3708 畫素、17 MB 的巨大圖片，大小足以直接輸出成巨大戶外廣告看板。
（8000 畫素寬的仙草凍圖，是你家 4K 電視畫素的四倍，讓你彷彿能聞到仙草香）
還有這張 4333 x 4333 畫素，檔案大小 12 MB 的圖。更神奇的是，我上下捲動尋找，這張圖根本沒有顯示在網頁上！
（4333 畫素寬的隱藏版圖片：存在的意義就是浪費你的流量）
還有什麼東西？cwTeXFangSong-zhonly.woff2，它把整個 5 MB 大小的中文仿宋字體直接丟進網頁中！
（對，為了顯示幾個字，我們需要載入整個 5 MB 的字體檔案）
最後，直接擊敗我的是這個。看到下方這個小小的 Instagram 圖示了嗎？
你猜猜最中間那個 Instagram 圖示 instagram.svg 檔案多大？不是五個圖示加在一起喔，是只有最中間那個 IG 圖示。
（你真的沒有看錯，是 2.9 MB，不是 2.9 KB）
2.9 MB！ 🤯
是真的！一個 30 x 30 畫素的 Instagram 的小圖示，2.9 MB！我真的很好奇這個 SVG 裡面到底寫了什麼，是不是包含了 Instagram 的完整程式碼？還是他們把 Meta 的整個元宇宙都不小心放進去了？
這檔案真的太天才了，超出我的理解，你可以按以下連結下載原檔來研究看看：
見證奇蹟！2.9 MB 的 Instagram 圖示：
假設你今天在一個手機訊號不是太好的地方（比如說 2 mbps 好了，這還不算太糟的情況喔），你會需要花超過六分鐘才能完整讀取完鮮芋仙的首頁。這段時間足夠你走到附近的鮮芋仙店面，排隊買一碗仙草凍後回家，把仙草凍吃完，網頁可能還沒載入好。
結果一個 Wiwi.Blog 的讀者找到元兇了！這個 instagram.svg 裡面到底裝的是 什麼？請到他的貼文看答案：
當仙草凍比遊戲還大
你知道嗎？1993 年發行的經典遊戲《Doom》（毀滅戰士），整個遊戲檔案只有 2.39 MB2。
沒錯，《Doom》裡面的所有程式碼、畫面、關卡、音樂、音效……完整的 3D 第一人稱射擊遊戲，檔案比一個鮮芋仙網站上的 Instagram 圖示還小。
（經典射擊遊戲《Doom》整個遊戲的檔案，比以下這個 Instagram 圖示還小）
當年的遊戲開發者用不到 2.4 MB 創造了革命性的 3D 新世界，而現在的網頁設計師卻需要 17 MB 來展示一個仙草凍。你說時代是進步了，還是倒退了？
並不是每個人都有無限的網路流量。對於室內訊號不佳、出國漫遊、住在偏遠地區的人來說，網路頻寬是很珍貴的資源。當你的網站連初學者等級的基本最佳化常識都不管，隨便揮霍使用者的頻寬時，在我眼裡是對使用者極度不尊重的。
我在 wiwi.blog 這裡，只要放一張超過 100 KB 的圖，我都會覺得這太慢了、有點罪惡感耶！但顯然在這個「仙草凍比遊戲還大」的年代，我這種想法已經落伍了。
（這篇貼文中的所有圖片，加起來的檔案大小還不到 400 KB。）
Footnotes
-
1,000 KB = 1 MB，1,000 MB = 1 GB。 ↩
-
https://qz.com/1490069/doom-the-game-that-kicked-off-a-video-game-revolution-turns-25-today ↩