> 譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-2-img-required.html
> 英文原文：http://blog.cloudfour.com/responsive-images-101-part-2-img-required/
我們需要的響應式圖片解決方案的主要原因之一是`<img>`元素功能不足。它只有一個`src`屬性，只能加載一張圖片資源，但是我們需要加載多個資源。
既然如此，你可能會很驚訝怎么我們還在討論`<img>`元素而不是其他新東西例如`<picture>`和`srcset`。
不管采用哪種響應式圖片方案，**`<img>`元素必不可少**。
`<img>`元素在所有的內聯響應式圖片解決方案中都飽受詬病。我喜歡把`img`當做一個添加和應用所有響應式圖片規則的盒子。
你可以用JavaScript來監控`img`元素上`currentSrc`的變化。下面一段簡單的腳本用來監控改變并輸出到頁面上：
~~~
(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);
~~~
你可以在[示例頁面](http://codepen.io/airen/pen/JYRvOZ)觀察實際反映。改變瀏覽器尺寸來觀察`currentsrc`的變化。
將你的瀏覽器慢慢的縮小，你將看到如下圖的一個變化效果：
## 為什么會這樣？
`<img>`總是顯示當前資源，這意味著任何與`<img>`元素交互的JavaScript代碼都會如期持續工作。
（還沒提到幾十年來瀏覽器開發人員寫的非常有價值的正確處理圖片代碼）
正如Eric Portis所說，當我們使用新的響應式圖片標準時，“[我們正逐漸加強`img`](http://alistapart.com/article/responsive-images-in-practice)”的特性。
## 還需要img以外的東西嗎？
在一些場景下單獨用`img`可能就夠了：
* **固定寬度，單一分辨率網頁**:如果你沒有用響應式設計并且不用擔心"retina"屏幕，`img`元素就夠了。
* **文件尺寸差別很小**:對于有些圖片，最大版本和最小版本的尺寸沒有很大區別。常見的有logo，圖標和其他不需要根據視窗變化的小圖片。如果文件尺寸沒什么區別，一張圖片可能就夠了。
* **使用基于矢量的圖片例如[SVG](http://en.wikipedia.org/wiki/Scalable_Vector_Graphics)**:如果使用基于矢量的圖片格式例如SVG，圖片可以自由縮放并不需要多張圖片。在這種情況下，可以直接用SVG做為`img`的圖片源。
當然，這取決于需要適配的瀏覽器是否支持SVG。最好使用`picture`元素來提供可選的圖片格式作為備用方案。會在這個系列里將會介紹這個元素的使用。
## 想要支持高分辨率屏幕怎么辦？
如果想要支持高分屏，我們需要擴展`<img>`元素。請看這個系列的第3部分:**`Srcset`顯示分辨率**。
