網(wǎng)站建設的圖片常見(jiàn)應用策略與技巧發(fā)布者：本站     時(shí)間：2021-02-24 09:02:12

1. 響應式圖像的應用與回退
特點(diǎn)：應用簡(jiǎn)單，上手容易，性能表現良好
難點(diǎn)：lazyload實(shí)現

根據不同設備，不同分辨率，不同像素比使用的響應式圖像，常用的有兩種場(chǎng)景：

1.1 固定尺寸圖像

基于設備像素比選擇，很多網(wǎng)站logo就是固定寬度圖像的一個(gè)例子，不管viewport的寬度如何，始終保持相同的寬度。

在dom里圖像與在css里的圖像寫(xiě)法如下面的例子

<img srcset="test.jpg 1.5x, test2.jpg 2x" src="test.jpg" />

background-image: image-set(url(test.jpg) 1x,url(test2.jpg) 2x);
1.2 不固定尺寸圖像

與內容相關(guān)的圖片，在需要響應式的時(shí)候，它們的大小往往并不是不變的，會(huì )隨viewport改變，對于這類(lèi)圖像，也有兩種常用的處理方式

1.2.1 我們使用srcset搭配w描述符以及sizes屬性 。

w描述符告訴瀏覽器列表中的每個(gè)圖象的質(zhì)量。sizes屬性是一個(gè)包含兩個(gè)值的，由逗號分隔的列表。根據最新規范，如果srcset中任何圖像使用了w描述符，那么必須要設置sizes屬性。

sizes屬性有兩個(gè)值：第一個(gè)是媒體條件；第二個(gè)是源圖尺寸值，在特定媒體條件下，此值決定了圖片的寬度。

比如：

<img srcset="360.jpg 360w,
 768.jpg 768w,
 1200.jpg 1200w,
 1920.jpg 1920w"
 sizes="
 (max-width: 360px) 100vw,
 (max-width: 768px) 90vw,
 (max-width: 1980px) 80vw,
 768px"
 src="360.jpg" >
我們來(lái)逐條讀這一個(gè)img標簽的信息

srcset，我們給瀏覽器準備了四個(gè)質(zhì)量的圖像，分別為360 768 1200 1920

sizes，我們來(lái)告訴瀏覽器，在不同的環(huán)境下圖像的寬度

當視口不大于360的時(shí)候，圖像顯示寬度為100vw，當視口不大于768的時(shí)候，圖像顯示寬度為90vw，以此類(lèi)推。

最后一個(gè)src作為默認圖像url引入，并且是天然的回退方案，當瀏覽器不認識以上屬性的時(shí)候，直接讀取src渲染。

這樣說(shuō)不夠直觀(guān)，我們看個(gè)demo

騰訊專(zhuān)業(yè)干貨！Web圖像的常見(jiàn)應用策略與技巧

在iphone4（320）下，圖像寬度和我們設置的100vw一致，但是為什么瀏覽器選擇了768的圖像而沒(méi)有選擇360的?因為4的dpr是2呀^_^，瀏覽器很智能的選擇了質(zhì)量最合適的768.

再看一下6p（414），很聽(tīng)話(huà)的按照我們的設置，顯示了90vw。因為他的dpr更高，瀏覽器聰明的選擇了1200質(zhì)量的圖像。

騰訊專(zhuān)業(yè)干貨！Web圖像的常見(jiàn)應用策略與技巧

這里我們可以欺騙一下瀏覽器：

360.jpg 1200w,
1200.jpg 9999w
我們把360的圖像，騙瀏覽器說(shuō)這是1200的，然后把原本1200的扔天上去

騰訊專(zhuān)業(yè)干貨！Web圖像的常見(jiàn)應用策略與技巧

瀏覽器果然上當了，他把360的圖當成1200的來(lái)用了。這里可能有些疑問(wèn)，圖像的寬度為什么不是90vw了哪？因為瀏覽器被騙了但是自己卻不知道，他依然按照1200的圖像，去適配dpr。414*90%*（360/1200）約等于111.7。這種方式很智能，瀏覽器去根據你的sizes，從w列表里選擇最適合的圖像來(lái)調用顯示。正因為他太智能了，在實(shí)際操作中可控性較差，有些我們想精確控制的圖像顯示，有時(shí)候并不能如意。而且在做lazyload的時(shí)候要處理的東西也比較復雜。

這個(gè)時(shí)候可以考慮另外一種方式。

1.2.2.picture元素，可精確把控

picture元素就像是圖像和其源的容器。瀏覽器仍然需要img元素，用來(lái)表明需要加載圖片，如果沒(méi)有img，那么什么都不會(huì )渲染。source為瀏覽器提供了要顯示圖像的供選版本。

適用場(chǎng)景為：在一個(gè)精確特定的轉效點(diǎn)（breakpoint）需要顯示一個(gè)特定的圖像時(shí)。使用picture元素選擇圖像，不會(huì )有歧義，理解起來(lái)也更直觀(guān)。

<picture>
 <source media="(min-width: 960px)" srcset=960.jpg">
 <source media="(min-width: 768px)" srcset="768.jpg">
 <img src="360.jpg" >
</picture>
在本例中，當viewport大于960像素時(shí)，會(huì )加載圖像960的圖像。當viewport寬度大于768像素時(shí)，瀏覽器會(huì )加載768的。而當寬度小于768像素時(shí)，加載默認圖像360。

而且這個(gè)寫(xiě)法的懶加載非常好處理，只需要在傳統的lazyload策略上稍加改進(jìn)

data-src
data-srcset

在加載到的時(shí)候更換為

src
srcset