我們必須改變我們的方法對(duì)圖像。為什么？因?yàn)榛ヂ?lián)網(wǎng)已經(jīng)改變了。人們不只是瀏覽，在家里，更多的，他們做的所有的地方，在幾乎每一種尺寸的屏幕。事實(shí)上，有人在只連接到互聯(lián)網(wǎng)世界的組成部分是通過智能手機(jī)。

不介意你的iPhone。我們說的廉價(jià)手機(jī)。更重要的是，他們中的許多人正在做它用有限的數(shù)據(jù)計(jì)劃。

這意味著我們要設(shè)計(jì)我們的網(wǎng)站，考慮到這一點(diǎn)，這意味著移動(dòng)互聯(lián)網(wǎng)的圖像優(yōu)化。光柵圖像，如JPEG文件。，不適合快速響應(yīng)的設(shè)計(jì)。他們的測(cè)量設(shè)計(jì)是固定的，和大的可以吃掉帶寬。

響應(yīng)圖像

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

讓我們開始第一個(gè)，最簡(jiǎn)單的，你的選擇：

最大寬度：100%；

簡(jiǎn)單的說，你那點(diǎn)CSS設(shè)置適用于所有圖像。一旦到位，這將確保你的所有圖片呆在它們的父元素。這樣，當(dāng)人們認(rèn)為你的網(wǎng)站在小屏幕上，圖像是保證縮小它。

例：

IMG {

最大寬度：100%；

}

利

很簡(jiǎn)單，和它的作品完美，只要你不設(shè)置任何特定像素的圖像高度。

你根本不需要改變你的HTML。正規(guī)的< IMG >標(biāo)簽來完成工作。

通用瀏覽器支持。

缺點(diǎn)

視網(wǎng)膜屏幕：除非你讓所有的圖像的兩倍的實(shí)際像素尺寸要大，他們會(huì)對(duì)某些機(jī)器，像Mac的外觀時(shí)髦，現(xiàn)在一些Android設(shè)備。怪蘋果。我做的。

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

這個(gè)簡(jiǎn)單的技術(shù)有它的位置，但它不會(huì)為每一種情況是正確的。如果你的網(wǎng)站將提供大量圖像，用戶在移動(dòng)設(shè)備上，你可能想實(shí)現(xiàn)下面的一個(gè)解決方案。

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

srcset

通常，當(dāng)你嵌入一個(gè)圖像到一個(gè)頁(yè)面，你只定義一個(gè)“源”，在src屬性的形式，像這樣：

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

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

你可以設(shè)置它一樣：

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

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

你節(jié)省帶寬。這意味著較低的托管費(fèi)用，為你，和低成本的移動(dòng)用戶數(shù)據(jù)。

部分瀏覽器支持。事實(shí)上，這是第二最支持的選項(xiàng)列表。

缺點(diǎn)

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

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

最后，使用srcset屬性在一個(gè)單一的< IMG >標(biāo)簽可能是人們會(huì)用最未來的選擇。這是有道理的，當(dāng)我們中的大多數(shù)人會(huì)簡(jiǎn)單地使用幾個(gè)不同大小的版本相同的圖像，為了節(jié)省帶寬。