正確使用網(wǎng)絡(luò)圖片的問(wèn)題

　　圖片對(duì)于網(wǎng)站的作用絕不僅僅是裝飾和點(diǎn)綴，網(wǎng)站顏值高低、能否立刻吸引住用戶、能否給用戶留下一個(gè)好的初始印象，甚至能否讓用戶更加理解網(wǎng)站所要表達(dá)的內(nèi)容和觀點(diǎn)，這些都是可以靠圖片來(lái)加分的。下面是小編分享的解決使用網(wǎng)絡(luò)圖片的問(wèn)題的辦法，希望大家認(rèn)真閱讀!

　　圖片素材的挑選

　　挑素材大家都會(huì)，這里只重點(diǎn)說(shuō)一下頭圖的挑選，也就是頁(yè)面上方占據(jù)視覺(jué)焦點(diǎn)的大圖。因?yàn)樗�可以說(shuō)是整個(gè)頁(yè)面中最重要的一張圖，直接影響到訪問(wèn)者對(duì)你網(wǎng)站的第一印象，所以應(yīng)該精心挑選。

　　挑選原則：畫面內(nèi)容合適 > 尺寸足夠 > 清晰度足夠

　　另外還有一些加分項(xiàng)：畫面構(gòu)圖、色調(diào)、適合二次加工(如果需要的話)等。

　　挑選頭圖首先當(dāng)然是畫面內(nèi)容合適，也就是能很好地體現(xiàn)你的主題，或者你一眼看上去就覺(jué)得非它不可。如果畫面足夠有吸引力、沖擊力，或者看上去舒服養(yǎng)眼，就更好了。

　　其次尺寸要夠，重點(diǎn)考慮寬度值。比如你計(jì)劃留給頭圖的區(qū)域?qū)挾仁?200px，就不能找張只有1000px寬的圖片來(lái)湊數(shù)。(如果找到喜歡的圖，尺寸又不夠怎么辦?百度和谷歌都有圖片搜索功能，可以試試，說(shuō)不定能找到同一張圖的更大尺寸。)

　　清晰度要足夠。清晰度是影響視覺(jué)體驗(yàn)的重要因素，你不能找一張模糊的，或者修圖過(guò)度導(dǎo)致畫面明顯失真的圖片來(lái)做頭圖，否則訪問(wèn)者會(huì)覺(jué)得你的網(wǎng)站沒(méi)有誠(chéng)意。除非你的網(wǎng)站本身就是走的另類風(fēng)格路線。

　　對(duì)選好的圖片進(jìn)行處理

　　處理順序：修圖(濾鏡調(diào)色等) > 修改尺寸(含裁切) > 優(yōu)化和保存圖片

　　現(xiàn)在就好像你規(guī)劃好一面背景墻，并且挑好了畫框，只等著往里面裝畫。所以通常是在頁(yè)面布局已經(jīng)設(shè)計(jì)好，圖片的位置和尺寸也基本確定下來(lái)，才開(kāi)始對(duì)圖片進(jìn)行處理。當(dāng)然，可能圖片放進(jìn)網(wǎng)頁(yè)之后發(fā)現(xiàn)位置或尺寸不合適，那時(shí)可以再調(diào)整，只要記住保留好圖片的原始文件，不要用處理過(guò)的圖片把原始文件覆蓋掉。

　　圖片處理軟件很多，這里就以功能最強(qiáng)大的Photoshop為例，實(shí)際操作一下。

　　2.1 修圖

　　這里的修圖指的是對(duì)圖片進(jìn)行修飾調(diào)整，包含光影、色調(diào)、明暗、對(duì)比度，或者濾鏡、風(fēng)格化處理，再或者摳圖換頭換臉等等。這一步就不細(xì)說(shuō)了，相關(guān)的教程實(shí)在太多，只是需要提醒一下：保留好原始素材文件。不管是修圖還是裁切、改尺寸，完成之后都要養(yǎng)成“另存為“的習(xí)慣，不要覆蓋原始文件。

　　2.2 修改圖片尺寸

　　根據(jù)你規(guī)劃好的尺寸來(lái)對(duì)圖片進(jìn)行裁切，所以你找的圖片素材必須大于等于實(shí)際要用到的尺寸。網(wǎng)頁(yè)主體部分(body)的寬度通常在1000到1200px比較合適，也就是說(shuō)頭圖寬度不能小于你設(shè)定的header尺寸(除非你的頭圖不需要占滿整個(gè)header區(qū)域的寬度)。

　　2.3 優(yōu)化和保存圖片

　　網(wǎng)頁(yè)中用到的圖片通常就是三種格式：jpg，png，gif

　　保存圖片時(shí)的格式選擇，通常遵循以下原則：

　　色彩豐富的，需要高壓縮比的，例如照片一類 —— 存為.jpg

　　色彩相對(duì)較少，透明底 —— 存為.png

　　動(dòng)態(tài)圖片 —— 存為.gif

　　保存方式，只要是用于網(wǎng)頁(yè)中的圖片，請(qǐng)盡量不要用“存儲(chǔ)”和“存儲(chǔ)為”，而是用下圖中的“存儲(chǔ)為web所用格式”。

　　在網(wǎng)頁(yè)中引入處理好的圖片

　　圖片處理完，終于可以打開(kāi)html往里添加了。網(wǎng)頁(yè)中添加圖片的兩種方式：通過(guò)標(biāo)簽引入，以及通過(guò)background-image屬性設(shè)置背景圖。

　　通過(guò)標(biāo)簽引入圖片

　　重點(diǎn)1：標(biāo)簽的width和height屬性不是用來(lái)縮放圖像的

　　給img元素指定width和height的值是一種更規(guī)范的做法，雖然我自己經(jīng)常懶得寫。標(biāo)簽中的width和height值應(yīng)該與圖片本身的寬和高相等，最好不要自己隨意設(shè)定數(shù)值。那么寫與不寫又有什么區(qū)別呢?區(qū)別在于如果寫了，瀏覽器在加載頁(yè)面時(shí)，可以預(yù)留出img所占用的位置，這樣在圖片完全加載出來(lái)之前，就可以更完整地保留html的布局結(jié)構(gòu)。

　　如果頁(yè)面用到的圖片少，或者圖片文件都很小，整體加載速度快的話，基本看不出什么區(qū)別。但是如果以后你做比較復(fù)雜的網(wǎng)站，頁(yè)面中需要放非常多的圖片，或者有體積比較大的圖片，在圖片還沒(méi)有加載出來(lái)時(shí)，后面先加載的內(nèi)容會(huì)占據(jù)圖片原本的位置。所以有時(shí)候你會(huì)看到在一個(gè)內(nèi)容非常多的頁(yè)面中，圖片一張一張?zhí)�出�?lái)，把已經(jīng)加載出來(lái)的其它內(nèi)容一點(diǎn)一點(diǎn)擠到后面，整個(gè)頁(yè)面布局看起來(lái)完全沒(méi)有規(guī)律，各種內(nèi)容跳來(lái)跳去，直到全部加載完，頁(yè)面布局才固定下來(lái)。

　　但寫了width和height也有一個(gè)壞處，就是如果你的圖片鏈接失效，用戶加載完整個(gè)網(wǎng)頁(yè)之后，看到的圖片所在位置只是一個(gè)空框框。因此更規(guī)范的寫法應(yīng)該是在里面再加上alt屬性，圖片顯示不出來(lái)時(shí)，至少能告訴用戶這是張什么圖。

　　如果你直接用標(biāo)簽中的width和height來(lái)縮放圖像，很不妥，非常不妥。

　　假如是改小尺寸，看起來(lái)似乎沒(méi)什么問(wèn)題，圖片縮小了好像也看不出清晰度的損失。其實(shí)你改小的只是圖片在用戶瀏覽器上的顯示尺寸，并沒(méi)有改變這個(gè)圖片文件本身的尺寸，也就是說(shuō)用戶打開(kāi)網(wǎng)頁(yè)時(shí)，瀏覽器仍然要從服務(wù)器下載原尺寸的圖片，然后在顯示給用戶的時(shí)候才按照你設(shè)定的數(shù)值去縮小圖片。顯然，這會(huì)造成帶寬的浪費(fèi)。如果你的網(wǎng)頁(yè)是自己做著玩，那沒(méi)問(wèn)題，可以略過(guò)這一條。但假如你有意轉(zhuǎn)行前端的話就要注意了，以后如果在公司項(xiàng)目中你的上司看到你這樣的寫法，臉色一定會(huì)很難看。

　　設(shè)想一下，假如你在一個(gè)頁(yè)面中用到了十幾二十張圖片，你把它們精心排列整齊，每個(gè)圖只占了200*200左右的一小塊地，看起來(lái)像一個(gè)精美的相冊(cè)。然而一看代碼，所有圖片都是直接用的1920*1080的高清圖片，只不過(guò)是在css中改成了顯示出來(lái)的尺寸。結(jié)果可想而知，你的用戶要把這個(gè)網(wǎng)頁(yè)完整加載出來(lái)將會(huì)是一件非�？膳碌氖虑�，但愿他們能有足夠的耐心，和流量。

　　要是把圖片尺寸改大，那就更不可取了。用css樣式來(lái)強(qiáng)行放大原圖的尺寸，只會(huì)讓圖片精度下降，變得模糊，進(jìn)而影響整個(gè)網(wǎng)站的品質(zhì)感。看到這樣的圖，產(chǎn)品經(jīng)理和設(shè)計(jì)師都會(huì)追著你打的。

　　我的建議是：標(biāo)簽中的width和height要么不寫，要么就寫成和原圖一樣的尺寸。在瀏覽器控制臺(tái)里，我們可以把鼠標(biāo)指針?lè)诺酱�碼中的圖片路徑上，就能看到這個(gè)圖片文件的真實(shí)尺寸。

　　重點(diǎn)2：始終保持圖片高寬比(除了裁切圖片時(shí))

　　保持圖片的高寬比，這一條非常重要!我在作品中心不止一次見(jiàn)到被壓扁或者拉長(zhǎng)的圖片，這是圖片運(yùn)用的大忌，千萬(wàn)注意!(除非原始素材就是壓扁或者拉長(zhǎng)的，那可以適當(dāng)進(jìn)行反向拉伸，使其盡量還原正常的高寬比。)

　　無(wú)論是在處理圖片素材時(shí)，還是將圖片插入網(wǎng)頁(yè)的過(guò)程中，我們都應(yīng)該始終保證圖片保持正確的高寬比。(唯一例外的情況就是裁切圖片，但裁切圖片很多時(shí)候恰恰是為了保持圖像內(nèi)容的正確比例，裁切之后畫面中的景物人像等內(nèi)容沒(méi)有變形，而圖片尺寸卻變得更適合頁(yè)面中使用。)

　　這里需要特別提醒，如果你一定要用標(biāo)簽中的width和height來(lái)調(diào)整圖片尺寸，請(qǐng)只設(shè)定一個(gè)值，另一個(gè)值會(huì)根據(jù)高寬比自動(dòng)調(diào)整。

　　另外，也不建議使用百分比來(lái)作為中的width和height的值。

　　圖片的超鏈接

　　如果你想要讓你的圖片能像按鈕一樣點(diǎn)擊跳轉(zhuǎn)到其他地方，非常簡(jiǎn)單，只要在img標(biāo)簽外面套一層就可以了。

【正確使用網(wǎng)絡(luò)圖片的問(wèn)題】相關(guān)文章：

打坐的正確方法圖片08-04

手提電鋸正確使用方法06-05

關(guān)于消火栓的正確使用方法08-04

磨砂膏正確使用方法04-25

潤(rùn)膏的正確使用方法07-20

焗油帽的正確使用方法04-10

pf使用率問(wèn)題08-01

化妝水正確使用方法02-09

卸妝水的正確使用方法10-24

濕巾的正確使用方法怎么用08-23