自由接案設計師的必備線上工具箱
圖片優化、顏色代碼轉換、網站圖示生成、SVG清理——客戶專案需要的所有工具，無需安裝任何軟體。
上週二晚上9點，客戶傳訊息給我：「可以把logo做成32x32的favicon、180x180的Apple觸控圖示嗎？還有我們用的那個藍色hex代碼是什麼？」
我只有筆電。沒有Photoshop。沒有Illustrator。只有瀏覽器。
十五分鐘後，全部搞定了。以下是方法。
「客戶要特定尺寸」的問題
這種事經常發生。客戶需要Open Graph用的1200x630大圖、商店用的800x800產品圖、網格版面用的150x150縮圖。一張圖片要出三種不同尺寸。
為了簡單的縮放打開完整的設計軟體，就像開卡車去便利商店一樣大材小用。你只需要快速、精確的工具。
拖入圖片，設定尺寸，下載。幾秒鐘搞定。我把這個工具釘選在瀏覽器分頁裡，因為每週至少用兩次。
顏色代碼的混亂
工程師要hex值。印刷廠要CMYK。品牌識別指南列的是RGB值。客戶傳來一個Pantone色號，問「CSS版本是什麼」。
顏色轉換聽起來很簡單，直到你一天做了五次。有一個地方能貼上任何顏色格式、回傳所有其他格式，真的能省很多時間。
小技巧：轉換後把常用的品牌色加入書籤，下次就不用再找了。
Favicon比想像中複雜
Favicon看起來很簡單——就是一個小圖示嘛。但現代瀏覽器和裝置其實需要多種尺寸：瀏覽器分頁用16x16，書籤用32x32，iOS主畫面用180x180，Android用192x192。
以前要從一張來源圖片產生所有這些，意味著打開Photoshop，手動匯出每個尺寸，再轉換成.ico格式。20分鐘的無聊工作。
用Favicon產生器，上傳一次就能得到所有需要的尺寸。我現在每個網站交付都包含這個。
交付前的SVG清理
Illustrator和Figma匯出的SVG帶著大量冗餘——編輯器中繼資料、不必要的群組、應該是屬性的行內樣式、過高的小數精度。
一個本該8KB的SVG檔案變成50KB是常見的事。單一圖示無所謂。但頁面上有40個圖示時，就是流暢載入和卡頓的差別。
在發送給工程師之前，用SVG最佳化工具處理一下。他們會感謝乾淨的程式碼，更小的檔案也有助於頁面效能。
壓縮客戶交付物
客戶不在乎壓縮。他們在乎的是網站載入快、郵件附件不會因為太大被退回。
在傳送任何圖片批次之前，我都會壓縮一遍。20張產品照片的作品集可以從80MB縮小到12MB，沒有可見的品質損失。這就是「下載半天」和「收到了，謝謝！」的差別。
真實的工作流程
我做客戶素材交付的實際流程：
- 調整大小到客戶指定的精確尺寸
- 壓縮以減小檔案大小而不損失品質
- 如需特定格式代碼就轉換顏色
- 網頁專案就產生Favicon
- 交給工程師前最佳化SVG
整套素材大概10分鐘。不用安裝軟體，不用訂閱。只需要瀏覽器分頁就行。
為什麼瀏覽器工具對自由接案者最好
做自由接案時，每一分鐘的設定時間都是沒有報酬的。你可能在客戶的電腦上、咖啡店的筆電上，或者平板上。工具能在任何瀏覽器、任何裝置上運作，不需要登入、沒有試用限制——這才是讓自由接案真正可持續的關鍵。
最好的工具是不需要思考的工具。需要時它就在那裡，不會礙事，讓你專注於客戶真正付費的創意工作。