2.1 網(wǎng)頁圖片簡介

在網(wǎng)頁中主要包括文字、圖片、動畫、視頻等視覺元素。本章內(nèi)容主要是圍繞圖片視覺元素的設(shè)計進(jìn)行講解，因此先來了解圖片在網(wǎng)頁版面設(shè)計中的相關(guān)術(shù)語。

1．版面率、圖版率

版面率也稱空白量。在一個版面里上、下、左、右都有一定的空白，稱為留白。留白內(nèi)側(cè)文字與圖片所占空間的面積與版面總面積的比率稱為版面率。

圖版率指版面中除文字外，圖片面積與整個版面的比率。由于圖片比文字具有更高的視覺傳達(dá)性，人們在閱讀時，首選圖版率高的頁面，可見圖版率在頁面排版中占有很重要的地位。如圖2-1～圖2-3所示，圖版率不同給人以不同的視覺感受。

從上面3張圖可以看出，不同圖版率的頁面擁有不同的頁面風(fēng)格。圖版率高的頁面較活躍，圖版率低的頁面較沉穩(wěn)。如果頁面中只有圖或只有文字，會降低頁面的可讀性，削弱頁面的視覺效果。因此良好的頁面一般都具有圖文并茂、區(qū)域分明、主題突出等特征。

2．位圖、矢量圖

網(wǎng)頁中的圖片有位圖和矢量圖兩種類型。位圖也稱點陣圖，是由像素點組成的。當(dāng)放大位圖時，可見其由無數(shù)個小方格構(gòu)成。位圖常采用RGB顏色編碼方式，通過分辨率來界定質(zhì)量，可用Photoshop等軟件來制作。常見的位圖格式有GIF、JPEG、PNG等。

1）GIF文件的后綴名為“.gif”。采用的是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式，壓縮率一般在50%左右。在一個GIF文件中可以保存多幅彩色圖片，可構(gòu)成一個簡單的動畫。

2）PNG文件的后綴名為“.png”。采用從LZ77派生的無損數(shù)據(jù)壓縮算法，設(shè)計目的是試圖替代GIF和TIFF格式，同時增加一些GIF格式所不具備的特性。使用PNG格式存儲灰度圖片時，圖片深度可多達(dá)16位；存儲彩色圖片時，圖片深度可多達(dá)48位；還可以存儲多達(dá)16位的α通道數(shù)據(jù)。一般應(yīng)用于Java程序、網(wǎng)頁中，原因是其壓縮率高，生成的文件體積小。

3）JPEG文件的后綴名為“.jpg”或“.jpeg”。這是與平臺無關(guān)的格式，具有調(diào)節(jié)圖片質(zhì)量的功能，允許按不同的壓縮比例對文件進(jìn)行壓縮，壓縮比例通常在10:1到40:1之間。不過，這種壓縮是有損耗的。JPEG格式壓縮的主要是高頻信息，對色彩信息保留較好，可以支持24位真彩色JPEG格式適合應(yīng)用于網(wǎng)絡(luò)，可減少圖片的傳輸時間。

4）矢量圖是根據(jù)幾何特性來繪制圖形。矢量可以是一個點或一條線，矢量圖只能靠軟件生成，文件占用內(nèi)存空間較小，可以包含獨立的分離圖片，可以自由無限制地重新組合。

綜上所述，矢量圖的特點是和分辨率無關(guān)，放大后不失真，適用于圖形/圖標(biāo)設(shè)計、標(biāo)志設(shè)計等。位圖的特點是和分辨率緊密相關(guān)，色彩艷麗、形式多樣；在縮放情況下會失真，表現(xiàn)為圖片邊緣有鋸齒；文件較大，不利于網(wǎng)絡(luò)傳輸，因此作為網(wǎng)頁圖片時一般保持分辨率為72像素。