請(qǐng)注意，不是iPhone。我們說的是廉價(jià)電話。更重要的是，他們中的許多人都是用有限的數(shù)據(jù)計(jì)劃來實(shí)現(xiàn)這一目標(biāo)的。

這意味著我們必須設(shè)計(jì)我們的網(wǎng)站來考慮這一點(diǎn)，這意味著為移動(dòng)網(wǎng)絡(luò)優(yōu)化圖像。光柵圖像（如.jpeg文件）不適合響應(yīng)式設(shè)計(jì)。他們的測(cè)量被設(shè)計(jì)成固定的，大的可以占用帶寬。

如果你想為你和你的用戶降低成本，同時(shí)確保你的網(wǎng)站總是最好的，你就需要找到一種方法讓你的圖像響應(yīng)。好消息是人們正在努力解決這個(gè)問題。已經(jīng)有一些解決方案了。訣竅是知道哪一個(gè)最適合你。
讓我們從第一個(gè)也是最簡單的選項(xiàng)開始：
最大寬度：100%；
簡單地說，您設(shè)置了一點(diǎn)CSS來應(yīng)用于所有圖像。一旦到位，它將確保您的所有圖像保持在其父元素內(nèi)部。這樣，當(dāng)人們?cè)谳^小的屏幕上查看你的網(wǎng)站時(shí)，圖像一定會(huì)縮小。
例子：
最大寬度：100%；
贊成的意見
它很簡單，只要不設(shè)置任何像素特定的圖像高度，它就可以完美地工作。
你根本不需要改變你的HTML。常規(guī)的<img>標(biāo)記完成任務(wù)。
通用瀏覽器支持。
欺騙
視網(wǎng)膜屏幕：除非你把所有的圖像都做成實(shí)際像素尺寸的兩倍，否則在某些機(jī)器上，比如mac，以及現(xiàn)在的一些Android設(shè)備上，它們看起來會(huì)很時(shí)髦。怪蘋果。我愿意。
使用大量巨大的圖像（不管你是否在處理視網(wǎng)膜屏幕），可能會(huì)對(duì)移動(dòng)設(shè)備的性能造成影響。更糟糕的是，他們會(huì)吃掉有限數(shù)據(jù)計(jì)劃中的數(shù)據(jù)。如果你能幫忙的話，你不想對(duì)你的用戶這么做。
這種簡單的技術(shù)有它的位置，但它并不適合所有的情況。如果您的網(wǎng)站將為移動(dòng)設(shè)備上的用戶提供大量圖像，您可能需要實(shí)現(xiàn)以下建議的解決方案之一。
注意：下面兩個(gè)解決方案包含在HTML5規(guī)范中。隨著時(shí)間的推移，它們將成為“官方”解決方案，因?yàn)樵絹碓蕉嗟臑g覽器開始全面支持它們。
rcset公司
通常，在將圖像嵌入頁面時(shí)，只定義一個(gè)“源”，格式為src屬性，如下所示：
<img src=“/img\u文章/22532/隨便什么.jpg“alt=”隨便“>
srcset屬性允許您添加圖像的其他版本，設(shè)置這些圖像顯示的屏幕寬度，并讓瀏覽器做出決定。這意味著用戶的設(shè)備只下載適合其屏幕大小的圖像。
你可以這樣設(shè)置：
<img src=“/img\u文章/22532/-小.jpg“srcset=”隨便-中.jpg1000w，隨便吧-大.jpg2000w“alt=”隨便“>
贊成的意見
你讓瀏覽器來計(jì)算。為正確的屏幕大小選擇合適的圖像可能會(huì)很棘手，如果您使用了大量圖像，您可能不想麻煩。
你在節(jié)省帶寬。這意味著降低托管成本，降低移動(dòng)用戶的數(shù)據(jù)成本。
部分瀏覽器支持。實(shí)際上，這是列表中第二個(gè)受支持的選項(xiàng)。
欺騙
它只是部分瀏覽器支持。要使它在舊的瀏覽器（包括一些移動(dòng)瀏覽器）中工作，您需要使用一點(diǎn)稱為polyfill的JavaScript。
兩個(gè)這樣的polyfill是srcset polyfill和picturefill。順便說一句，picturefill還提供了對(duì)<picture>元素的瀏覽器支持，下一個(gè)就是這個(gè)元素。
最后，在單個(gè)<img>標(biāo)記上使用srcset屬性可能是將來人們最常使用的選項(xiàng)。當(dāng)我們大多數(shù)人為了節(jié)省帶寬而使用同一幅圖像的幾個(gè)不同大小的版本時(shí)，這才有意義。
反應(yīng)靈敏的圖像
<圖片>
srcset只是一個(gè)可以應(yīng)用于任何圖像的屬性，<picture>是一個(gè)完整的元素，有自己的標(biāo)簽和所有東西。不過，它的一般用途是一樣的。告訴瀏覽器一個(gè)圖像有幾個(gè)不同的版本，以及顯示它們的屏幕大小。
區(qū)別在于數(shù)學(xué)。如果只使用srcset，瀏覽器將根據(jù)正在查看站點(diǎn)的瀏覽器的屏幕或窗口大小進(jìn)行一些計(jì)算。您可以給出提示，但瀏覽器本身會(huì)發(fā)出調(diào)用。
使用<picture>，您可以完全控制。如果你說一個(gè)特定的圖像應(yīng)該以一定的屏幕寬度顯示，那么這就是將要顯示的內(nèi)容。這樣做的代價(jià)是更多的代碼。因此，通常建議在處理同一圖像的不同大小時(shí)使用srcset。<picture>將在您進(jìn)行藝術(shù)指導(dǎo)時(shí)使用，并且可能希望以特定的屏幕大小顯示完全不同的圖像。
代碼如下所示：
<圖片>
<source srcset=“隨便-較小.jpg“media=”（最大寬度：768px）“>
<source srcset=“隨便-默認(rèn).jpg">
<img srcset=“隨便-默認(rèn).jpg“alt=”隨便“>
</picture>
贊成的意見
同樣，你可以節(jié)省帶寬。這種好處是巨大的，值得重復(fù)。
可以更好地控制以特定屏幕大小顯示的圖像。
欺騙
更多代碼。當(dāng)你不需要的時(shí)候不要使用這個(gè)元素，你會(huì)有一個(gè)更輕松的時(shí)間處理事情。
目前很少有瀏覽器支持。為了能夠使用這個(gè)元素，您需要使用上面列出的polyfill。
自適應(yīng)圖像

本文地址：http://www.gknaturalcreations.com/wangzhansheji/25-400.html