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

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

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

響應(yīng)的圖像

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

讓我們從你選擇的第一個，也是最簡單的開始:

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

例子:
img {

max-width:100%;

}

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

注意:接下來的兩個解決方案包含在HTML5規(guī)范中。隨著時間的推移，它們將成為“官方”的解決方案，因?yàn)樵絹碓蕉嗟臑g覽器開始支持它們。

srcset
通常，當(dāng)您將一個圖像嵌入到頁面中時，您只定義了一個“源”，即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)算。為正確的屏幕尺寸選擇正確的圖像可能會很麻煩，如果你使用了大量的圖像，你可能不想麻煩。
你節(jié)省帶寬。這意味著降低主機(jī)托管成本，降低移動用戶的數(shù)據(jù)成本。
部分瀏覽器支持。事實(shí)上，這是列表中第二受支持的選項(xiàng)。
缺點(diǎn)
它只是部分瀏覽器支持。要使它在舊的瀏覽器(包括一些移動瀏覽器)中工作，您需要使用一些稱為polyfill的JavaScript。

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

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

響應(yīng)的圖像

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

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

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