tu 圖像優化技巧全攻略

深夜整理硬碟裡十年份的設計稿，滑過那些動輒十幾MB的原始檔，突然驚覺當年客戶網站載入速度慢不是沒原因。圖像優化這門手藝，說穿了就是在畫質與檔案大小之間走鋼索，差一步不是糊成馬賽克就是拖垮整個頁面。

記得剛入行時接過婚攝案子，把新人精修照用最高品質JPG直出，上傳婚禮平台那刻才發現單張8MB。新人媽媽在電話那頭急得快哭出來：「親戚們手機打不開相簿啊」那次硬著頭皮重壓縮三百張照片到凌晨四點，從此學會看EXIF數據比看星座還認真。

很多人以為壓縮就是品質拉桿往左拖到底，這簡直是謀殺影像的暴力行為。去年幫茶品牌做電商主圖，發現同樣90%壓縮率，用Photoshop「保留細節2.0」演算法比基本壓縮多了0.3MB，但茶葉茸毛在手機螢幕上竟能根根分明，轉換率直接飆升17%。那些藏在進階設定裡的魔鬼，往往才是決勝關鍵。

現在看到設計師把4K圖直接餵進網頁還是會胃痛。前陣子協助改版教育平台，把首頁英雄圖從3840px砍到適配各裝置的5種尺寸，光這招就省掉62%流量。更別說發現他們用PNG-24存插畫檔，轉成SVG後檔案只剩原來的零頭，滑鼠滾輪終於不用卡頓三秒才動。

最魔幻的時刻是發現AVIF格式的威力。測試時把產品情境照轉成AVIF，在肉眼難辨差異的狀態下，檔案竟然比WEBP再瘦30%。可惜Safari支援度還是硬傷，現在我的儲存規則很貪心：AVIF/WEBP/JPG三版本並存，讓瀏覽器自己選最好的吃。

工具選擇像挑咖啡豆，得看場合烘焙度。緊急修圖我用Squoosh像喝即溶咖啡快速提神，精修時搬出PhotoShop的「匯出為」功能慢慢手沖，遇上整批圖庫要瘦身就開Terminal用ImageMagick當義式咖啡機。那天發現Affinity Photo能無損移除EXIF的GPS定位資料，才驚覺自己差點把客戶的商業機密連同中繼資料一起快遞出去。

每次上線前總要多做個小儀式：關燈用手機4G網路實際跑一遍頁面。當縮圖在廉價安卓機上仍能看清食譜的香料顆粒，當百人合照在祖母的老平板裡不再需要放大五次才辨認出臉孔——這種微小成就感，比什麼設計獎盃都真實。

評論: