圖片是隨著文字最早進(jìn)入網(wǎng)絡(luò)多媒體的對(duì)象。有效的圖片設(shè)置能極大地豐富、美化網(wǎng)頁(yè)界面。隨著帶寬以及用戶屏幕尺寸的增加，越來(lái)越多的網(wǎng)站設(shè)計(jì)在頁(yè)面中使用大幅圖片，人們也更傾向?yàn)g覽有精美圖片的網(wǎng)站。
一、圖片的選擇
不同類別的網(wǎng)站對(duì)圖片的需求各不相同，這主要體現(xiàn)在對(duì)圖片類型的選擇和圖片在界面中的比例大小上。按照?qǐng)D片的獲取方式，其類型大致分為攝影類與矢量類。
攝影類圖片來(lái)自攝影，圖片能夠直觀地表現(xiàn)主題，側(cè)重于如實(shí)地表現(xiàn)產(chǎn)品本身，因此，電子商務(wù)類網(wǎng)站尤其青睞高清的攝影類圖片。如Lecoqsportif官網(wǎng)（見(jiàn)圖1)的所有圖片均為服裝鞋類的真實(shí)照片拍攝，且對(duì)圖片質(zhì)量要求很高。對(duì)于重要信息，詳情頁(yè)面會(huì)給出高清的細(xì)節(jié)圖片，幫助用戶多方位了解商品的屬性、細(xì)節(jié)及產(chǎn)品上身效果。
圖1 Lecoqsportif官網(wǎng)
矢量類圖片是用圖形軟件繪制的。該類圖片風(fēng)格多變，尺寸大小靈活，具有很強(qiáng)的裝飾性。許多抽象圖形、圖表、圖標(biāo)都屬于矢量類圖片。如英國(guó)能源Evoenergy消費(fèi)指南網(wǎng)站（見(jiàn)圖2）中，其背景大量使用矢量插畫(huà)圖片，圖形概括，色彩搭配亮麗，將枯燥的能源消耗數(shù)據(jù)用矢量插畫(huà)的形式展現(xiàn)，使得圖表信息可視化、趣味化。
圖2 Evoenergy消費(fèi)指南網(wǎng)站
再如Mailbakery網(wǎng)站（見(jiàn)圖3），它使用了大量精致的卡通矢量圖來(lái)宣傳它們定制化的郵件服務(wù)。當(dāng)鼠標(biāo)單擊并切換第一屏下方不同的導(dǎo)航圖標(biāo)時(shí)，上方Banner區(qū)域就被替換成相應(yīng)的圖片內(nèi)容，令用戶容易理解，過(guò)目難忘。整個(gè)網(wǎng)頁(yè)無(wú)論是表現(xiàn)網(wǎng)站形象的Banner圖片，還是導(dǎo)航圖標(biāo)都因統(tǒng)一運(yùn)用矢量插畫(huà)的方式而令其視覺(jué)風(fēng)格上達(dá)到了高度統(tǒng)一。
圖3 Mailbakery網(wǎng)站
現(xiàn)如今無(wú)論是攝影圖片還是矢量圖片，使用大圖作為網(wǎng)頁(yè)背景越來(lái)越受歡迎，有的甚至是全屏圖片。如Martina Sper1家居網(wǎng)站（見(jiàn)圖4）首頁(yè)將整個(gè)背景都鋪滿了大圖，全局導(dǎo)航固定在界面右側(cè)，其目的是讓用戶完全沉浸在美好的家居生活中。
圖4 Martina Sper1家居網(wǎng)站
在其1ookbook頁(yè)面中同樣也使用了全屏圖片背景，它模擬雜志的版式，巧妙地將界面一分為二，當(dāng)用戶單擊左側(cè)場(chǎng)景內(nèi)某個(gè)家居商品時(shí)，右側(cè)則會(huì)出現(xiàn)該商品的單品圖，若感興趣還可單擊右側(cè)單品圖進(jìn)入該產(chǎn)品的詳細(xì)頁(yè)面（見(jiàn)圖5）。
圖5 1ookbook頁(yè)面
雖然適當(dāng)使用攝影圖片來(lái)做網(wǎng)站背景可以提升網(wǎng)頁(yè)的視覺(jué)效果，但圖片的加載還是多少會(huì)影響網(wǎng)站速度，因此這種布局較適用于結(jié)構(gòu)簡(jiǎn)單的品牌企業(yè)網(wǎng)站、時(shí)尚類網(wǎng)站、專題網(wǎng)站等。
二、格式與優(yōu)化
網(wǎng)站中圖片的格式類型以放大后是否能清晰地顯示為維度，可分為位圖格式與矢量圖格式兩種。
1.位圖格式
位圖格式是網(wǎng)頁(yè)設(shè)計(jì)中最常用的圖片格式。圖片有自己固定的尺寸大小，放大后不能清晰顯示。如果將一個(gè)網(wǎng)頁(yè)“另存為”，會(huì)看到文件夾中保存大量的JPG、PNG、GIF各種格式的圖片。
這3種格式是位圖中最典型、也是最具代表性的格式，它們有著各自的優(yōu)點(diǎn)，設(shè)計(jì)師切圖輸出時(shí)必須根據(jù)圖片本身需求，選擇恰當(dāng)?shù)母袷?。JPG、PNG、GIF3種圖形格式類型特點(diǎn)對(duì)比如下。
（1）JPG是一種有損壓縮的格式，它能夠?qū)D像壓縮在很小的儲(chǔ)存空間，以24位顏色存儲(chǔ)單個(gè)光柵圖像，支持224（約1670萬(wàn)）種色彩，非常適合儲(chǔ)存像素色彩豐富的圖片、照片等，這些圖片即使有輕微的失真也不容易輕易察覺(jué)。但JPG不適合用來(lái)儲(chǔ)存有清晰邊緣的線條圖、圖標(biāo)或文字等圖片。
（2）GIF是一種無(wú)損壓縮的格式，它限制了色彩表現(xiàn)能力、能夠有效地節(jié)省文檔存儲(chǔ)空間。GIF只擁有8位的顏色深度信息，支持2（256）種色彩。當(dāng)圖片中的色彩在256色以內(nèi)時(shí)，使用GIF可以得到相當(dāng)好的輸出質(zhì)量，同時(shí)兼顧了文件大小。因此GIF非常適合用來(lái)表現(xiàn)扁平化圖標(biāo)、線條插畫(huà)、文字等部分的輸出，同時(shí)還支持全透明靜態(tài)圖片以及動(dòng)畫(huà)圖片格式，能兼容所有瀏覽器。
圖6 JPG格式（左)和GIF格式（右）
以一張450像素×390像素的照片切圖為例，分別輸出JPG、GIF兩種格式（見(jiàn)圖6）來(lái)做個(gè)對(duì)比。兩張圖的清晰程度相當(dāng)，但GIF格式中的漸變色呈顆粒狀，文件大小為92.4KB，JPG格式漸變色過(guò)渡自然，文件大小僅為26.4KB，顯然JPG格式更適合儲(chǔ)存色彩豐富具有漸變色的照片圖像。
PNG分為PNG-8以及PNG-24兩種格式，后面的數(shù)字是代表這種PNG格式最多可以索引和存儲(chǔ)的顏色值?！?”代表2s次方也就是256色，PNG-8與GIF圖片顯示的特性十分接近?！?4”則代表224（約1600多萬(wàn))種色彩，也就是說(shuō)即使遇到色彩豐富的漸變色PNG-24也能清晰顯示。
在透明度上PNG-8與GIF一樣，支持圖片的完全透明與完全不透明；而PNG-24格式支持圖片全透明及半透明顯示。這里的透明圖片類似于PS源文件中的一個(gè)圖層，圖像以外的空間不顯示。全透明與半透明的區(qū)別在于全透明的alpha值為0，放置網(wǎng)頁(yè)上為一個(gè)完整、不透底的圖；半透明的alpha值可以任意設(shè)置，如同一個(gè)水印。
雖然PNG-8和PNG-24都支持全透明圖片，但存儲(chǔ)的效果卻大不一樣，如果將一個(gè)蛋糕的圖片存成兩種PNG格式，放在一個(gè)背景色上，對(duì)比效果會(huì)發(fā)現(xiàn)PNG-8格式圖片周圍會(huì)有白色的雜邊，內(nèi)存占用大小為25.6KB，而PNG-24格式的圖片周圍光滑、干凈，內(nèi)存大小為101KB。由此可以看出貌似完美的PNG-24格式不足之處就是該格式文件所占空間較大，因此圖片在選擇切圖格式時(shí)要平衡圖片質(zhì)量與其所占空間。
3種靜態(tài)的位圖格式屬性特點(diǎn)對(duì)比如表1所示。
表1 3種靜態(tài)的位圖格式屬性特點(diǎn)對(duì)比
2.矢量圖格式
矢量圖格式的有SVG（Scalable Vector Graphics)。其特點(diǎn)一是文件體積小，二是能夠被大量的壓縮，圖片可無(wú)限放大而不失真，能夠?qū)崿F(xiàn)互動(dòng)和濾鏡效果，三是此格式既支持設(shè)計(jì)師在設(shè)計(jì)軟件中設(shè)計(jì)后保存，還支持程序員通過(guò)代碼直接生成圖形。
如在Illustrator軟件中設(shè)計(jì)一個(gè)200像素×200像素西瓜的圖片，將圖形分別保存為JPG、GIF、SVG3種格式。
先對(duì)比JPG、GIF兩種格式（見(jiàn)圖7）效果，兩張圖的清晰程度相當(dāng)，JPG格式的圖片默認(rèn)背景為白色，文件大小為6.06KB，GIF格式的圖片背景為全透明，文件大小為2.68KB。而儲(chǔ)存為SVG格式的圖片僅有2KB，用瀏覽器打開(kāi)時(shí)能隨著瀏覽器的窗口的擴(kuò)大而擴(kuò)大，圖片依然清晰。開(kāi)發(fā)與設(shè)計(jì)人員均可在SVG格式中更改代碼來(lái)調(diào)整圖形的樣式。
圖7 JPG、GIF兩種格式
三、圖像的肌理
肌理，又稱質(zhì)感，由于物體的材料不同，表面的排列、組織、構(gòu)造等不同，因而產(chǎn)生粗糙感、光滑、軟硬感不同，不同的質(zhì)感和肌理，會(huì)使人產(chǎn)生不同的心理感受。如rosa網(wǎng)站（見(jiàn)圖8），網(wǎng)站的桌面肌理背景營(yíng)造一種進(jìn)餐的氛圍，增強(qiáng)食欲感。
圖8 rosa網(wǎng)站
I do官網(wǎng)（見(jiàn)圖9）鉆石戒指選用銀色的絲綢作為背景營(yíng)造出戒指溫柔的品質(zhì)。
圖9 I do官網(wǎng)
Thenestonline網(wǎng)站（見(jiàn)圖10）大面積的木紋背景營(yíng)造出一種復(fù)古的氛圍。該品牌的產(chǎn)品以牛皮紙張作為襯景，烘托出產(chǎn)品的純天然、樸素的特點(diǎn)。
圖10 Thenestonline網(wǎng)站
