2009/03/06

border art 的應用:背景圖

研究了一下發現邊線藝術在網頁的應用很有困難。一個網頁要吸引人,最好是找一些美美的照片作為素材,邊線藝術的作品可能有點差距。但是邊線圖案有一個優點就是省空間。例如下面範例的這張圖,我用 print-screen 拷貝到小畫家;清除多餘的只保留邊線圖,然後以不同檔案格式存檔。下面是不同圖檔格式的檔案大小。

  1. 24 bit BMP 檔:585 KB。
  2. GIF 檔:4.38 KB。存檔時顏色略有失真。
  3. JPEG 檔:7.9 KB。存檔時顏色失真。
  4. PNG 檔:6.54 KB。
  5. TIFF 檔:24.2 KB。
  6. 邊線藝術文字檔:457 Bytes。

由上面數據可知,產生下面邊線圖的文字總共是 457 Bytes,這是 PNG 圖檔的十分之一;這可以省下不少通信費。事實上這些文字在傳輸前還會壓縮的更小。所以在吸引網友的美美圖片與通信費之間,你常常須要作出取捨;而有些情況下,邊線圖也許是最好的選擇。

背景圖的顏色必須與文字顏色有對比,否則看的很費眼力。下例的檔案大小 PNG 檔 7.99 KB,文字檔 1.65 KB。下例中,IE6 需要在 .brick 加入 font-size:0px,否則會失準。

黃金峽谷。下例的檔案大小 PNG 檔 17 KB,邊線圖的文字檔(未壓縮)2.84 KB。