詳解Web圖像的常見應(yīng)用策略與技巧發(fā)布者：本站     時(shí)間：2021-12-29 09:12:03

本文介紹一些關(guān)于響應(yīng)式圖像的適配應(yīng)用策略，回退原理，SVG的換色技巧，雪碧圖的百分比定位計(jì)算公式等相關(guān)的一些小知識(shí)點(diǎn)，目的在于幫助一部分同學(xué)快速的理清圖像應(yīng)用思路，以及一些web圖像的應(yīng)用技巧。

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" 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"  src="http://www.missyuan.net/uploads/allimg/170502/1409454491-0.png" "393""293" />
在iphone4（320）下，圖像寬度和我們?cè)O(shè)置的100vw一致，但是為什么瀏覽器選擇了768的圖像而沒有選擇360的?因?yàn)?的dpr是2呀^_^，瀏覽器很智能的選擇了質(zhì)量最合適的768.

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

詳解Web圖像的常見應(yīng)用策略與技巧,PS教程,

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

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

詳解Web圖像的常見應(yīng)用策略與技巧,PS教程,

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

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

1.2.2.picture元素，可精確把控

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

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

<picture> <source media="(min-width: 960px)" srcset=960.jpg"> <source media="(min-width: 768px)" srcset="768.jpg"> <img src="360.jpg" target="_blank">http://snghr.tencent.com  里面使用較多
也不需要去特意做回退處理，當(dāng)瀏覽器不支持的時(shí)候就直接讀取img標(biāo)簽。對(duì)于懶加載的回退,我選擇判斷IE 7-8直接url給他。

2. 特殊格式的圖像應(yīng)用與回退
特點(diǎn)：體積優(yōu)化效果顯著
難點(diǎn)：兼容性掌控

上面picture元素還可以提供 基于圖片格式選擇。

有一些圖像格式在較小的文件大小情況下保證了較好的圖片質(zhì)量。聽起來還不錯(cuò)，但殘酷的事實(shí)是沒有一個(gè)新格式被所有瀏覽器支持。谷歌的WebP表現(xiàn)不錯(cuò)，但只有Chrome和Opera原聲支持。JPEG-XR，最初被稱為高清照片，是微軟發(fā)布的一個(gè)專有圖像格式，僅Internet Explorer支持

<picture> <source type="image/vnd.ms-photo" src="test.jxr"> <source type="image/jp2" src="test.jp2"> <source type="image/webp" src="test.webp"> <img src="test.png"  src="http://www.missyuan.net/uploads/allimg/170502/14094523b-3.png" "292""66" />詳解Web圖像的常見應(yīng)用策略與技巧,PS教程,
服務(wù)端根據(jù)瀏覽器的請(qǐng)求頭，返回不同的圖像格式，對(duì)于X5內(nèi)核還可以支持sharpP。

3. SVG應(yīng)用
難點(diǎn)：變色方案，響應(yīng)式定位計(jì)算

上面這個(gè)source的type屬性還支持另一種我們更常用的圖像格式，SVG。

說起SVG，這是個(gè)出現(xiàn)頻率比webp更高的圖像格式了，他有著比iconfont更多的優(yōu)點(diǎn)，所以現(xiàn)在web上正在大量的應(yīng)用。

優(yōu)點(diǎn)：

1. SVG提供的功能集涵蓋了嵌套轉(zhuǎn)換、裁剪路徑、Alpha通道、濾鏡效果等能力，它還具備了傳統(tǒng)圖片沒有的矢量功能，可適配任何高清屏。

2. 可讀性好，有利于SEO與無障礙

與iconfont對(duì)比

1. 渲染方式不同

關(guān)于渲染方式，之前歐文同學(xué)的文章已經(jīng)講述的很清楚，這里不多做敘述（https://isux.tencent.com/svg-icon-part-one.html），無論黑白渲染，灰度渲染，次像素渲染，還是DirectWrite 或 GDI 渲染，既然iconfont他是一個(gè)字體，就難逃出現(xiàn)鋸齒的命運(yùn)，特別是在一倍屏幕下的渲染。

詳解Web圖像的常見應(yīng)用策略與技巧,PS教程,

2. icon font只能支持單色

icon font做為字體無法支持多色圖形，這就對(duì)設(shè)計(jì)造成了許多限制，因此這也成為了icon font的一個(gè)瓶頸。

3. icon font可讀性不好

icon font主要在頁面用Unicode符號(hào)調(diào)用對(duì)應(yīng)的圖標(biāo)，這種方式不管是瀏覽器，搜索引擎和對(duì)無障礙方面的能力都沒有SVG好

在對(duì)比完之前，可能有同學(xué)就會(huì)問，SVG和iconfont對(duì)比有個(gè)致命的缺點(diǎn)，就是換色.

比如hover換色，iconfont只要寫個(gè)顏色就好了，SVG是不是需要做兩個(gè)顏色的圖？這也是SVG圖像應(yīng)用我們解決的一個(gè)難點(diǎn)之一

SVG換色，最初我試過三個(gè)方案

一是mask-image屬性，他的優(yōu)點(diǎn)是簡(jiǎn)單粗暴，直接用css來mask這個(gè)svg圖形來進(jìn)行換色，缺點(diǎn)很明顯就是兼容性了，除去兼容性，還是很好用的。

demo：

background: #ff6600;-webkit-mask:center no-repeat;-webkit-mask-image: url(qq-logo.svg);
查看demo

二是通過SVG濾鏡來實(shí)現(xiàn)，優(yōu)點(diǎn)是效果更好，缺點(diǎn)除了兼容性，還需要額外的腳本配合。關(guān)于濾鏡換色的詳細(xì)說明在我上一篇文章里有詳細(xì)介紹以及demo：http://www.uisdc.com/svg-filter-in-browser

三是我們最終選擇的底層無感知換色的方案，把修改顏色的腳本集成到了我們的工作流里，我們?cè)趯慶ss的時(shí)候，遇到svg需要換色的地方，只需要

background-image: url(test.svg?fill=#ffffff)
加一句換色參數(shù)，工作流在底層會(huì)自動(dòng)生成你所需要的svg圖片并合并到雪碧圖里。

SVG應(yīng)用的另一個(gè)難點(diǎn)，就是作為背景圖響應(yīng)式渲染，雪碧圖的background-position和background-size 的計(jì)算，這個(gè)其實(shí)也是其他圖像都會(huì)存在的一個(gè)難點(diǎn)。

我的導(dǎo)師 wenju 之前發(fā)過這個(gè)計(jì)算公式相關(guān)的文章：

百分比值（）是背景圖相對(duì)于背景定位區(qū)（background positioning area）的百分比，可以控制在容器元素內(nèi)僅顯示Sprites圖的部分內(nèi)容。比如下圖中，Sprites圖是由四張圖像拼成的，要想在容器內(nèi)僅顯示第一張圖像，background-size的值應(yīng)該多少呢？

詳解Web圖像的常見應(yīng)用策略與技巧,PS教程,

我們僅需要Sprites圖的1/4顯示在容器內(nèi)，那么Sprites圖與容器的比例應(yīng)該是4:1，計(jì)算公式為： background-size : ( Sprites width / image width) (Sprites height / image height)

詳解Web圖像的常見應(yīng)用策略與技巧,PS教程,

如何計(jì)算background-position

我們已知的信息如下：

容器元素的尺寸：elW * elH
單張圖片的尺寸：imgW * imgH
Sprites圖片的尺寸：spritesW * spritesH
單張圖片在Sprites圖上的位置：imgPosX, imgPosY

我們假設(shè)：

點(diǎn)的位置為 (x, y)
容器上的(x, y)點(diǎn)與容器左上角的距離為 cX, cY
Sprites圖上的(x, y)點(diǎn)與本張圖片左上角的距離為 sX, sY

如果要把某張圖片完全顯示在容器元素內(nèi)，我們可以推導(dǎo)出：

elW = imgW, elH = imgH
cX = sX, cY = sY

根據(jù)上面的信息，我就可以計(jì)算出具體的(x, y)值了，下面以 x% 為例：

cX = elW * x
sX = spritesW * x – imgPosX
elW * x = spritesW * x – imgPosX

解方程后就得到計(jì)算公式了：

x = imgPosX / (spritesW – elW) = imgPosX / (spritesW – imgW)
y = imgPosY / (spritesH – elH) = imgPosY / (spritesH – imgH)

如果你每次都手動(dòng)計(jì)算的話會(huì)被累死吧？所以這一步我們還是集成到了工作流里，在所有合并雪碧圖的地方用這個(gè)公式自動(dòng)計(jì)算出位置。

詳解Web圖像的常見應(yīng)用策略與技巧,PS教程,

而關(guān)于SVG的回退方案，已經(jīng)是老生常談

比如

<svg "200""200"> <image xlink:href="svg.svg" src="svg.png" "200""200" /></svg>
svg標(biāo)簽方式，缺點(diǎn)必須指定寬高，沒有圖片的保持款高比例特性，優(yōu)點(diǎn)兼容性好,兼容所有主流瀏覽器