網頁中使用影像的注意事項

Lagoon>網站製作流程>使用者友善性>影像>

網頁中使用設計過的影像來表達意念是非常賞心悅目的,而且也是非常有效率的,除掉影像設計的種種問題之外,我們來看看其它相關的設計問題。

頁中影像基本的格式有兩種,一種用來存放色彩豐富、漸層較多、不是只靠線條來表達的 "照片" 的格式是 JPEG 格式,這種格式內將影像以一種有失真的壓縮方式來存放,這種失真基本上是對於人的眼睛來說比較不會去注意到的那種失真,所以所存放下來的影像品質還是能夠符合要求,在 JPEG 格式裡基本上可以表達 16 百萬色中任何一個顏色;另一種是適合用來存放電腦產生圖形,顏色數目較少、很少漸層、很少連續灰階、很多線條的圖片用的 GIF 格式,這種格式使用最多 256 色的調色盤,使用完全不允許失真的 LZW 資料壓縮方式,是一種對於非照片類圖片壓縮效率非常好的格式,不過目前由於 Unisys 公司擁有 LZW 壓縮方法的專利權,W3C 建議大家使用 PNG (Portable network graphics, 可攜式網路圖形) 影像格式來取代,許多軟體已經把對 GIF 格式的支援取消而改支援 PNG 格式。 PNG 格式和 GIF 格式一樣是一種無失真的影像壓縮格式,可以支援全彩或是有調色盤的影像,也支援交錯式顯示的影像。PNG 格式在儲存有調色盤的影像時壓縮效率和 GIF 格式很接近。

意:

    1. 照片一般都會用 JPEG 格式來存放,在壓縮的過程中可以調整其失真的大小,壓縮比例愈大就容易看出失真的區塊。
    2. 一些影像處理軟體會以 dithering 的方式來降低圖片中線條 zig zag 的狀況,這種圖片因為灰階漸層很豐富所以不適合用 GIF 格式。
    3. 我們用電腦繪圖軟體產生的影像圖片常常會有大塊同色的區域,這種圖片不適合用 JPEG 格式來壓縮,大塊同色的區色常常會有很顯而易見的失真。
    4. GIF 圖片格式或是 PNG 圖片格式中都可以指定調色盤中某一個顏色為透明顏色,如此瀏覽器就不會顯示這個顏色,而以透空的方式讓瀏覽者直接看到被這張圖片遮住的內容,對於圖片和背景的緊密結合有很大的影響。
    5. 在 Microsoft IE4.0 和 Netscape Communicator 4.7 中都可以直接顯示 PNG 格式的圖片,但是 Netscape Communicator 4.7 中顯示 PNG 格式圖片中的透明顏色似乎有一些問題。
    6. 一張影像如果很大 (長寬) 的話,透過網路傳送的時間就會很久,我們一般有幾種處理的方法:
      1. 縮小圖片

      2. 用 progressive JPEG 或是 interleaved GIF / PNG 格式來存放影像,如此影像在下載時遠端瀏覽器可以先看到輪廓與比較粗糙的影像,然後慢慢再看到細節,或是先看到奇數列的影像,再看到偶數列的影像,這兩種方法都可以讓瀏覽者先看到一些概況,可以在影像還沒有下載完全之前就作出適當的反應。

      3. 將大張影像依其內容切割為小張的圖片:如此可以有四層的好處,第一、如果切割得好的話,JPEG 圖片壓縮的比例可以大一點,因為不同的區塊的失真比例可以進一步地設定,第二、某些影像以 GIF 格式存檔效果會比較好,第三、一般瀏覽器都是用許多獨立的執行緒在不同的 socket 上下載圖片,資料分開多條網路路徑下載的話,被單一路徑阻礙的機會較低,第四、每一個圖片可以根據它不同的意義給予相對應的 alt 文字描述,在圖片還沒有下載之前,瀏覽者可以看到這些文字說明,例:1, 2

      4. 在 HTML 內指明每一張圖片的寬度和高度,如此影像在還沒完全下載之前瀏覽器就已經可以針對其它文字部分先行排版作業,並且先顯示出來。

丁培毅製作