久久亚洲中文字幕精_精品国产一区二区三区不卡_99久久久无码国产精品免费手机_国产亚洲精品久久久久动漫

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

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

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

1.1 固定尺寸圖像

基于設備像素比選擇，很多網(wǎng)站logo就是固定寬度圖像的一個例子，不管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)的圖片，在需要響應式的時候，它們的大小往往并不是不變的，會隨viewport改變，對于這類圖像，也有兩種常用的處理方式

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

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

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

比如：

<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" >
我們來逐條讀這一個img標簽的信息

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

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

當視口不大于360的時候，圖像顯示寬度為100vw，當視口不大于768的時候，圖像顯示寬度為90vw，以此類推。

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

這樣說不夠直觀，我們看個demo

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

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

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

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

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

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

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

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

這個時候可以考慮另外一種方式。

1.2.2.picture元素，可精確把控

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

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

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

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

data-src
data-srcset

在加載到的時候更換為

src
srcset