如何正確選擇網站使用的圖片格式

網站要能夠豐富，不外乎幾個重點。 文字的可讀性以及搭配的圖片。 而圖片格式的挑選，一直是非設計師的使用者心中的痛。因此，我們今天就要針對網站圖片的格式來作個詳細的說明。

科普時間：

在說明圖片之前，有些影像的理論必須要先跟大家說明。

1. 影像尺寸 （Image size）

影像尺寸指的就是那張圖片在螢幕中顯示的大小。 在網站使用的前提下，我們只關心兩個數值以及他的單位，這兩個數值分別是寬度和高度。而單位我們使用的是像素。

所有在螢幕中的數位照片，都是由螢幕上一格一格的畫素產生的。因此當你的照片是300像素寬 * 200 像素高的時候，這張圖片就會將會佔用螢幕6萬個畫素來產生出我們看到的樣子。而當圖片寬度越寬高度越高的時候，他在螢幕中所佔的位置就會比較大，除此之外，還會產生一個影響，那就是相對來說檔案大小會變得比較大。

2. 解析度 (Resolution)

我們這邊說的解析度是指單位長度的像素數。同一張圖片（就是複製出來的兩個圖檔），解析度越高只代表一件事情：他在紙上印出來的時候越小。 沒了。

此外，解析度與照片的銳利程度之間完全沒有關係。照片的銳利與否取決於拍照當下的焦點是否有對準等等的因素。所以，調高解析度就並不可以將模糊的照片變成銳利。

3. 在網站中圖片佔據螢幕範圍的大小，僅跟 CSS 有關。

因此當你設定的範圍只有500*500的時候，你卻在那個框框中放入了2000*2000的圖片，就不會是一個好的選擇。

好的。以上幾點您了解之後，我相信後面的部分都是小菜一碟了。

網站中所使用的圖片基本上來說分為三種。 分別是jpg , png , 以及較新的svg . (在WebP 實際普及前，我們先暫時把他放在一邊涼快去。)

接著，我們就來針對這三種圖片應該使用的情景作個說明。

1. JPG

只要是用相機拍的，手機拍的，以及有顏色漸層，不需要透明度的圖片，全部都用JPG 的檔案格式來處理。

2. PNG

凡是非以上的狀態並且顏色不超過256色的手作圖畫，都用PNG 8bit 來處理。超過256色的話就必須用PNG24 來處理。而通常手繪的電腦圖顏色都不會太多, 因此正常來說用 PNG 8 bit 即可。 若需要透明度的支援，那麼就只有使用PNG 24bit 了 ，但是圖片的檔案大小就會很大了。 但是，他是無損畫質的壓縮。這是Jpg 完全做不到的。

3. SVG

這是網站中處理向量圖案最優質的方式。 檔案極小，無影像尺寸的概念。只要畫布給他多大，他就可以無失真的放大到多大。 因此當你利用CSS設定SVG 的大小時，他就佔用那麼大的空間。除此之外，檔案的大小經常都在幾K 之內。這個格式可是Logo 以及 Icon 的不二人選。

因此我們總結出下面的流程圖。