他們說，一張圖片勝過千言萬語。真的還是假的，圖像是我們創建網站中的一個重要組成部分。因為它是如此容易嵌入圖像在一個網站（創建自己的圖像，即使在過程中很容易），大多數網站都充滿了他們。有一些很好的例子，那里就如何處理圖像，從不同的觀點與角度的網站，但大多數的網站沒有展示正面的例子。雖然這不是一個設計完全危險的，它可能會降低你的機會來賣，如果你有一個號召性的操作頁面，或者創建良好的閱讀流程的機會。它是更細節的問題不是重要的原則問題，而是處理圖像應該是設計人員理解和運用好。
事實上，用戶想看到的照片在網站上，但他們希望他們是相關的。他們寧愿不具有視覺圖像，而不是一個網頁，擁有大量的照片，只是使它重和雜亂的網頁。在使用網站上的圖像的關鍵，根據這項研究，是基于一些基本概念：
圖片基本面 -規模，構成，質量和曝光是尋找一個良好的形象四個重要的事情。人們實際上尋找優質的圖像，即使是對比產生巨大的變化。
有效性 -如果圖片創建興奮或利息，那么它的工作原理。它歸結為三個特點：
情感訴求 -沒有在圖片中的產品外觀好，使用戶想要嗎？
理性訴求 -它的圖像顯示該產品的好處？
和品牌號召力 -沒有畫面適合你的品牌？
發送 消息 -這是關于圖像發送正確的信息給網站的讀者。
預期 用戶 的響應 -這是有點難度付諸實踐，但其背后的基本想法是，畫面應該幫助決策，并為產品的愿望。我們會談論這個有點遲。
純粹裝飾性的圖片往往是由我們大腦無意識地忽略。像雷達，如果圖像是存在只能作為填料時，大腦會忽略它們。研究結論認為，圖片和真實的人或真正的產品的圖像會被自動歸類為重要的，是人腦進行詳細研究。如果你有一個個人博客，人們寧愿看到你的臉比圖紙或諷刺畫。他們希望看到與他們交流的人的臉，這是信任和粘接的問題。
如果您有自己的公司，這是一個非常好的主意，花一些時間談論它背后的人 - 使用圖像。它給個人觸摸到一個原本不露面的公司和人挖的。其實人們想知道（或至少看）誰的人是公司的后面。如果你能負擔得起，投資一個好的攝影師，并盡量遠離股票圖片（特別是從股票的圖片是不相關的內容）。這可能會花費幾塊錢，但它會大量的值添加到您的公司網站。
幾個眼球追蹤研究表明，更多的細節您的產品圖片都有，你將有結果越好。是的，工作室的大屏幕平板電視作品圖片就好了，不過是蠻好配不上你？人們希望看到的細節，告訴他們！
質量和相關性
下面我會告訴你不同的研究的一些結果。你會看到標有加熱區的幾個網站。紅色區域表示該用戶的目光大多集中，而藍色區域顯示正好相反，說明什么被忽略或關斷供游人。
Adelphia公司眼球追蹤
對Adelphia公司的網站眼球追蹤研究
另外一個事實，即它是一個令人難以置信的過時的設計，你可以清楚地看到，沒有熱區上的圖像。這是因為所有嵌入在其網頁上的圖像是純粹的填料。如果他們使用了相關的圖片，熱區可能是一個有點不同的，但現在它顯示了如何浪費空間的圖像多是在其網站上。
另一個很好的例子可以看到下面。紐約雜志的餐廳部分也得到了眼動跟蹤研究的一部分，它表明，即使全球知名廚師特色的圖像，質量仍然是重要的。所以，即使照片是有點相關，低對比度和小尺寸影像被簡單地忽略。圖像質量是一樣重要的是所使用的圖像的相關性。必須有一個平衡，在質量和相關性是兩個指導原則。
NYMag，retaurant節
眼動跟蹤在紐約州馬格網站
雅各布尼爾森和卡拉佩尼斯寫了一篇題為“ 為障礙影像 “幾年前。上面的圖像是禮貌的peachpit，誰發表的研究驚人的頭。感謝您對巨大的工作！
指導用戶
沒有多少設計師有一個心理學學位，因此我們很少有人知道人的大腦是如何工作的。同樣的眼動跟蹤研究表明，我們的重點可以很容易地影響和改變圖像。顯然，我們談論的高品質，相關的圖片，不填充物。在一個名為研究“你看看他們的樣子，” 詹姆斯微風 顯示相關的圖片怎么能是一個網站的流量。
他用嬰兒尿布制造商的網站作為一個例子就106人的眼球追蹤研究。正如你可以在兩個圖像下面看到的，當寶寶面臨的游客，大多數人往往看他的臉。備注包括“可愛，可愛，甜美的小南瓜”很可能是相當受歡迎。
眼球追蹤研究
研究的尿布網站
然而，當相同的廣告，具有相同的文本，用同樣的嬰兒，但在不同的位置被呈現給一個人106，其結果是明顯地更好。不僅做到了人們關注的焦點大多是上的文字，但你也可以看到更加重視品牌，甚至小文下方，這是一個退款保證聲明（對于一個企業非常重要的，他們的賣點大概就是 - 一個無賴錯過了）。
嬰兒2
這說明有多少影響力的畫面可以有。
德高貝登和思考一起工作，幾年前，想出了這個研究，證實上述結果：在用戶心目中確實可以向演示文稿中或廣告關鍵信息或元素引導。
由于許多廣告有美麗的模特，他們往往成為焦點，而不是產品。代替提請注意對產品型號，偷的重視和借鑒它往自己。下面的研究顯示了如何可以固定。
在數字，這個研究顯示更加清晰的效果。在初始的廣告（左），很少有專注于品牌和產品 - 實際上只有6％的人看著它。該廣告被操縱，并再次測試后，但，更多的人看著它。不低于84％的人看了看產品和品牌（甚至是標志在底部）它被修改后。這是一個14X觀眾增加，這在我看來，是一個巨大的差異。
正確的圖像可以幫助設計人員指導用戶的眼睛。如果模型的使用，使它們看起來對產品形象，商標（品牌）或文本。這將增加產品知名度，并收到預期的效果。
圖像需要一個目的
圖片不僅可以引導用戶的關注，同時也解釋了很多關于產品，在短短幾秒鐘內-比的話可以形容它。一個非常著名的例子是廣場，智能手機的應用程序，允許您通過您的手機或平板電腦來接受信用卡付款使用的小型設備。
該產品是由一個簡單的圖像在許多方面說明
正如你可以在上面的圖片中看到，該游客了解在短短的幾秒鐘關于產品的很多事情。在看了這張照片，他們已經知道如何將讀卡器連接到裝置，它有多大，它適用于哪些設備（也可以將它與Android，但它是相當困難的證明也行），如何刷信用卡，什么時候會出現卡刷卡設備的屏幕上。大量的長，無聊的段落都必須寫入（和被客隊顯然讀取），以了解這些信息。相反，一個畫面說明了一切。這是有效地利用圖像中的經典，精彩的例子！
另一個很好的例子如下顯示，蘋果有時會如何宣傳自己的MacBook Air的產品。我們都知道它的小，重量輕，美觀。好吧，如果你不知道它，你會得到的想法，在一毫秒通過查看下面的極簡主義廣告。
MacBook Air的廣告
Macbook Air的簡單而有效的形象宣傳
信任是關鍵
如果你有一個在線商店，記住，信任是至關重要的。沒有人會買在互聯網上一針，如果他們不信任的賣家。之所以亞＆#8203;＆#8203;馬遜和eBay都受歡迎，是因為，除了事實，他們是龐大的全球品牌，并提供不同的退款保證，他們也有很多不同的安全功能。消費者信任他們，他們知道，如果賣家是不會交付產品，公司將照顧它。如果你擁有一個網上商店，確保客戶信任你。
這是什么都做圖像？那么它的簡單。信托可以通過圖像，根據一項研究可以實現登陸頁面的轉化率通過帕拉斯·喬普拉制作。
建立信任
當有訪客在線處理，建立信任是非常重要的
這是令人難以置信聽到這個在線商店銷售巴西和加勒比畫作。輕微的改變意味著增加了超過95％的轉換率，從8.8到不低于17.2。怎么樣？而不是顯示繪畫的縮略圖，他們發現，使他們成為藝術家的縮略圖。畫作的質量從來就不是一個問題，但事實上，他們不相信該店。通過簡單地顯示了藝術家的面孔，觀眾意識到他們離真正喜歡自己的人都買。
喬普拉在談論誰擁有一個網上組合其他用戶。通過只用自己的圖片更換聯系人圖標，他提高了轉化率45％，從3.7到5.5。他的結論是，參觀者可以現場照片，并馬上傾向于不相信他們。他們創造他們所看到的面孔情感聯系在線。
優化
要結束這篇文章，我也想提一下使用圖像在網站的一些技術方面的問題，并沒有涉及到太多的細節。首先，我想提一提重要的優化實際上是怎樣的。
根據從數據二月15日，一個網頁的61.9％填充有圖象與網頁的存在1.29MB的平均尺寸。圖片是沉重的，并采取了大量的時間來加載。他們是危險的用戶的瀏覽流量。據雅各布尼爾森，一秒鐘的響應時間 的限制，用戶感覺他們是自由航行的命令空間，而不必過分等待電腦。
網頁大小統計
平均頁面尺寸 - 2013年2月15日
在我們上載1WD圖像，我們總是讓他們通過Photoshop的存儲為Web和設備所用的功能，在這里你可以減少圖片的大小而不會降低品質太多了。Smush.it是做同樣的一個免費的在線工具，還有一個WordPress插件為它做。難道不是那些上傳你的圖片和你的網站的總大小之前的人會減少，這意味著更快的加載時間，減少用戶受挫。
寬度和高度
最后技術方面我想談的是提的圖像的寬度和高度的HTML標記的必要性。這背后的道理很簡單。一個網頁總是首先加載文本，然后將影像。但正因為如此，直到圖像完全加載，它們的位置標有藍色的小問號的縮略圖。當圖像被加載，這個小縮略圖擴展到圖片，這破壞了閱讀流量，如果用戶已經開始閱讀的文本的完整大小。通過擴展，縮略圖也將移動其他元素，用戶可能會專注于網站。
通過聲明在HTML標記的圖像的高度和寬度，可以肯定的是，縮略圖（這將仍然存在），將出現從一開始就在圖片的完整大小 - 這意味著當圖像被加載，它只是填補，而不是擴大它的大縮略圖。這是一個小細節，但是一個很好的接觸。
寬度和高度的圖像
然而，有些人認為這是一個古老的技術，并與移動瀏覽的出現，不是非常有效的。我傾向于同意。因此，使用這個只有當你的框架，反應靈敏，不要忘記調整對不同屏幕分辨率的圖像。你不想用的屏幕640像素寬的700像素寬的圖像。
底線
如果你想擁有一個成功的網站，尤其是當你的目標是轉換使用圖像的正確方法是至關重要的。正如你所看到的在上面的例子，形象不好是一個關閉的游客，他們會忽略它們。但是，如果你設法找到合適的圖片，并在適當的地方插入他們，他們可以創造奇跡，為你，為他們做一些其他人。
同樣重要的是要記住，圖像并不總是為您的網站的問題的解決方案。有時候，你的網站應該甚至沒有任何圖像。測試是很重要的在這件事情。我會放在一起大約在未來幾個月內A / B測試為你的文章，教你不僅是如何使用它，但更重要的是，如何使用它，哪些是你可以把它弄出來。
,