圖文瘦身 - 圖檔格式的運用

相信大家都曾經有這樣的經驗，就是瀏覽某些網頁會覺得相當緩慢；在非關線路問題的情況下，造成這些種情況的主因都常都是有一些看不到的「程序」後面東奔西跑，或是網頁中的「圖檔」太多太大，所以造成主機運算時間較長、資料傳輸效率下降，最後導致影響到其它本文內容的顯示效率；所以往往遇到這種情況，網友除了等待外，通常可能就是關掉該網頁～當然也有些網友會利用一些技巧或工具，直接擋掉一些不必要的東西而直接顯示其它本文。

當然這樣的問題，也會出現在布落格上，而身為布落客的我們也應該要思考如何提高網友們閱覽時的效率，而其中最簡單最有效的方式就是在這些「圖文並貌」的文章中，使用「有效率的圖」。什麼叫「有效率的圖」，就是在最小的負擔下，呈現最好的效果；在圖檔的運用上，通常考量的重點不外乎就是「色彩像素、容量大小、截圖大小、圖檔格式」，但往往這些因素卻都是互斥的，所以我們在圖檔的使用上就要取出一個平衡。

老人簡單的替網頁常見圖檔格式做個「摘要」；

1. 通用性：jpg = gif > png
2. 檔案大小：png(24) > jpg > gif > png(8)
3. 運用時機：
• gif 格式：256 色、小型圖；適合用於符號、文字、插圖、介面截圖、頭像...等。
• jpg 格式：24 bit、大型圖；如高彩高畫質圖片，但不適用於線條、實色區塊、明顯界線。

以下簡單說明主流圖檔格式的特色：

1. bmp / 點陣格式 / 顏色越多越逼真
• bmp 算是 windows 中的標準圖像格式之一，因此理所當然地被廣泛應用。
• bmp 的特點是圖像資訊較豐富，幾乎不進行壓縮，導致它與生俱生來的缺點：占用磁碟空間過大。
• bmp 並不適合透過網際網路傳輸。
2. gif / 圖形交換格式 / 目前唯一可以儲存動畫效果的存檔格式
• gif 是 web 網頁上常見的影像格式；
• gif 顏色只有 256 色，較適合用於插圖、符號及文字。
• gif 適用於線條圖形、具有實色區塊的圖片和色彩之間具有明顯界線的圖片。
• gif 格式的特點是壓縮比高，磁碟空間占用較少，而且不會在壓縮過程中遺失任何資訊。
• gif 的色彩可指定為透明，這樣一來影像則可以顯示該影像的 web 網頁做為背景色彩。
• gif 影像的序列可儲存在單一檔案中，做為動畫 gif。
3. jpg / 靜態影像壓縮格式 / 超強的檔案塑身減肥格式
• jpg 是 web 網頁上常見的影像格式；
• jpg 適用於高彩高畫質的照片。
• jpg 可儲存每像素 24 位元，因此它們可以顯示超過 1600 百萬個色彩。
• jpg 可設定影像檔的壓縮層次，壓縮層次越高、檔案越小，但便會喪失較多資訊。
• jpg 壓縮不適用於線條圖形、實色區塊和明顯的界線。
• jpg 不支援透明效果或動畫。
4. png / 可攜式網路圖像格式 / 潛力佳，但目前支援環境未健全
• png 格式保留了許多 gif 格式的優點，同時提供比 gif 更強大的功能。
• png 檔和 gif 檔同樣都不會在壓縮過程中喪失任何資訊。
• png 檔可儲存每像素 8,24,48 位元的色彩，以及每像素 1,2,4,8,16 位元的灰階。
• png 改進了 gif 漸進式顯示影像的功能。
• png 檔可包含 gamma 修正和色彩修正資訊，這樣一來可將影像正確地對應到各種不同的顯示裝置。
• png-8 和 gif 檔小圖示的用法和效果差不多，不過檔案稍微小了一點。
• png-8 的透明通道可能不被舊瀏覽器支持，這就是為什麼 png-8 比 gif 好用，gif 卻比較常見的原因。
• png-24 幾乎可以代替 bmp 了。但檔案太大，不推薦使用於網路上。
• png 以色彩灰階度來看，比 gif , jpg 都好；
• png 以檔案大小來看，在 256 色下，檔案比 gif 更小，在高彩下，檔案比 jpg 更大。
5. tiff / 標籤資訊格式 / 最適宜作印刷用的圖檔格式
• tiff 格式是各種點陣式影像處理軟體、排版軟體或不同作業平台之間圖形交換率最高的一種圖檔類型。
• tiff 可適用於不同的解析度、不同的色彩模式和不同的壓縮方式，是一個不失真的24位元彩色影像格式。
• tiff 影像品質極高，用於高階印刷顏色也比較不失真，彩色的控制能力及分色列印都極為精確
• tiff 缺點則是圖檔通常比存成 gif 或 jpeg 檔大。