譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-2-img-required.html
英文原文：http://blog.cloudfour.com/responsive-images-101-part-2-img-required/

我們需要的響應(yīng)式圖片解決方案的主要原因之一是<img>元素功能不足。它只有一個src屬性，只能加載一張圖片資源，但是我們需要加載多個資源。

既然如此，你可能會很驚訝怎么我們還在討論<img>元素而不是其他新東西例如<picture>和srcset。

不管采用哪種響應(yīng)式圖片方案，<img>元素必不可少。

<img>元素在所有的內(nèi)聯(lián)響應(yīng)式圖片解決方案中都飽受詬病。我喜歡把img當做一個添加和應(yīng)用所有響應(yīng)式圖片規(guī)則的盒子。

你可以用JavaScript來監(jiān)控img元素上currentSrc的變化。下面一段簡單的腳本用來監(jiān)控改變并輸出到頁面上：

(function() {
  var currentSrc, oldSrc, imgEl;
  var showPicSrc = function() {
    oldSrc     = currentSrc;
    imgEl      = document.getElementById('picimg');
    currentSrc = imgEl.currentSrc || imgEl.src;

    if (typeof oldSrc === 'undefined' || oldSrc !== currentSrc) {
      document.getElementById('logger').innerHTML = currentSrc;
    }
  };

  // You may wish to debounce resize if you have performance concerns
  window.addEventListener('resize', showPicSrc);
  window.addEventListener('load', showPicSrc);
})(window);

你可以在示例頁面觀察實際反映。改變?yōu)g覽器尺寸來觀察currentsrc的變化。

將你的瀏覽器慢慢的縮小，你將看到如下圖的一個變化效果：

為什么會這樣？

<img>總是顯示當前資源，這意味著任何與<img>元素交互的JavaScript代碼都會如期持續(xù)工作。

（還沒提到幾十年來瀏覽器開發(fā)人員寫的非常有價值的正確處理圖片代碼）

正如Eric Portis所說，當我們使用新的響應(yīng)式圖片標準時，“我們正逐漸加強img”的特性。

還需要img以外的東西嗎？

在一些場景下單獨用img可能就夠了：

• 固定寬度，單一分辨率網(wǎng)頁:如果你沒有用響應(yīng)式設(shè)計并且不用擔(dān)心"retina"屏幕，img元素就夠了。
• 文件尺寸差別很小:對于有些圖片，最大版本和最小版本的尺寸沒有很大區(qū)別。常見的有l(wèi)ogo，圖標和其他不需要根據(jù)視窗變化的小圖片。如果文件尺寸沒什么區(qū)別，一張圖片可能就夠了。
• 使用基于矢量的圖片例如SVG:如果使用基于矢量的圖片格式例如SVG，圖片可以自由縮放并不需要多張圖片。在這種情況下，可以直接用SVG做為img的圖片源。

當然，這取決于需要適配的瀏覽器是否支持SVG。最好使用picture元素來提供可選的圖片格式作為備用方案。會在這個系列里將會介紹這個元素的使用。

想要支持高分辨率屏幕怎么辦？

如果想要支持高分屏，我們需要擴展<img>元素。請看這個系列的第3部分:Srcset顯示分辨率。