Skip to content

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

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

科普時間:

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

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

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

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

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

  5. 在網站中圖片佔據螢幕範圍的大小,僅跟 CSS 有關。
  6. 因此當你設定的範圍只有500*500的時候,你卻在那個框框中放入了2000*2000的圖片,就不會是一個好的選擇。

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

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

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

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

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

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

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

    選擇圖片格式流程圖

Posted in

kakadong

Leave a Comment