网页图片应用-个人网页.PDF

網頁使用之圖片格式介紹 前言  「圖片」在網頁上的應用範圍相當廣，常見的應用 有：把標題做成圖片、將超連結做成按鈕圖片、在 網頁上擺放圖片、或是利用圖片做為網頁背景的襯 底… ，以美化網頁  此外，圖片另一個主要作用是，可以減少冗長的文 字敘述，正所謂「一圖解千文」，就好比用一大堆 形容詞來描述某個人的長相，倒不如放一張相片來 得清楚  本章將介紹在網頁中加入圖片的技巧與應用 前言 網頁上所使用的圖片格式  圖檔格式有許多種 (例如 bmp 、jpg 、tif) ，不 過能用在網頁上的圖片格式可沒那麼多  根據 HTML 規範，標準的網頁圖檔只有 GIF 、 JPG 和 PNG 這 3 種  這 3 種圖檔格式的共同特色是：都經過壓縮處理， 所以檔案比較小，適合用於網路傳輸 網頁圖片格式  解析度：72ppi(pixel per inch)  網頁色彩：RGB色彩  掃瞄影像：存成高解析度(tiff/ps) ，方便修改  GIF ：插畫、文字、商標、簡單圖形及大塊色圖， 可設透明色彩，動畫  JPEG ：照片、全彩圖檔  PNG ：GIF(PNG-8)+JPEG(PNG-24)  缺點 ：無法儲存動畫檔 網頁圖片格式 GIF 可設定透明背景 適合儲存具有線條、大塊色彩， 可儲存動畫格式 或是含有文字的圖片。像是卡 通圖案、商標等構圖簡單、顏 最多只能儲存256 色 色分明的圖片 。 以交錯圖的形式顯示 JPEG 強大的壓縮率 可儲存圖片中的所有色彩，因 採用破壞性的壓縮方式 此像是全彩的風景照、人物照... 具有大塊的單一純色，或是明顯 等 的線條、文字，建議不要存成 JPEG 格式，否則當圖片壓縮後， 可能顏色效果不好，文字與線條也 可能產生模糊或斷裂的現象。 PNG 透明背景、交錯顯示、跨平台 主要是用來取代 GIF 格式 採非破壞性的壓縮方式，可減少 目前有些影像處理軟體、瀏覽 圖片的失真現象。 器尚未支援 PNG 圖檔格式，所 無法儲存動畫檔 以此圖檔格式尚未被普遍採用。 GIF 圖檔格式  如果的圖片具有許多線條、包含大塊大塊的 色彩、或是圖片中含有文字，那麼建議存成 GIF 圖檔格式  舉例來說，卡通圖案或商標符號等構圖簡單、 顏色分明的圖片，最適合存成 GIF 格式 GIF 圖檔格式  GIF 具有以下幾種特性：  最多只能儲存 256 色  可設定透明背景  支援交錯式的顯示方式  GIF 動畫格式 最多只能儲存 256 色  GIF 格式只能容納 256 種色彩  對於顏色較多、較複雜的影像，在存成 GIF 格式後，顏色將被濃縮至 256 色，畫面可 能會變得不是那麼美觀  GIF 較適合簡單圖案顏色 GIF圖檔格式  構圖簡單、顏色分明的圖片  由簡單的線條和色塊組成的，或是圖片的內容 以文字為主  例如幾何圖案、商標符號等，就適合存成 GIF 格式 10 GIF圖檔格式  最多只能儲存256色，如果將顏色較多、較 複雜的影像 (例如一般的照片) 存成 GIF 格 式，顏色將被濃縮至 256 色，可能會導致 畫質變差