2012-01-04 111 views
4

我在尋找圍繞圖像分辨率,網頁大小和質量的優秀文章,尤其是關於當前如何影響網站的問題。圖像的尺寸,分辨率和質量建議

我正在爲一個客戶做一個網站,並且作爲藝術和設計的榮譽畢業生,客戶堅持認爲她的7mb-10mb圖片足夠用於她的網站,總計近400mb。我嘗試過爭論帶寬限制和性能,但這些都沒有成功。

圖像標準爲72dpi,不大於您的標準屏幕分辨率(1024x768)和1mb以上的尺寸(這在我看來已經太大了)。我的觀點是,在頁面加載時將7MB +文件加載到圖庫中會嚴重阻礙用戶的體驗,因爲如果7-10張圖像在加載頁面之前必須等待很長一段時間才首先進入緩存,甚至測試它與延遲加載插件(我們不想閃光)和後期加載有性能處罰。

有沒有人在這裏有任何關於圖像大小,分辨率和質量的建議?當用戶瀏覽圖庫時,我們不想放鬆圖像的高清質量(顯然,我們必須先縮略圖)?

+0

您是否在Photoshop中研究了「保存爲網絡」功能?使用jpg格式的80%質量的「保存爲網頁」通常會給您帶來好的結果。如果您的整個網頁大於1.5 MB - 您將遇到性能問題。我懷疑有些人會說它不應該超過0.5MB。 – 2012-01-04 13:12:41

+0

只有大品牌網站纔有權使用大象尺寸的圖片,因爲它們可以。這裏有可用性問題,網站應該是清楚的(當然是美麗的),因爲他們的目標是溝通。我建議你跟你的客戶談談。你是專業人士,所以你知道什麼是對的。有關您可以在http://ux.stackexchange.com/中查詢的原因 – Yisela 2012-01-04 14:06:13

回答

1

我以前讀指引(當我們還在使用1Mbps的連接或以下),並已按照這些到現在爲止:

  • 高分辨率圖像應不大於1.5更大 - 2MB。使它大到比網頁內容本身更大。嘗試如何把大的照片在他們的網站檢查http://deviantart.com,並檢查使用EXIF圖像性能如有
  • 尺寸應足以在瀏覽器中可見(避免滾動)
  • 壓縮進行測試。這是一個案件的基礎上,沒有設置是每個人都一樣。高質量,高壓縮而沒有可見的質量損失是網頁設計中的一種實踐。
  • JPEG最適合圖像,PNG適合佈局,GIF適合圖標。
  • 嘗試使用javascript在瀏覽器空閒時在後臺加載圖像。這樣,它們在用戶知道它之前就在緩存中。
  • 更多關於網頁設計,避免在網站本身使用沉重的圖形,使網站速度快,所以我們只等待圖像。
1

如果你真的把它煮沸,你沒有選擇。

你說的是巨大的文件大小,這是不現實的。

您需要下載較小的版本。之後,您可以隨後下載更高質量的版本,或者通過onmouseover或點擊提供完整圖像。

1

一些一般性的指導原則:

  • 縮略圖(當然)

  • 提供多種圖像大小(小,中,大)。雖然我瞭解巨型圖像對用戶體驗的影響,但有些人擁有快速連接和大顯示屏,並且/或者願意等待高分辨率版本。 但它不應該是唯一的選擇。

  • 嘗試使用不同的壓縮級別,以查看對於不同大小最適合的工具。在整個電路板上使用一個壓縮級別並不總是奏效。再次(取決於源材料),可能需要在高端處進行接近無損的壓縮。例如,用於打印的圖像,具有精細細節的CAD圖紙等。

  • 使用順序加載技術(如果適用)。例如,如果您有10個要加載的圖像(優化或不是),請確保第一個可見的圖像是從服務器實際請求的第一個圖像。

1

當涉及到它時,您的客戶的印象是要求縮小她的圖像代表了一種「折衷」,只會導致用戶收到的圖像質量受到損害。

事實是,當然,8-10MB的圖片非常大,以至於大部分用戶需要花費很長時間才能下載,創造了一種可怕的用戶體驗,從而提高了跳出率。

向您的客戶展示一個並排演示她的網站加載一些網頁優化圖像,並向她展示一個網站加載8-10MB圖像,然後讓她決定。最終,作爲專業人員的工作是協助她做出正確的選擇,但如果她堅持要求(她的品牌,金錢和權利),她可以自由地做出不好的選擇。

如果用戶使用的是超高分辨率顯示器,或者窗口看起來特別大,您可以做的其他事情是檢測窗口的大小並加載較大的圖像。

祝你好運!