2013-07-18 46 views
3

我爲旅遊行業構建響應式網站,我們的客戶肯定希望遵循巨大照片幻燈片展示其當地的趨勢。這些幻燈片佔用了瀏覽器的全部寬度。建議全屏寬度的最大照片尺寸,響應式幻燈片

我正在尋找一個建議的最大像素寬度的圖像,上傳到這些幻燈片(FYI我使用WordPress的插件相機)。最近有一位客戶問我這是因爲他擔心加載時間,我以前自己已經考慮過這個問題,但還沒有得出一個可靠的結論(在我搜索的時間內還沒有發現任何東西已經)。例如,我在一個網站上傳了1700x565像素的照片。但是每個文件超過200K!無可否認,我可能會更好地優化它,但是您只能在不損失質量的情況下優化到某個特定點。

我有兩個顧慮:

1)什麼誰是真正的大分辨率的用戶,就像1920px或者更大?當照片以1700px到1920px(或其他)的分辨率響應時,照片會變得像素化。

2)如何爲桌面用戶加載時間? (我不打算爲移動設備加載幻燈片,所以這不是問題)。我不想結束一個非常糟糕的谷歌網頁速度得分。

有沒有關於這個問題的最佳實踐?任何有關這方面的文章都可以引用我?

回答

0

驚訝這沒有回答,但我會盡我所能。

拇指爲Web &碼圖像優化的規則,在我的訓練,一直到上傳首選圖像大小和使用媒體查詢 (更多資訊:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)每臺設備進行調整。

通常情況下,我被教會保持我的文件大小爲50-70kb(取決於格式),但數字越低越好。 Shopify的圖像優化的文章最好說它:

http://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips#axzz2hk4NxlaN

希望這有助於!