Web圖像的常見(jiàn)應(yīng)用策略與技巧

本文介紹一些關(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里的圖像寫(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 不固定尺寸圖像

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

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，以此類(lèi)推。

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

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

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

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

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

360.jpg 1200w,

1200.jpg 9999w

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

瀏覽器果然上當(dāng)了，他把360的圖當(dāng)成1200的來(lái)用了。這里可能有些疑問(wèn)，圖像的寬度為什么不是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)表明需要加載圖片，如果沒(mé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è)寫(xiě)法的懶加載非常好處理，只需要在傳統(tǒng)的lazyload策略上稍加改進(jìn)

data-src

data-srcset

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

src

srcset

就輕松解決了。

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ì)量。聽(tīng)起來(lái)還不錯(cuò)，但殘酷的事實(shí)是沒(méi)有一個(gè)新格式被所有瀏覽器支持。谷歌的WebP表現(xiàn)不錯(cuò)，但只有Chrome和Opera原聲支持。JPEG-XR，最初被稱為高清照片，是微軟發(fā)布的一個(gè)專有圖像格式，僅Internet Explorer支持

<picture>

服務(wù)端根據(jù)瀏覽器的請(qǐng)求頭，返回不同的圖像格式，對(duì)于X5內(nèi)核還可以支持sharpP。

3. SVG應(yīng)用

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

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

說(shuō)起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)圖片沒(méi)有的矢量功能，可適配任何高清屏。

2. 可讀性好，有利于SEO與無(wú)障礙

與iconfont對(duì)比

1. 渲染方式不同

關(guān)于渲染方式，這里不多做敘述，

2. icon font只能支持單色

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

3. icon font可讀性不好

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

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

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

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

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

demo：

background: #ff6600;

-webkit-mask:center no-repeat;

-webkit-mask-image: url(qq-logo.svg);

查看demo

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

三是我們最終選擇的底層無(wú)感知換色的方案，把修改顏色的腳本集成到了我們的工作流里，我們?cè)趯?xiě)css的時(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ā)過(guò)這個(gè)計(jì)算公式相關(guān)的文章：

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

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

如何計(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ì)算出位置。

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

比如

<svg width="200" height="200">

<image xlink: src="svg.png" width="200" height="200" />

</svg>

svg標(biāo)簽方式，缺點(diǎn)必須指定寬高，沒(méi)有圖片的保持款高比例特性，優(yōu)點(diǎn)兼容性好,兼容所有主流瀏覽器

或者

<picture>

<source type="image/svg+xml" srcset="svg.svg">

<img src="svg.png" >

</picture>

在支持的瀏覽器里使用SVG，在不支持的瀏覽器里顯示PNG，優(yōu)點(diǎn)是type靈活，可用于SVG,WEBP等，而且保持了img標(biāo)簽的特性，方便做布局操作。缺點(diǎn)兼容性要求高，ios9+，安卓5+，微軟Edge+

當(dāng)然這個(gè)兼容性說(shuō)的是source type的兼容，并不是SVG本身的兼容。

對(duì)于css里的SVG 的應(yīng)用與回退策略，比較簡(jiǎn)單，也已經(jīng)成熟，一般情況下都是這種用法

background-image: url(fallback.png);

background-image: url(image.svg), none;

利用的技術(shù)是CSS3多背景，瀏覽器只要支持了多背景，幾乎無(wú)一例外支持SVG

再或者

background-image: url(fallback.png);

background-image: image-set( "test.png" 1x, "test-2x.png" 2x,

"test-print.png" 600dpi );

通過(guò)image-set來(lái)篩選和回退。

無(wú)論黑白渲染，灰度渲染，次像素渲染，還是DirectWrite 或 GDI 渲染，既然iconfont他是一個(gè)字體，就難逃出現(xiàn)鋸齒的命運(yùn)，特別是在一倍屏幕下的渲染。

<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" >

</picture>

source的type屬性用來(lái)指定每個(gè)圖像的MIME類(lèi)型，瀏覽器會(huì)選擇第一個(gè)含有其支持的MIME類(lèi)型的源。源的順序是至關(guān)重要的，如果瀏覽器無(wú)法識(shí)別所有的圖象類(lèi)型，它會(huì)回退至原來(lái)的img元素。

但是目前這些格式的支持多數(shù)不會(huì)直接這么做，因?yàn)榇a會(huì)有些冗余難看，有判斷瀏覽器ua輸出不同dom或者樣式的，也有服務(wù)端直接輸出的。服務(wù)端直接輸出，或者CDN做特殊處理，進(jìn)行無(wú)感知格式切換，同時(shí)預(yù)留url和拒絕的接口，處理起來(lái)更靈活，省時(shí)省力，例如我們的：

當(dāng)前文章：Web圖像的常見(jiàn)應(yīng)用策略與技巧
地址分享：http://www.muchs.cn/news12/169462.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、品牌網(wǎng)站制作、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)