正確使用網絡圖片的問題

圖片對於網站的作用絕不僅僅是裝飾和點綴，網站顏值高低、能否立刻吸引住用户、能否給用户留下一個好的初始印象，甚至能否讓用户更加理解網站所要表達的內容和觀點，這些都是可以靠圖片來加分的。下面是小編分享的解決使用網絡圖片的問題的辦法，希望大家認真閲讀!

　　圖片素材的挑選

挑素材大家都會，這裏只重點説一下頭圖的挑選，也就是頁面上方佔據視覺焦點的大圖。因為它可以説是整個頁面中最重要的一張圖，直接影響到訪問者對你網站的第一印象，所以應該精心挑選。

挑選原則：畫面內容合適 > 尺寸足夠 > 清晰度足夠

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

挑選頭圖首先當然是畫面內容合適，也就是能很好地體現你的主題，或者你一眼看上去就覺得非它不可。如果畫面足夠有吸引力、衝擊力，或者看上去舒服養眼，就更好了。

其次尺寸要夠，重點考慮寬度值。比如你計劃留給頭圖的區域寬度是1200px，就不能找張只有1000px寬的圖片來湊數。(如果找到喜歡的圖，尺寸又不夠怎麼辦?百度和谷歌都有圖片搜索功能，可以試試，説不定能找到同一張圖的更大尺寸。)

清晰度要足夠。清晰度是影響視覺體驗的重要因素，你不能找一張模糊的，或者修圖過度導致畫面明顯失真的圖片來做頭圖，否則訪問者會覺得你的網站沒有誠意。除非你的網站本身就是走的另類風格路線。

　　對選好的圖片進行處理

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

現在就好像你規劃好一面背景牆，並且挑好了畫框，只等着往裏面裝畫。所以通常是在頁面佈局已經設計好，圖片的位置和尺寸也基本確定下來，才開始對圖片進行處理。當然，可能圖片放進網頁之後發現位置或尺寸不合適，那時可以再調整，只要記住保留好圖片的原始文件，不要用處理過的圖片把原始文件覆蓋掉。

圖片處理軟件很多，這裏就以功能最強大的Photoshop為例，實際操作一下。

2.1 修圖

這裏的`修圖指的是對圖片進行修飾調整，包含光影、色調、明暗、對比度，或者濾鏡、風格化處理，再或者摳圖換頭換臉等等。這一步就不細説了，相關的教程實在太多，只是需要提醒一下：保留好原始素材文件。不管是修圖還是裁切、改尺寸，完成之後都要養成“另存為“的習慣，不要覆蓋原始文件。

2.2 修改圖片尺寸

根據你規劃好的尺寸來對圖片進行裁切，所以你找的圖片素材必須大於等於實際要用到的尺寸。網頁主體部分(body)的寬度通常在1000到1200px比較合適，也就是説頭圖寬度不能小於你設定的header尺寸(除非你的頭圖不需要佔滿整個header區域的寬度)。

2.3 優化和保存圖片

網頁中用到的圖片通常就是三種格式：jpg，png，gif

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

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

色彩相對較少，透明底 —— 存為.png

動態圖片 —— 存為.gif

保存方式，只要是用於網頁中的圖片，請儘量不要用“存儲”和“存儲為”，而是用下圖中的“存儲為web所用格式”。

在網頁中引入處理好的圖片

圖片處理完，終於可以打開html往裏添加了。網頁中添加圖片的兩種方式：通過標籤引入，以及通過background-image屬性設置背景圖。

通過標籤引入圖片

重點1：標籤的width和height屬性不是用來縮放圖像的

給img元素指定width和height的值是一種更規範的做法，雖然我自己經常懶得寫。標籤中的width和height值應該與圖片本身的寬和高相等，最好不要自己隨意設定數值。那麼寫與不寫又有什麼區別呢?區別在於如果寫了，瀏覽器在加載頁面時，可以預留出img所佔用的位置，這樣在圖片完全加載出來之前，就可以更完整地保留html的佈局結構。

如果頁面用到的圖片少，或者圖片文件都很小，整體加載速度快的話，基本看不出什麼區別。但是如果以後你做比較複雜的網站，頁面中需要放非常多的圖片，或者有體積比較大的圖片，在圖片還沒有加載出來時，後面先加載的內容會佔據圖片原本的位置。所以有時候你會看到在一個內容非常多的頁面中，圖片一張一張跳出來，把已經加載出來的其它內容一點一點擠到後面，整個頁面佈局看起來完全沒有規律，各種內容跳來跳去，直到全部加載完，頁面佈局才固定下來。

但寫了width和height也有一個壞處，就是如果你的圖片鏈接失效，用户加載完整個網頁之後，看到的圖片所在位置只是一個空框框。因此更規範的寫法應該是在裏面再加上alt屬性，圖片顯示不出來時，至少能告訴用户這是張什麼圖。

如果你直接用標籤中的width和height來縮放圖像，很不妥，非常不妥。

假如是改小尺寸，看起來似乎沒什麼問題，圖片縮小了好像也看不出清晰度的損失。其實你改小的只是圖片在用户瀏覽器上的顯示尺寸，並沒有改變這個圖片文件本身的尺寸，也就是説用户打開網頁時，瀏覽器仍然要從服務器下載原尺寸的圖片，然後在顯示給用户的時候才按照你設定的數值去縮小圖片。顯然，這會造成帶寬的浪費。如果你的網頁是自己做着玩，那沒問題，可以略過這一條。但假如你有意轉行前端的話就要注意了，以後如果在公司項目中你的上司看到你這樣的寫法，臉色一定會很難看。

設想一下，假如你在一個頁面中用到了十幾二十張圖片，你把它們精心排列整齊，每個圖只佔了200*200左右的一小塊地，看起來像一個精美的相冊。然而一看代碼，所有圖片都是直接用的1920*1080的高清圖片，只不過是在css中改成了顯示出來的尺寸。結果可想而知，你的用户要把這個網頁完整加載出來將會是一件非常可怕的事情，但願他們能有足夠的耐心，和流量。

要是把圖片尺寸改大，那就更不可取了。用css樣式來強行放大原圖的尺寸，只會讓圖片精度下降，變得模糊，進而影響整個網站的品質感。看到這樣的圖，產品經理和設計師都會追着你打的。

我的建議是：標籤中的width和height要麼不寫，要麼就寫成和原圖一樣的尺寸。在瀏覽器控制枱裏，我們可以把鼠標指針放到代碼中的圖片路徑上，就能看到這個圖片文件的真實尺寸。

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

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

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

這裏需要特別提醒，如果你一定要用標籤中的width和height來調整圖片尺寸，請只設定一個值，另一個值會根據高寬比自動調整。

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

　　圖片的超鏈接

如果你想要讓你的圖片能像按鈕一樣點擊跳轉到其他地方，非常簡單，只要在img標籤外面套一層就可以了。