我們需要改變我們對(duì)待圖像的方式。為什么?因?yàn)榛ヂ?lián)網(wǎng)已經(jīng)改變了。人們不僅僅是在家里瀏覽網(wǎng)頁(yè)，他們還會(huì)在幾乎所有可能的尺寸的屏幕上到處瀏覽。事實(shí)上，世界上有一些地方，人們只能通過(guò)智能手機(jī)上網(wǎng)。

不是iphone,提醒你。我們說(shuō)的廉價(jià)手機(jī)。更重要的是，他們中的許多人都在用有限的數(shù)據(jù)計(jì)劃來(lái)做這件事。

這意味著我們必須設(shè)計(jì)我們的網(wǎng)站來(lái)解釋這一點(diǎn)，這意味著為移動(dòng)網(wǎng)絡(luò)優(yōu)化圖像。像.jpeg文件這樣的光柵圖像不適合響應(yīng)式設(shè)計(jì)。他們的測(cè)量是固定的，大的可以消耗帶寬。

響應(yīng)的圖像

如果你想為你和你的用戶降低成本，同時(shí)確保你的網(wǎng)站看起來(lái)總是最好的，你需要找到一種方法來(lái)讓你的圖像響應(yīng)。好消息是人們正在研究這個(gè)問(wèn)題。已經(jīng)有一些解決方案了。訣竅是要知道哪種方法最適合你。

讓我們從你選擇的第一個(gè)，也是最簡(jiǎn)單的開(kāi)始:

max-width:100%;
簡(jiǎn)單地說(shuō)，你設(shè)置了一些CSS來(lái)應(yīng)用于所有的圖像。一旦到位，它將確保您的所有圖像都留在它們的父元素內(nèi)。這樣，當(dāng)人們?cè)谝粋€(gè)更小的屏幕上瀏覽你的網(wǎng)站時(shí)，圖像就會(huì)被保證縮小。

例子:
img {

max-width:100%;

}

優(yōu)點(diǎn)
它很簡(jiǎn)單，只要你不設(shè)置任何像素特定的圖像高度，它就能很好地工作。
你根本不需要改變你的HTML。常規(guī)的<img>標(biāo)記完成任務(wù)。
通用的瀏覽器支持。
缺點(diǎn)
視網(wǎng)膜屏幕:除非你讓所有的圖像都是你需要的像素尺寸的兩倍大，否則它們會(huì)在某些機(jī)器上看起來(lái)很時(shí)髦，比如mac電腦，現(xiàn)在還有一些安卓設(shè)備。指責(zé)蘋(píng)果。我做的事。
使用大量的圖片(無(wú)論你是否在處理視網(wǎng)膜屏幕)，在移動(dòng)設(shè)備上的表現(xiàn)都很困難。更糟糕的是，他們可以在有限的數(shù)據(jù)計(jì)劃上消耗數(shù)據(jù)。如果你能幫助你的用戶，你不希望這樣做。
這個(gè)簡(jiǎn)單的技術(shù)有它的位置，但是它不適合任何情況。如果您的網(wǎng)站將為移動(dòng)設(shè)備上的用戶提供大量圖片，您可能希望實(shí)現(xiàn)以下建議的解決方案之一。

注意:接下來(lái)的兩個(gè)解決方案包含在HTML5規(guī)范中。隨著時(shí)間的推移，它們將成為“官方”的解決方案，因?yàn)樵絹?lái)越多的瀏覽器開(kāi)始支持它們。

srcset
通常，當(dāng)您將一個(gè)圖像嵌入到頁(yè)面中時(shí)，您只定義了一個(gè)“源”，即src屬性的形式，例如:

< img src = " / img_articles / 22532 / whatever.jpg”alt = "不管" >
srcset屬性允許您添加圖像的其他版本，設(shè)置要顯示這些圖像的屏幕寬度，并讓瀏覽器作出決定。這意味著用戶的設(shè)備只能下載屏幕大小的正確圖像。

你可以這樣設(shè)置:

< img src="/img_articles/22532/ whateversmall.jpg " srcset=" .jpg 1000w, whateverlarge.jpg 2000w" alt=" > "。
優(yōu)點(diǎn)
你讓瀏覽器做數(shù)學(xué)運(yùn)算。為正確的屏幕尺寸選擇正確的圖像可能會(huì)很麻煩，如果你使用了大量的圖像，你可能不想麻煩。
你節(jié)省帶寬。這意味著降低主機(jī)托管成本，降低移動(dòng)用戶的數(shù)據(jù)成本。
部分瀏覽器支持。事實(shí)上，這是列表中第二受支持的選項(xiàng)。
缺點(diǎn)
它只是部分瀏覽器支持。要使它在舊的瀏覽器(包括一些移動(dòng)瀏覽器)中工作，您需要使用一些稱(chēng)為polyfill的JavaScript。

兩個(gè)這樣的填充填充是srcset-polyfill，和圖片填充。順便說(shuō)一下，圖片填充還為元素提供瀏覽器支持，該元素將在接下來(lái)的頁(yè)面中出現(xiàn)。</picture>

最后，在單個(gè)<img>標(biāo)簽上使用srcset屬性可能是人們將來(lái)最常用的選項(xiàng)。這是有道理的，因?yàn)槲覀兇蠖鄶?shù)人只是為了節(jié)省帶寬而使用幾個(gè)不同大小的相同圖像版本。

響應(yīng)的圖像

<圖片>
當(dāng)srcset只是一個(gè)可以應(yīng)用于任何圖像的屬性時(shí)，是一個(gè)成熟的元素，有它自己的標(biāo)記和所有東西。</picture>不過(guò)，它的一般用途是一樣的。告訴瀏覽器有幾個(gè)不同版本的圖像，以及顯示它們的屏幕大小。

不同之處在于數(shù)學(xué)。如果您只使用srcset，瀏覽器將根據(jù)瀏覽器的屏幕或窗口大小進(jìn)行一些計(jì)算。你可以給出提示，但瀏覽器本身會(huì)發(fā)出提示。

用<圖片>，你完全控制。如果你說(shuō)某個(gè)圖像應(yīng)該顯示在特定的屏幕寬度，那么這就是將要顯示的內(nèi)容。成本是更多的代碼。因此，一般建議在處理同一圖像的不同大小時(shí)使用srcset。<圖片>是在你做藝術(shù)指導(dǎo)時(shí)使用的。 本文來(lái)源：杰云網(wǎng)絡(luò)，轉(zhuǎn)載請(qǐng)注明出處！如果需要 營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、 微商城、 小程序商城、 多端小程序 請(qǐng)聯(lián)系我們！