- 相關(guān)推薦
正確使用網(wǎng)絡(luò )圖片的問(wèn)題
圖片對于網(wǎng)站的作用絕不僅僅是裝飾和點(diǎn)綴，網(wǎng)站顏值高低、能否立刻吸引住用戶(hù)、能否給用戶(hù)留下一個(gè)好的初始印象，甚至能否讓用戶(hù)更加理解網(wǎng)站所要表達的內容和觀(guān)點(diǎn)，這些都是可以靠圖片來(lái)加分的。下面是小編分享的解決使用網(wǎng)絡(luò )圖片的問(wèn)題的辦法，希望大家認真閱讀!
圖片素材的挑選
挑素材大家都會(huì )，這里只重點(diǎn)說(shuō)一下頭圖的挑選，也就是頁(yè)面上方占據視覺(jué)焦點(diǎn)的大圖。因為它可以說(shuō)是整個(gè)頁(yè)面中最重要的一張圖，直接影響到訪(fǎng)問(wèn)者對你網(wǎng)站的第一印象，所以應該精心挑選。
挑選原則：畫(huà)面內容合適 > 尺寸足夠 > 清晰度足夠
另外還有一些加分項：畫(huà)面構圖、色調、適合二次加工(如果需要的話(huà))等。
挑選頭圖首先當然是畫(huà)面內容合適，也就是能很好地體現你的主題，或者你一眼看上去就覺(jué)得非它不可。如果畫(huà)面足夠有吸引力、沖擊力，或者看上去舒服養眼，就更好了。
其次尺寸要夠，重點(diǎn)考慮寬度值。比如你計劃留給頭圖的區域寬度是1200px，就不能找張只有1000px寬的圖片來(lái)湊數。(如果找到喜歡的圖，尺寸又不夠怎么辦?百度和谷歌都有圖片搜索功能，可以試試，說(shuō)不定能找到同一張圖的更大尺寸。)
清晰度要足夠。清晰度是影響視覺(jué)體驗的重要因素，你不能找一張模糊的，或者修圖過(guò)度導致畫(huà)面明顯失真的圖片來(lái)做頭圖，否則訪(fǎng)問(wèn)者會(huì )覺(jué)得你的網(wǎng)站沒(méi)有誠意。除非你的網(wǎng)站本身就是走的另類(lèi)風(fēng)格路線(xiàn)。
對選好的圖片進(jìn)行處理
處理順序：修圖(濾鏡調色等) > 修改尺寸(含裁切) > 優(yōu)化和保存圖片
現在就好像你規劃好一面背景墻，并且挑好了畫(huà)框，只等著(zhù)往里面裝畫(huà)。所以通常是在頁(yè)面布局已經(jīng)設計好，圖片的位置和尺寸也基本確定下來(lái)，才開(kāi)始對圖片進(jìn)行處理。當然，可能圖片放進(jìn)網(wǎng)頁(yè)之后發(fā)現位置或尺寸不合適，那時(shí)可以再調整，只要記住保留好圖片的原始文件，不要用處理過(guò)的圖片把原始文件覆蓋掉。
圖片處理軟件很多，這里就以功能最強大的Photoshop為例，實(shí)際操作一下。
2.1 修圖
這里的修圖指的是對圖片進(jìn)行修飾調整，包含光影、色調、明暗、對比度，或者濾鏡、風(fēng)格化處理，再或者摳圖換頭換臉等等。這一步就不細說(shuō)了，相關(guān)的教程實(shí)在太多，只是需要提醒一下：保留好原始素材文件。不管是修圖還是裁切、改尺寸，完成之后都要養成“另存為“的習慣，不要覆蓋原始文件。
2.2 修改圖片尺寸
根據你規劃好的尺寸來(lái)對圖片進(jìn)行裁切，所以你找的圖片素材必須大于等于實(shí)際要用到的尺寸。網(wǎng)頁(yè)主體部分(body)的寬度通常在1000到1200px比較合適，也就是說(shuō)頭圖寬度不能小于你設定的header尺寸(除非你的頭圖不需要占滿(mǎn)整個(gè)header區域的寬度)。
2.3 優(yōu)化和保存圖片
網(wǎng)頁(yè)中用到的圖片通常就是三種格式：jpg，png，gif
保存圖片時(shí)的格式選擇，通常遵循以下原則：
色彩豐富的，需要高壓縮比的，例如照片一類(lèi) —— 存為.jpg
色彩相對較少，透明底 —— 存為.png
動(dòng)態(tài)圖片 —— 存為.gif
保存方式，只要是用于網(wǎng)頁(yè)中的圖片，請盡量不要用“存儲”和“存儲為”，而是用下圖中的“存儲為web所用格式”。
在網(wǎng)頁(yè)中引入處理好的圖片
圖片處理完，終于可以打開(kāi)html往里添加了。網(wǎng)頁(yè)中添加圖片的兩種方式：通過(guò)標簽引入，以及通過(guò)background-image屬性設置背景圖。
通過(guò)標簽引入圖片
重點(diǎn)1：標簽的width和height屬性不是用來(lái)縮放圖像的
給img元素指定width和height的值是一種更規范的做法，雖然我自己經(jīng)常懶得寫(xiě)。標簽中的width和height值應該與圖片本身的寬和高相等，最好不要自己隨意設定數值。那么寫(xiě)與不寫(xiě)又有什么區別呢?區別在于如果寫(xiě)了，瀏覽器在加載頁(yè)面時(shí)，可以預留出img所占用的位置，這樣在圖片完全加載出來(lái)之前，就可以更完整地保留html的布局結構。
如果頁(yè)面用到的圖片少，或者圖片文件都很小，整體加載速度快的話(huà)，基本看不出什么區別。但是如果以后你做比較復雜的網(wǎng)站，頁(yè)面中需要放非常多的圖片，或者有體積比較大的圖片，在圖片還沒(méi)有加載出來(lái)時(shí)，后面先加載的內容會(huì )占據圖片原本的位置。所以有時(shí)候你會(huì )看到在一個(gè)內容非常多的頁(yè)面中，圖片一張一張跳出來(lái)，把已經(jīng)加載出來(lái)的其它內容一點(diǎn)一點(diǎn)擠到后面，整個(gè)頁(yè)面布局看起來(lái)完全沒(méi)有規律，各種內容跳來(lái)跳去，直到全部加載完，頁(yè)面布局才固定下來(lái)。
但寫(xiě)了width和height也有一個(gè)壞處，就是如果你的圖片鏈接失效，用戶(hù)加載完整個(gè)網(wǎng)頁(yè)之后，看到的圖片所在位置只是一個(gè)空框框。因此更規范的寫(xiě)法應該是在里面再加上alt屬性，圖片顯示不出來(lái)時(shí)，至少能告訴用戶(hù)這是張什么圖。
如果你直接用標簽中的width和height來(lái)縮放圖像，很不妥，非常不妥。
假如是改小尺寸，看起來(lái)似乎沒(méi)什么問(wèn)題，圖片縮小了好像也看不出清晰度的損失。其實(shí)你改小的只是圖片在用戶(hù)瀏覽器上的顯示尺寸，并沒(méi)有改變這個(gè)圖片文件本身的尺寸，也就是說(shuō)用戶(hù)打開(kāi)網(wǎng)頁(yè)時(shí)，瀏覽器仍然要從服務(wù)器下載原尺寸的圖片，然后在顯示給用戶(hù)的時(shí)候才按照你設定的數值去縮小圖片。顯然，這會(huì )造成帶寬的浪費。如果你的網(wǎng)頁(yè)是自己做著(zhù)玩，那沒(méi)問(wèn)題，可以略過(guò)這一條。但假如你有意轉行前端的話(huà)就要注意了，以后如果在公司項目中你的上司看到你這樣的寫(xiě)法，臉色一定會(huì )很難看。
設想一下，假如你在一個(gè)頁(yè)面中用到了十幾二十張圖片，你把它們精心排列整齊，每個(gè)圖只占了200*200左右的一小塊地，看起來(lái)像一個(gè)精美的相冊。然而一看代碼，所有圖片都是直接用的1920*1080的高清圖片，只不過(guò)是在css中改成了顯示出來(lái)的尺寸。結果可想而知，你的用戶(hù)要把這個(gè)網(wǎng)頁(yè)完整加載出來(lái)將會(huì )是一件非�？膳碌氖虑�，但愿他們能有足夠的耐心，和流量。
要是把圖片尺寸改大，那就更不可取了。用css樣式來(lái)強行放大原圖的尺寸，只會(huì )讓圖片精度下降，變得模糊，進(jìn)而影響整個(gè)網(wǎng)站的品質(zhì)感�？吹竭@樣的圖，產(chǎn)品經(jīng)理和設計師都會(huì )追著(zhù)你打的。
我的建議是：標簽中的width和height要么不寫(xiě)，要么就寫(xiě)成和原圖一樣的尺寸。在瀏覽器控制臺里，我們可以把鼠標指針?lè )诺酱a中的圖片路徑上，就能看到這個(gè)圖片文件的真實(shí)尺寸。
重點(diǎn)2：始終保持圖片高寬比(除了裁切圖片時(shí))
保持圖片的高寬比，這一條非常重要!我在作品中心不止一次見(jiàn)到被壓扁或者拉長(cháng)的圖片，這是圖片運用的大忌，千萬(wàn)注意!(除非原始素材就是壓扁或者拉長(cháng)的，那可以適當進(jìn)行反向拉伸，使其盡量還原正常的高寬比。)
無(wú)論是在處理圖片素材時(shí)，還是將圖片插入網(wǎng)頁(yè)的過(guò)程中，我們都應該始終保證圖片保持正確的高寬比。(唯一例外的情況就是裁切圖片，但裁切圖片很多時(shí)候恰恰是為了保持圖像內容的正確比例，裁切之后畫(huà)面中的景物人像等內容沒(méi)有變形，而圖片尺寸卻變得更適合頁(yè)面中使用。)
這里需要特別提醒，如果你一定要用標簽中的width和height來(lái)調整圖片尺寸，請只設定一個(gè)值，另一個(gè)值會(huì )根據高寬比自動(dòng)調整。
另外，也不建議使用百分比來(lái)作為中的width和height的值。
圖片的超鏈接
如果你想要讓你的圖片能像按鈕一樣點(diǎn)擊跳轉到其他地方，非常簡(jiǎn)單，只要在img標簽外面套一層就可以了。
【正確使用網(wǎng)絡(luò )圖片的問(wèn)題】相關(guān)文章：
打坐的正確方法圖片08-04
手提電鋸正確使用方法06-05
關(guān)于消火栓的正確使用方法08-04
磨砂膏正確使用方法04-25
潤膏的正確使用方法07-20
焗油帽的正確使用方法04-10
pf使用率問(wèn)題08-01
化妝水正確使用方法02-09
卸妝水的正確使用方法10-24
濕巾的正確使用方法怎么用08-23