. . .
Hello ! 我是Kelly Lee，目前在IBM擔任視覺設計師。我從事平面設計有將近五到六年的時間，也曾在動畫公司工作，工作範疇偏創意為多。但在2018年時，我毅然決然踏入介面設計領域，成為了一位視覺設計師。從平面設計轉職介面設計看似容易，實際卻不是如此，因此我想將其中所得所聞記錄下來，由自身經驗出發，分享給有相同處境的設計師們。
在疫情期間，網頁變成了更為重要的訊息溝通渠道。要製作一個吸睛的網頁，圖片的輔佐是必要的。但如果圖片格式使用錯誤，很容易造成網站肥大loading過久或是圖片失真。好不容易規劃好的網頁就因為圖片問題而前功盡棄，實在非常可惜。因此，如果能對於圖片不同輸出格式有基礎的了解，妥善的使用其特性，想必可以對於製作網站有很大的幫助。除了可以讓網站運作得更順暢外，也可以省下很多鬼打牆一直重新上稿測試的時間。
🕵️♂️本篇文章適合介面設計師或是有網頁上稿需求者閱讀
三種圖片格式的比較
以我目前製作網站的經驗來說，SVG、PNG、JPEG此三種檔案格式是目前最常使用的。不同的檔案格式都有其特點和缺點，如果能在不同的使用時機選擇相對應適合的圖片格式，就能將辛苦完成的圖片效益最大化。
以實際用圖案例來舉例，如果我要做一個銀行的網頁，畫面中會包含許多不同類型的圖片，較常使用的有(1)單純的插畫、(2)搭配照片底圖的插畫(3)照片、(5)有透明度的照片、(6)文字和線條，相對應適合的檔案格式如下：
(1)單純的向量插畫：SVG
(2)搭配照片底圖的向量插畫：PNG
(3)照片:JPEG
(4)有透明度的照片:PNG
(5)單純文字和線條：SVG
瞭解了三種插圖的基本性質後，接著來分享一下我對於三種圖片格式進一步的使用經驗：
SVG圖片格式的使用心法
SVG真的是一種非常好用的檔案格式，它除了體積非常小之外，放上網頁後完全不會有解析度的問題。在出圖時，只要是向量插圖，我極度建議都以SVG格式輸出。
但SVG格式的檔案也有其使用限制，由於輸出後它仍是保有向量特性，因此無法涵蓋任何點陣圖片，例如照片。此外，如果在Sketch裡製作帶有線條文字的表格，在輸出SVG前請記得整理一下畫面，確保線條和文字都有對齊像素Pixel，如果沒對齊，畫面很元素很有可能會跑版。
如果插圖中含有文字，從Illustrator或是Sketch輸出時請都記得要轉外框，不然當使用者的電腦沒有支援設計師所選的字體時，字體就會變成可怕的預設字體，如新細明體等。
延伸閱讀：設計師對 SVG 應該有的觀念
PNG圖片格式的使用心法
其實我在真正認識SVG前，大多時候我都是選用PNG格式來輸出我要上稿的圖。但久而久之就發現PNG檔案體積真的超大，當同一圖片以三種不同檔案格式進行輸出時，尺寸相差甚多。PNG足足比SVG多了三倍，也比JPEG多了近兩倍大。如果整個網站內有數十甚至數百張圖片，一但圖片格式沒好好選擇，所產生的體積差距會是非常可觀的，所造成的使用體驗也會非常有感。
承前一段落的圖片類型和圖片格式對照圖，有些圖片類型適合使用PNG的檔案類型，例如帶有透明度的照片、有照片為底圖的向量插圖等。如果你/妳有這樣的需求，我建議可以使用壓縮軟體壓縮後再上傳，推薦壓縮軟體為TinyPNG 。
JPEG圖片格式的使用心得
JPEG格式是大家平時拍攝中使用較多的一種圖像存儲格式，它格式占用空間小、存儲快速，我自己定義它為照片專屬格式。向量插畫等線條圖是非常不適合使用此格式輸出的，因為非常容易失真。
以上我在進行介面設計時，對於圖片的應用所整理出的一些見解，希望文章有帶給各位一些幫助！
感謝你/妳閱讀了這篇文章，希望這篇文章有幫助到你。如果覺得這篇文章不錯，希望你能給我一點「拍手鼓勵」，也可以留言讓我知道你的想法，我會更努力寫出更多內容的！
