更新時(shí)間：2013-08-14
網(wǎng)站建設(shè)中圖形非常有趣，非常誘人。圖形能夠以快速，令人難忘的方式，傳遞出信息，而且圖形的美化裝飾作用，可以大大提高網(wǎng)站吸引力。
網(wǎng)站建設(shè)中圖形非常有趣，非常誘人。圖形能夠以快速，令人難忘的方式，傳遞出信息，而且圖形的美化裝飾作用，可以大大提高網(wǎng)站吸引力。事實(shí)上，我們期望所有的專業(yè)網(wǎng)站上都運(yùn)用圖形，以至我們認(rèn)為，那沒有漂亮圖形的網(wǎng)站都是業(yè)余的網(wǎng)站，但是，我們始終牢記：圖形的作用應(yīng)該是使訪問者注意那些真正的信息和內(nèi)容，而不是分散訪問者的注意力。
圖形增加了下載頁面所需的時(shí)間，而且，其本質(zhì)決定了，圖形都是較大文件--只比音頻和視頻文件小，當(dāng)了解到我們的目標(biāo)受眾使用的是快速internet連接時(shí)，大的圖形文件，以及由此造成的下載時(shí)間長，因此，多大多公共訪問Web頁面應(yīng)該盡量降低文件大，小包括圖形文件。
因此我們必須要慎重地選擇所使用的圖形，每個(gè)圖像都應(yīng)該進(jìn)行優(yōu)化(壓縮)，而且都應(yīng)該具有真正令人驚奇的效果，以抵消訪問者為此付出的帶寬。因此我們在使用圖片的圖片的時(shí)候都要堅(jiān)持幾個(gè)原則，這樣才能夠達(dá)到我們想要web視覺設(shè)計(jì)效果。
一、避免使用不必要的圖形
只有當(dāng)使用圖形可以增加下載點(diǎn)擊數(shù)時(shí)，才使用圖形，即使只是為了美化頁面，也，沒有關(guān)系。只要圖形能夠真正支持網(wǎng)站的主題，另一方面，把圖形當(dāng)做簡單的水平分割線，會增加下載時(shí)間，而且不支持任何真正“貨真價(jià)實(shí)”的東西。或許，標(biāo)準(zhǔn)的<hr/>標(biāo)簽，同樣可以出色地完成這個(gè)任務(wù)。
同樣地，我們可能想要避免導(dǎo)航圖形(而非文本鏈接)用于大部分的網(wǎng)站導(dǎo)航。想一想：如果網(wǎng)站上有50個(gè)主要導(dǎo)航鏈接中，每個(gè)導(dǎo)航鏈接都需要具有獨(dú)特文本的按鈕，而每個(gè)按鈕還有一個(gè)翻轉(zhuǎn)按鈕，其結(jié)果是：僅僅對于網(wǎng)站導(dǎo)航，就要下載100不同圖像，而且還要維護(hù)這100圖像，由于這種圖像膨脹，許多網(wǎng)站都放棄了幾年前流行的“文字按鈕”外觀。
二、以適當(dāng)?shù)母袷奖４鎴D像
如果我們使用錯(cuò)誤的文件格式保存一圖像，將造成文件體積不必要的變大。通過合適的優(yōu)化設(shè)置，選擇合適的文件格式，則可以大大縮小文件體積。
三、重復(fù)使用圖形
第一次引用一個(gè)圖像時(shí)，下載這個(gè)圖像至訪問電腦上瀏覽器的緩存中，之后，不是從服務(wù)器中檢索這個(gè)圖像，而是從訪問者的硬盤進(jìn)行檢索。這意味著，快速顯示。因此，可以接受體積較大的logo和導(dǎo)航欄文件，但是要注意的是，只有當(dāng)url相同的時(shí)候，瀏覽器才會重復(fù)使用一個(gè)圖像，另外給大家一個(gè)建議就是在做頁面布局的時(shí)候網(wǎng)站建設(shè)的美工最好能夠把網(wǎng)站中的圖片都放到大圖上，用css定位這樣網(wǎng)頁的加載的速度會成倍增加。像太傳媒網(wǎng)站的布局圖
四、縮小圖像尺寸
圖像的大小剛好滿足要求即可，不要太大。如你所料，較小的圖像載入速度更快。縮小圖像尺寸的一個(gè)方法是，裁剪掉隊(duì)圖像效果無關(guān)緊要的背景，我們還可以縮小圖像的總尺寸。如果必須使用大圖像，考慮使用連接較大圖像的素略圖(較小的圖集)，從而讓訪問者選擇，是否等待查看大圖。
五、適當(dāng)?shù)氖褂胔eight和width屬性
標(biāo)簽上的height和weidth屬性，瀏覽器也能計(jì)算出圖像尺寸。不過，明確指定這兩個(gè)屬性，使得瀏覽器不用進(jìn)行任何計(jì)算，從而加快頁面的加載速度。而且因?yàn)闉g覽器在載入圖像之前，先載入文本，所以在圖像實(shí)際出現(xiàn)之前，瀏覽器可以為圖像留出適當(dāng)?shù)目臻g。因此文本立刻出現(xiàn)在自己的位置，而不是圖像一個(gè)一個(gè)出現(xiàn)在頁面上時(shí)，不斷地重新排列文本，以配合這些圖像。
注意：用height和weidth屬性縮小圖像尺寸，不會縮短下載時(shí)間，因?yàn)闉g覽器仍然需要下載原始圖像;用height和wedth屬性增大圖像尺寸，會嚴(yán)重降低圖像的質(zhì)量，如果需要調(diào)整圖像的大小，在圖像編輯程序中欲與調(diào)整，不要在瀏覽器中進(jìn)行調(diào)整。
六、在所有的圖像中使用alt屬性
alt文本具有很多優(yōu)點(diǎn)，1、他可以顯示在屏幕閱讀器中，這樣視覺受損的訪問者可以了解圖片的用途。2、當(dāng)圖像鏈接失效，或當(dāng)圖像在瀏覽器中被關(guān)掉時(shí)，顯示alt文本。3、在新版本的瀏覽器中，鼠標(biāo)滑過圖像顯示alt文本，為所有的瀏覽者提供詳細(xì)信息。4、alt文本可以由搜索引擎編入索引，而且可以提高網(wǎng)站的檢索字排名。但是內(nèi)嵌在圖像本身的任何文本，都不會出現(xiàn)在搜索引擎在中。
如果圖像中含有文本，那么alt屬性通常應(yīng)該重復(fù)相同的文本，否則，alt文本應(yīng)該描述出圖像的用途，如果圖像純粹是裝飾之用就是用空的alt屬性，那樣屏幕閱讀器無需浪費(fèi)時(shí)間，閱讀無意義的文本。
