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

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

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

1.1 固定尺寸圖像

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

在dom里圖像與在css里的圖像寫法如下面的例子

<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 不固定尺寸圖像

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

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

w描述符告訴瀏覽器列表中的每個(gè)圖象的質(zhì)量。sizes屬性是一個(gè)包含兩個(gè)值的，由逗號(hào)分隔的列表。根據(jù)最新規(guī)范，如果srcset中任何圖像使用了w描述符，那么必須要設(shè)置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標(biāo)簽的信息

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

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

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

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

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

騰訊專業(yè)干貨！Web圖像的常見應(yīng)用策略與技巧

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

再看一下6p（414），很聽話的按照我們的設(shè)置，顯示了90vw。因?yàn)樗膁pr更高，瀏覽器聰明的選擇了1200質(zhì)量的圖像。

騰訊專業(yè)干貨！Web圖像的常見應(yīng)用策略與技巧

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

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

騰訊專業(yè)干貨！Web圖像的常見應(yīng)用策略與技巧

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

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

1.2.2.picture元素，可精確把控

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

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

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

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

data-src
data-srcset

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

src
srcset