前言
在設計完成之後，提供的檔案格式都會因為情況而有不同。
錯誤的檔案格式，除了造成畫質問題、輸出錯誤、檔案太大增加負擔，還會影響設計師本身的專業與信任度。認識到差別，才能掌握到設計之外的細節。
本篇文章將簡單介紹最常見的 6 種圖像格式，以及其他檔案交付格式，並分享我選擇交付檔案時的一些情境狀況，若是對瀏覽器相容性查詢工具Can I use有興趣，歡迎利用目錄到最後看看喔~
一、最常見的.jpg與.jpeg
早期Windows系統只支援3個字母的副檔名，也因此通常被寫作 .jpg，使用Mac的話則可以使用完整的 .jpeg，它們的格式與功能完全相同，可互相轉換且不會影響圖片品質(畢竟這個格式基本上也是已經被壓縮過了)。
用途廣泛，在網站的橫幅廣告、各式廣告圖片、社群平台圖都會看到這類圖片，LINE上面傳來傳去的長輩圖有八成都是它，雖然檔案小，但積少成多。
因被壓縮後檔案才會小，壓過頭的話畫質降低很明顯，不支援透明背景，若收到「已去背」的零件是這個檔案格式，我會打電話過去提醒白色的底圖還是背景喔XDDD
二、第二常見的.png
若非設計相關科系，卻有自己製作過貼圖，就會知道要用這個格式才會是透明背景，檔案會比.jpeg 大，且因為 .png 主要用於網頁圖像，非常不適合印刷，色差會很嚴重。
這是個在電腦上看會很美好，印出來會做惡夢的檔案格式XDDD
三、檔案讓人又怕又喜的.tiff
我去掃描自己的畫作時，大多也是收到這個格式，這個格式能夠保存較多的色彩資訊，確保圖像的細節和品質。
無失真壓縮，支援 CMYK，適合高品質圖像，在做畫冊類的書籍編排時，這樣的檔案格式能讓細節被好好保存。但這個格式的檔案通常都比較大，不適合網路使用，上傳一堆超大TIFF檔案後網站打不開是很正常的。
四、輕量化的.svg
以前都會說不要用它，有些人會看不到XDDD還要為此寫一個看不到時要顯示某張替代圖，但隨著網頁技術的發展，現在大多數的瀏覽器都已經完全支援SVG了，能正確呈現向量圖形、透明背景、動畫等特性，也能做到複雜的路徑動畫特效，是當代許多網頁設計師的喜愛格式之一。
當客戶一直抱怨網站LOGO不夠清楚時，我們也會建議提供原始檔，讓LOGO能用.svg的檔案格式出現，向量格式的檔案，不會因為縮小、放大而失去清晰度，不論是在哪種裝置上都會是清楚的。
五、高效的.webp
.webp是Google為了提供更好的網頁效能所開發的，它兼具 .jpg 的壓縮效率與 .png 的透明度優點，檔案大小甚至比 .jpg 和 .png 更小，也能同時保持良好的圖像品質。
支援動畫，近幾年逐漸普及，受到各大瀏覽器和平台的支援後，漸漸不再會有看不到圖片的問題。
六、動圖老前輩.gif
網站裡面某個一直閃爍的小動畫、特別好笑的低解析度迷因動圖，可能都是這個檔案格式，它能支援簡單的動畫效果以及透明背景，雖然色彩顯示上有限，但那種低畫質才會有的年代感，莫名有種醍醐味。
但在網站表現上，因為有其他的動態方式能表現效果，漸漸較少出現了，畢竟簡單的動態，用CSS也能寫。
★ 關於其他檔案交付格式
一、設計師的修圖好幫手.psd
這是Photoshop的檔案格式，在交稿之後，有些狀況會要提供原始檔，有些設計師會直接提供保留完整圖層、效果的.psd，方便後續修改。
交付這種檔案時，通常是結案兩清的狀況，後續對方可能也不需要我維護或服務了，所以一手交錢一手交檔，這時我會特別再提醒客戶.psd不適合直接使用，它不是能直接拿去印或放上網站顯示的格式XD
二、快成為時代眼淚的.eps
.eps因為支援向量圖形與高品質輸出，曾經是設計師發印時的選擇之一，不過隨著PDF 的普及，使用率逐漸減少，若與印刷廠合作時，偶爾還是會用到它，但現在有很多印刷廠都收.pdf檔了。
三、跨平台分享的最佳選擇，萬用的.pdf
跨平台的檔案特性，能包含文字、圖像、向量物件，讓它不論是使用在行政文件、設計稿還是簡報，幾乎都是通行無阻的，簡直是圖像格式世界中的萬事屋，這個檔案格式我通常會拿來做報價單與設計校稿檔，從電子書上傳到印刷打樣、定稿發印，都是非常好用的格式。
★ 如何查詢瀏覽器是否支援顯示
在這篇文的最後，想推薦一個非常實用的小工具——「Can I use」
某些圖像格式、語法、屬性在不同瀏覽器的環境時，可能會有不同的顯示狀況，甚至可能會出現無法正常顯示的情況，這是一個讓開發人員能快速查詢「瀏覽器相容性」問題的工具，它能讓開發的過程更順暢。
我們實際利用這個工具，搜尋圖像格式在「各個版本」的主流瀏覽器顯示狀況吧！
對於支援狀況，它還會標示出每個瀏覽器版本的相容程度，舉例來說，我在搜尋欄打上「.webp」就會出現以下畫面：
可以左右滑動，看看紅框處的地方，就有寫到各家瀏覽器名稱。
而底下像是紅綠燈的配置，就像用紅色、黃色、綠色告知「相容度」，非常直接。
除了圖像格式，它還能查看CSS與JavaScript喔！
這能讓團隊更方便判斷是否能使用某項新的JavaScript技術或CSS屬性，或評估是否需要提供備用的顯示方案，在開發完某個功能之後，也能使用該工具來查看網頁在不同瀏覽器中的相容性情況，是一個有助於「評估、檢測」的工具。
希望這篇介紹能讓你在檔案格式的世界裡，找到一些小樂趣~
若能因此感受到有一些幫助，那就太好了！
