大圖像、圖片集和視覺“重”的圖像一直是網頁設計的一大趨勢。為了充分利用這種美感，你一定希望能夠確保網站上的每個圖像都能夠跟各種不同分辨率以及大小的顯示屏適配，并希望通過圖片的使用能夠更深入的暫時以及推廣你的品牌。
不過，很多時候我們的設計師不管是從設計技術層面還是在圖像質量層面都存在很多大大小小的認識錯誤。當你在你的網頁設計中使用圖像時，你不必陷入這些陷阱之中，在這裡，我們將看看有哪些具體的圖像使用錯誤，以及如何糾正或者完全避免它們。
錯誤一：上傳大格式的文件
在打印項目中，全尺寸、大格式的圖像可以保證打印的結果保持清晰以及美觀（這是必要的），但是但涉及到網頁設計時就會出現問題。大格式的圖像載入緩慢，而緩慢的加載時間可能會導致用戶放棄繼續瀏覽你的網站。
不幸的是，雖然這是一個很常見的問題，但是還是有很多設計師陷入這種麻煩之中。許多的後台程序允許上傳大格式的圖像，除非你已經很關注這個問題，否則你可能甚至不知道自己上傳圖像的大小是多麼的不可思議。當然，不同用途的不同圖像可能需要不同的規格，你大可參閱你的品牌或網站指南，以了解在你的網站上常見圖像尺寸。
當你考慮到圖像問題時，文件類型也很重要。請不要在你的網站設計中使用tiff格式的圖片。最常見和可用的文件格式是png、jpg和GIF。
解決方案
對於上述問題，最簡單的解決方案是將圖像尺寸縮放到框架需要的尺寸大小，并以適當的網頁分辨率顯示。但還有一點，要盡量考慮到適合的圖像尺寸，以便能最佳地利用你的網站和進行社交分享。例如，Pinterest圖像的寬度為600像素，如果要使圖像達到最佳的共享效果，則應為該尺寸。
錯誤二：忘記裁剪
使用大格式的文件很可能會使一個網站不管是在加載的速度上還是訪客的用戶體驗上都“拖你後腿”，因此可以試著使用全幀圖像隱藏在屏幕上。 通過裁剪，有助於展示你希望用戶看到的視覺效果，方法是創建一個焦點而不必使用全畫幅的圖像。
通過圖像裁剪也可以創建一個動態不一致的視覺效果堆疊，它們都具有相同的形狀和縱橫比。使用多種不同的裁剪尺寸和有趣的形狀可以為網站設計增添視覺刺激。
解決方案
在上傳圖像之前將裁剪為適當的大小或尺寸，以便每個圖像根據需要呈現。
錯誤三：忘記縮略圖
有很多方法來處理縮略圖大小以及調整圖像的大小。其中許多方法取決於你的後台功能，所以我們不會爭論每個的優點，但是，你需要記住更新并注意在你的網站設計中最小的圖像尺寸。
設計師很經常忘記需要根據網站的不同內容更新縮略圖、圖片預覽和圖標的大小。另一個重大錯誤是，使用質量很差的縮略圖，如果圖像質量不好，請不要使用，沒有什麼比形象更重要的了。
解決方案
確保在圖像更改時刪除舊的縮略圖或預覽，並且確保你使用的圖標是最新的。
錯誤四：不可搜索的名稱和元數據
數碼相機可以在那些不能轉換為網站格式的各種元字段中保存大量的圖片信息。這就需要從圖像中剝離這些信息，並替換為可用數據。因為搜索引擎無法讀取在你的網頁設計中的那些圖像的內容，所以要使其變為可被搜索的圖像，就必須包含標題，alt標籤和周圍內容中的描述性詞。
錯誤的圖像名稱示例：
XX1.jpg；
DSCN00023.jpg；
glasses％and％watch.jpg
一個更好的圖像名稱包括幾個描述性的詞，如glasses-and-watch-and-plant.jpg。圖像的alt標籤參考應包括類似的描述，例如“計數器眼鏡，手錶和工廠上的項目”（並確保正確拼寫單詞）。
解決方案
對所有網站圖像和配對圖像使用正確的命名方式並與每個視覺相關的內容匹配。圖像名稱應包括用連字符分隔的描述性詞。
錯誤五：不正確的縮放或伸展
沒有什麼比一個拉長的臉或縮放比例不正確的圖像看起來更奇怪的了。圖像的拉伸或非比例縮放在當主題或後端更改發生時，這可能特別常見。當你縮放圖像的時候，應該確保圖像在每個維度上都能等比例縮放，任何其他錯誤的操作都會損害照片的完整性。
解決方案
仔細觀察所有的縮放比例，並定期檢查你的網站。
錯誤六：未規劃不同終端設備的不同大小
響應式設計框架對圖像的要求有一些影響。形狀或尺寸在不同終端設備上或者通過方向的變化如何使得圖像能夠繼續保持正確且完整的呈現形式呢？
最常見的做法——是使用媒體查詢來觀察網頁設計在不同設備上的不同變化。CSS允許將特定樣式應用於基於屏幕尺寸的圖像上，並在不破壞設計的情況下幫助渲染圖像。
解決方案
將媒體查詢用於響應框架，並在多個設備上測試圖的呈現效果。
錯誤七：忽視視網膜屏幕
不久以前，網站設計要求的圖片標準為600像素寬，72ppi的參數。但隨著科技以及顯示設備的發展，這些標準參數需要做重新的調整和定義。
根據你網站設計的框架，每個圖像實際上可以包括為不同屏幕尺寸和分辨率的多個圖像，包括視網膜顯示所需要的圖像。視網膜顯示器的分辨率可能因設備而異，但顯著高於標準顯示器。
解決方案
包括專門用於視網膜顯示的文件和媒體查詢。
錯誤八：過度使用或通用藝術
商業攝影集（網站）可以是一個很好的快速找圖的工具。但可能會導致一些意想不到的後果。在太多網站上使用的照片，在視覺效果上不會在用戶之間產生太多的交集或者吸引力。
如果你打算使用商業攝影，請考慮通過以有趣的方式編輯或使用的這些圖像，避免圖像看起來像在其他地方看到的東西（查看所有競爭對手或類似網站的圖像）。
解決方案
考慮聘請攝影師創建一個專屬於你的網站攝影作品。包括與你的公司或品牌相關的視覺效果，並以正確的方式反映在你的網站設計上。
總結
為網頁設計項目選擇和創建圖像可能是設計過程中最有趣的部分之一。注意每個圖像和像素，以確保你的網站能夠運行良好。
----圖文來自design shack
