我們必須改變我們的方法對圖像。為什么？因為互聯網已經改變了。人們不只是瀏覽，在家里，更多的，他們做的所有的地方，在幾乎每一種尺寸的屏幕。事實上，有人在只連接到互聯網世界的組成部分是通過智能手機。

不介意你的iPhone。我們說的廉價手機。更重要的是，他們中的許多人正在做它用有限的數據計劃。

這意味著我們要設計我們的網站，考慮到這一點，這意味著移動互聯網的圖像優化。光柵圖像，如JPEG文件。，不適合快速響應的設計。他們的測量設計是固定的，和大的可以吃掉帶寬。

響應圖像

如果你想保持低成本為您和您的用戶，而讓你的網站看起來總是最好的，你需要找到一個方法讓你的圖像響應。好消息是，人們正在研究的問題。已經有一些解決方案在那里。關鍵是要知道哪一個最適合你的工作。

讓我們開始第一個，最簡單的，你的選擇：

最大寬度：100%；

簡單的說，你那點CSS設置適用于所有圖像。一旦到位，這將確保你的所有圖片呆在它們的父元素。這樣，當人們認為你的網站在小屏幕上，圖像是保證縮小它。

例：

IMG {

最大寬度：100%；

}

利

很簡單，和它的作品完美，只要你不設置任何特定像素的圖像高度。

你根本不需要改變你的HTML。正規的< IMG >標簽來完成工作。

通用瀏覽器支持。

缺點

視網膜屏幕：除非你讓所有的圖像的兩倍的實際像素尺寸要大，他們會對某些機器，像Mac的外觀時髦，現在一些Android設備。怪蘋果。我做的。

利用大很多的圖像（無論你處理視網膜屏幕或不），可以在移動設備上的性能硬。更糟的是，他們可以吃上有限的數據，計劃數據。你不想那樣對你的用戶，如果你能幫助它。

這個簡單的技術有它的位置，但它不會為每一種情況是正確的。如果你的網站將提供大量圖像，用戶在移動設備上，你可能想實現下面的一個解決方案。

注意：接下來的兩個解決方案都包含在HTML5規范。他們將成為“官方”的解決方案，隨著時間的推移，越來越多的瀏覽器開始支持他們。

srcset

通常，當你嵌入一個圖像到一個頁面，你只定義一個“源”，在src屬性的形式，像這樣：

< IMG src=“/ img_articles / 22532 /什么。JPG”alt=“不管”>

的srcset屬性允許你添加圖像的其他版本，設置屏幕寬度，這些圖像都出現，讓瀏覽器做的決定。這意味著用戶的設備只下載正確的圖像的屏幕尺寸。

你可以設置它一樣：

< IMG src=“/ img_articles / 22532 /什么小。JPG”srcset =“whatever-medium.jpg 1000W，whatever-large.jpg 2000W”alt=“不管”>利

你讓瀏覽器做數學。對屏幕的大小選擇合適的圖像可以是棘手的，如果你使用了很多圖片，你可能不想打擾。

你節省帶寬。這意味著較低的托管費用，為你，和低成本的移動用戶數據。

部分瀏覽器支持。事實上，這是第二最支持的選項列表。

缺點

只有部分瀏覽器支持。使它在老的瀏覽器（包括手機瀏覽器），你需要使用一些JavaScript叫做polyfill。

這是兩polyfills srcset polyfill，和picturefill。順便說一句，picturefill還為<圖片>元瀏覽器的支持，這是下一個。

最后，使用srcset屬性在一個單一的< IMG >標簽可能是人們會用最未來的選擇。這是有道理的，當我們中的大多數人會簡單地使用幾個不同大小的版本相同的圖像，為了節省帶寬。