原文鏈接：https://isux.tencent.com/web-image-application.html
本文介紹一些關于響應式圖像的適配應用策略，回退原理，SVG的換色技巧，雪碧圖的百分比定位計算公式等相關的一些小知識點，目的在于幫助一部分同學快速的理清圖像應用思路，以及一些web圖像的應用技巧。
1.響應式圖像的應用與回退
特點：應用簡單，上手容易，性能表現(xiàn)良好
難點：lazyload實現(xiàn)
根據(jù)不同設備，不同分辨率，不同像素比使用的響應式圖像，常用的有兩種場景：
1.1固定尺寸圖像
基于設備像素比選擇，很多網(wǎng)站logo就是固定寬度圖像的一個例子，不管viewport的寬度如何，始終保持相同的寬度。
在dom里圖像與在css里的圖像寫法如下面的例子
background-image:image-set(url(test.jpg)1x,url(test2.jpg)2x);
1.2不固定尺寸圖像
與內容相關的圖片，在需要響應式的時候，它們的大小往往并不是不變的，會隨viewport改變，對于這類圖像，也有兩種常用的處理方式
1.2.1?我們使用srcset搭配w描述符以及sizes屬性 。
w描述符告訴瀏覽器列表中的每個圖象的質量。sizes屬性是一個包含兩個值的，由逗號分隔的列表。根據(jù)最新規(guī)范，如果srcset中任何圖像使用了w描述符，那么必須要設置sizes屬性。
sizes屬性有兩個值：第一個是媒體條件；第二個是源圖尺寸值，在特定媒體條件下，此值決定了圖片的寬度。
比如：
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"alt="">
我們來逐條讀這一個img標簽的信息
srcset，我們給瀏覽器準備了四個質量的圖像，分別為360 768 1200 1920
sizes，我們來告訴瀏覽器，在不同的環(huán)境下圖像的寬度
當視口不大于360的時候，圖像顯示寬度為100vw，當視口不大于768的時候，圖像顯示寬度為90vw，以此類推。
最后一個src作為默認圖像url引入，并且是天然的回退方案，當瀏覽器不認識以上屬性的時候，直接讀取src渲染。
這樣說不夠直觀，我們看個demo
在iphone4（320）下，圖像寬度和我們設置的100vw一致，但是為什么瀏覽器選擇了768的圖像而沒有選擇360的?因為4的dpr是2呀^_^，瀏覽器很智能的選擇了質量最合適的768.
再看一下6p（414），很聽話的按照我們的設置，顯示了90vw。因為他的dpr更高，瀏覽器聰明的選擇了1200質量的圖像。
這里我們可以欺騙一下瀏覽器：
360.jpg1200w,
1200.jpg9999w
我們把360的圖像，騙瀏覽器說這是1200的，然后把原本1200的扔天上去
瀏覽器果然上當了，他把360的圖當成1200的來用了。這里可能有些疑問，圖像的寬度為什么不是90vw了哪？因為瀏覽器被騙了但是自己卻不知道，他依然按照1200的圖像，去適配dpr。414*90%*（360/1200）約等于111.7。這種方式很智能，瀏覽器去根據(jù)你的sizes，從w列表里選擇最適合的圖像來調用顯示。正因為他太智能了，在實際操作中可控性較差，有些我們想精確控制的圖像顯示，有時候并不能如意。而且在做lazyload的時候要處理的東西也比較復雜。
這個時候可以考慮另外一種方式。
1.2.2.picture元素，可精確把控
picture元素就像是圖像和其源的容器。瀏覽器仍然需要img元素，用來表明需要加載圖片，如果沒有img，那么什么都不會渲染。source為瀏覽器提供了要顯示圖像的供選版本。
適用場景為：在一個精確特定的轉效點（breakpoint）需要顯示一個特定的圖像時。使用picture元素選擇圖像，不會有歧義，理解起來也更直觀。
在本例中，當viewport大于960像素時，會加載圖像960的圖像。當viewport寬度大于768像素時，瀏覽器會加載768的。而當寬度小于768像素時，加載默認圖像360。
而且這個寫法的懶加載非常好處理，只需要在傳統(tǒng)的lazyload策略上稍加改進
data-src
data-srcset
在加載到的時候更換為
src
srcset
就輕松解決了。
http://snghr.tencent.com里面使用較多
他也不需要去特意做回退處理，當瀏覽器不支持的時候就直接讀取img標簽。對于懶加載的回退......我選擇判斷IE 7-8...直接塞url給他.....。
2.特殊格式的圖像應用與回退
特點：體積優(yōu)化效果顯著
難點：兼容性掌控
上面picture元素還可以提供基于圖片格式選擇。
有一些圖像格式在較小的文件大小情況下保證了較好的圖片質量。聽起來還不錯，但殘酷的事實是沒有一個新格式被所有瀏覽器支持。谷歌的WebP表現(xiàn)不錯，但只有Chrome和Opera原聲支持。JPEG-XR，最初被稱為高清照片，是微軟發(fā)布的一個專有圖像格式，僅Internet Explorer支持
source的type屬性用來指定每個圖像的MIME類型，瀏覽器會選擇第一個含有其支持的MIME類型的源。源的順序是至關重要的，如果瀏覽器無法識別所有的圖象類型，它會回退至原來的img元素。
但是目前這些格式的支持多數(shù)不會直接這么做，因為代碼會有些冗余難看，有判斷瀏覽器ua輸出不同dom或者樣式的，也有服務端直接輸出的。服務端直接輸出，或者CDN做特殊處理，進行無感知格式切換，同時預留url和拒絕的接口，處理起來更靈活，省時省力，例如我們的：
服務端根據(jù)瀏覽器的請求頭，返回不同的圖像格式，對于X5內核還可以支持sharpP。
3.SVG應用
難點：變色方案，響應式定位計算
上面這個source的type屬性還支持另一種我們更常用的圖像格式，SVG。
說起SVG，這是個出現(xiàn)頻率比webp更高的圖像格式了，他有著比iconfont更多的優(yōu)點，所以現(xiàn)在web上正在大量的應用。
優(yōu)點：
1.SVG提供的功能集涵蓋了嵌套轉換、裁剪路徑、Alpha通道、濾鏡效果等能力，它還具備了傳統(tǒng)圖片沒有的矢量功能，可適配任何高清屏。
2.可讀性好，有利于SEO與無障礙
與iconfont對比
1.渲染方式不同
關于渲染方式，之前歐文同學的文章已經(jīng)講述的很清楚，這里不多做敘述（https://isux.tencent.com/svg-icon-part-one.html），無論黑白渲染，灰度渲染，次像素渲染，還是DirectWrite或GDI渲染，既然iconfont他是一個字體，就難逃出現(xiàn)鋸齒的命運，特別是在一倍屏幕下的渲染。
2.icon font只能支持單色
icon font做為字體無法支持多色圖形，這就對設計造成了許多限制，因此這也成為了icon font的一個瓶頸。
3.icon font可讀性不好
icon font主要在頁面用Unicode符號調用對應的圖標，這種方式不管是瀏覽器，搜索引擎和對無障礙方面的能力都沒有SVG好
在對比完之前，可能有同學就會問，SVG和iconfont對比有個致命的缺點，就是換色.
比如hover換色，iconfont只要寫個顏色就好了，SVG是不是需要做兩個顏色的圖？這也是SVG圖像應用我們解決的一個難點之一
SVG換色，最初我試過三個方案
一是mask-image屬性，他的優(yōu)點是簡單粗暴，直接用css來mask這個svg圖形來進行換色，缺點很明顯就是兼容性了，除去兼容性，還是很好用的。
demo：
background:#ff6600;
-webkit-mask:centerno-repeat;
-webkit-mask-image:url(qq-logo.svg);
二是通過SVG濾鏡來實現(xiàn)，優(yōu)點是效果更好，缺點除了兼容性，還需要額外的腳本配合。關于濾鏡換色的詳細說明在我上一篇文章里有詳細介紹以及demo
三是我們最終選擇的底層無感知換色的方案，把修改顏色的腳本集成到了我們的工作流里，我們在寫css的時候，遇到svg需要換色的地方，只需要
background-image:url(test.svg?fill=#ffffff)
加一句換色參數(shù)，工作流在底層會自動生成你所需要的svg圖片并合并到雪碧圖里。
SVG應用的另一個難點，就是作為背景圖響應式渲染，雪碧圖的background-position和background-size 的計算，這個其實也是其他圖像都會存在的一個難點。
我的導師 wenju 之前發(fā)過這個計算公式相關的文章：
百分比值（）是背景圖相對于背景定位區(qū)（background positioning area）的百分比，可以控制在容器元素內僅顯示Sprites圖的部分內容。比如下圖中，Sprites圖是由四張圖像拼成的，要想在容器內僅顯示第一張圖像，background-size的值應該多少呢？
我們僅需要Sprites圖的1/4顯示在容器內，那么Sprites圖與容器的比例應該是4:1，計算公式為： background-size : ( Sprites width / image width) (Sprites height / image height)
如何計算background-position
我們已知的信息如下：
容器元素的尺寸：elW * elH
單張圖片的尺寸：imgW * imgH
Sprites圖片的尺寸：spritesW * spritesH
單張圖片在Sprites圖上的位置：imgPosX, imgPosY
我們假設：
點的位置為 (x, y)
容器上的(x, y)點與容器左上角的距離為 cX, cY
Sprites圖上的(x, y)點與本張圖片左上角的距離為 sX, sY
如果要把某張圖片完全顯示在容器元素內，我們可以推導出：
elW = imgW, elH = imgH
cX = sX, cY = sY
根據(jù)上面的信息，我就可以計算出具體的(x, y)值了，下面以 x% 為例：
cX = elW * x
sX = spritesW * x - imgPosX
elW * x = spritesW * x - imgPosX
解方程后就得到計算公式了：
x = imgPosX / (spritesW - elW) = imgPosX / (spritesW - imgW)
y = imgPosY / (spritesH - elH) = imgPosY / (spritesH - imgH)
如果你每次都手動計算的話會被累死吧？所以這一步我們還是集成到了工作流里，在所有合并雪碧圖的地方用這個公式自動計算出位置。
而關于SVG的回退方案，已經(jīng)是老生常談
比如
svg標簽方式，缺點必須指定寬高，沒有圖片的保持款高比例特性，優(yōu)點兼容性好,兼容所有主流瀏覽器
或者
在支持的瀏覽器里使用SVG，在不支持的瀏覽器里顯示PNG，優(yōu)點是type靈活，可用于SVG,WEBP等，而且保持了img標簽的特性，方便做布局操作。缺點兼容性要求高，ios9+，安卓5+，微軟Edge+
當然這個兼容性說的是source type的兼容，并不是SVG本身的兼容。
對于css里的SVG 的應用與回退策略，比較簡單，也已經(jīng)成熟，一般情況下都是這種用法
background-image:url(fallback.png);
background-image:url(image.svg),none;
利用的技術是CSS3多背景，瀏覽器只要支持了多背景，幾乎無一例外支持SVG
再或者
background-image:url(fallback.png);
background-image:image-set("test.png"1x,"test-2x.png"2x,
"test-print.png"600dpi);
通過image-set來篩選和回退。
