Responsive images，Browser Prefetching VS SEO友好方法

一直在閱讀很多內容。對我來說，客戶端解決方案是最好的路線[在這個時刻]Responsive images，Browser Prefetching VS SEO友好方法

我對圖片元素的一些抱怨，除了有額外的語法，回退img標籤將被瀏覽器預取。所以我不想加載額外的圖像。

我已經解決了img srcset，使用spacer/temp png作爲src，因爲我不需要任何預取。現在這沒有任何非js回落。另外，我不確定這會與SEO有什麼關係？有一個輕微的油漆和迴流問題，但我認爲CSS可能會照顧到這一點。

有沒有人有任何建議，我不是在尋找任何腳本，但更多的是'理想'的解決方案。尋找：

避免預取[不知道如何昂貴，這是]
避免額外的圖像加載
對非js的一些潛在的後備？ [不知道這是否甚至可能，如果你避免預取]
是否有方法來測試性能，即如果我有大約15-20圖像在頁面上，JavaScript交換出所有圖像標籤上的src調整大小/刷新

FINALLY 是更好在比方說3個斷點[即基於屏幕寬度]與最大寬度投放圖像：100％，因此它適合用於所有其他決議（斷點之間） OR 是它更好地測量父容器/網格列的寬度並提供最接近該大小/寬度的圖像[即，不基於屏幕寬度]

來源

2014-02-25 Neo

您可以使用每個斷點的背景圖像作爲JS後備，當JS不可用時設置條件類嗎？背景圖像也可以在媒體查詢中設置，因此只能在設備所在的任何斷點處下載。 – dward

討論關於響應式圖像的不同技術是堆棧溢出的主題。「你應該只根據你面臨的實際問題提出切實可行的，可回答的問題。聊天，開放式問題會降低我們網站的實用性，並將其他問題推到首頁。」請重新提出您的問題，詢問您正在使用的某種方法並遇到問題。 –

我已經編輯了標題以更具體。我不是在尋找具體的答案，只是一些指導。我不明白還有什麼要問這樣的問題嗎？ – Neo

目前存在一些正在生產中使用的不同響應式圖像解決方案。這些包括picturefill polyfill的不同版本以及我將在下面討論的稱爲Imager.js的解決方案。正如在其他答案中已經指出的那樣，目前在JavaScript中創建的缺口解決方案沒有一個是完美的:) :)

Imager.js（由BBC和衛報使用）不預取，加載圖像一次，只會爲圖像容器加載最適合大小的圖像。該解決方案使用帶有透明圖像的佔位符元素（例如，帶有數據屬性的<div>，以指定源），稍後將根據持有者的最佳質量/大小URL更新src屬性。這使得Imager可以避免額外的請求，因爲它知道圖像源需要更改的時間。它還支持延遲加載和瀏覽器返回到IE8。

你問過關於no-js的回退。英國廣播公司對此的做法是爲用戶提供核心或增強的體驗。 '核心'速度很快，並且在任何地方都能正常運行，但是會丟棄不重要的資源，比如圖片。他們增強的體驗確實包括需要JavaScript的圖像和功能。我讀過的關於這方面的理由都與性能有關。由於圖像通常是頁面上最昂貴的資產（最大的文件尺寸明智），他們從核心經驗中忽略了他們，我同意這種方法。

如果核心/增強的體驗的想法不適合你的需求，你可以使用它指向相同的URL佔位符data-src屬性的圖像這意味着你能容納每一圖像佔位符<div>之下<noscript>塊作爲一個後備，如果你不得不這樣做，這應該是在JS關閉的瀏覽器中具有相當的彈性。

關於切換圖片的基準測試表現，我建議您使用Chrome DevTools進行測試（您需要注意一些指標 - 網絡請求，佈局以及對網頁幀速率的影響）。網絡面板和時間軸幀模式應該會讓你在那裏相當遠。

來源

2014-02-25 23:32:59 addyo

Responsive images，Browser Prefetching VS SEO友好方法

回答

相關問題