web圖像的常見應用策略與技巧 響應式圖像,SVG的換色技巧,雪碧圖的百分比定位

練小習

本文介紹一些關於響應式圖像的適配應用策略,回退原理,SVG的換色技巧,雪碧圖的百分比定位計算公式等相關的一些小知識點,目的在於幫助一部分同學快速的理清圖像應用思路,以及一些web圖像的應用技巧。

1.響應式圖像的應用與回退

特點:應用簡單,上手容易,性能表現良好
難點:lazyload實現

根據不同設備,不同分辨率,不同像素比使用的響應式圖像,常用的有兩種場景:

1.1固定尺寸圖像

基於設備像素比選擇,很多網站logo就是固定寬度圖像的一個例子,不管viewport的寬度如何,始終保持相同的寬度。

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

<img srcset="test.jpg 1.5x, test2.jpg 2x" src="test.jpg" alt="" />
background-image: image-set(url(test.jpg) 1x,url(test2.jpg) 2x);

1.2不固定尺寸圖像

與內容相關的圖片,在需要響應式的時候,它們的大小往往並不是不變的,會隨viewport改變,對於這類圖像,也有兩種常用的處理方式

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

w描述符告訴瀏覽器列表中的每個圖象的質量。sizes屬性是一個包含兩個值的,由逗號分隔的列表。根據最新規範,如果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" alt="">

我們來逐條讀這一個img標籤的信息

srcset,我們給瀏覽器準備了四個質量的圖像,分別為360 768 1200 1920
sizes,我們來告訴瀏覽器,在不同的環境下圖像的寬度
當視口不大於360的時候,圖像顯示寬度為100vw,當視口不大於768的時候,圖像顯示寬度為90vw,以此類推。
最後一個src作為默認圖像url引入,並且是天然的回退方案,當瀏覽器不認識以上屬性的時候,直接讀取src渲染。

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

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

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

這裡我們可以欺騙一下瀏覽器:

360.jpg 1200w,
1200.jpg 9999w

我們把360的圖像,騙瀏覽器說這是1200的,然後把原本1200的扔天上去

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

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

1.2.2.picture元素,可精確把控

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

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

<picture>
  <source media="(min-width: 960px)" srcset=960.jpg">
  <source media="(min-width: 768px)" srcset="768.jpg">
  <img src="360.jpg" alt="">
</picture>

在本例中,當viewport大於960像素時,會加載圖像960的圖像。當viewport寬度大於768像素時,瀏覽器會加載768的。而當寬度小於768像素時,加載默認圖像360。

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

data-src
data-srcset
在加載到的時候更換為
src
srcset

就輕鬆解決了。

http://snghr.tencent.com  裡面使用較多

他也不需要去特意做回退處理,當瀏覽器不支持的時候就直接讀取img標籤。對於懶加載的回退......我選擇判斷IE 7-8...直接塞url給他.....。

2.特殊格式的圖像應用與回退

特點:體積優化效果顯著
難點:兼容性掌控

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

有一些圖像格式在較小的文件大小情況下保證了較好的圖片質量。聽起來還不錯,但殘酷的事實是沒有一個新格式被所有瀏覽器支持。谷歌的WebP表現不錯,但只有Chrome和Opera原聲支持JPEG-XR,最初被稱為高清照片,是微軟發布的一個專有圖像格式,僅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" alt="test">
</picture>

source的type屬性用來指定每個圖像的MIME類型,瀏覽器會選擇第一個含有其支持的MIME類型的源。源的順序是至關重要的,如果瀏覽器無法識別所有的圖象類型,它會回退至原來的img元素。

但是目前這些格式的支持多數不會直接這麼做,因為代碼會有些冗餘難看,有判斷瀏覽器ua輸出不同dom或者樣式的,也有服務端直接輸出的。服務端直接輸出,或者CDN做特殊處理,進行無感知格式切換,同時預留url和拒絕的接口,處理起來更靈活,省時省力,例如我們的:

 

服務端根據瀏覽器的請求頭,返回不同的圖像格式,對於X5內核還可以支持sharpP。

3.SVG應用

難點:變色方案,響應式定位計算

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

說起SVG,這是個出現頻率比webp更高的圖像格式了,他有着比iconfont更多的優點,所以現在web上正在大量的應用。

優點:

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

2.可讀性好,有利於SEO與無障礙

與iconfont對比

1.渲染方式不同

關於渲染方式,之前歐文同學的文章已經講述的很清楚,這裡不多做敘述(https://isux.tencent.com/svg-icon-part-one.html),無論黑白渲染,灰度渲染,次像素渲染,還是DirectWrite 或 GDI 渲染,既然iconfont他是一個字體,就難逃出現鋸齒的命運,特別是在一倍屏幕下的渲染。

2.icon font只能支持單色

icon font做為字體無法支持多色圖形,這就對設計造成了許多限制,因此這也成為了icon font的一個瓶頸。

3.icon font可讀性不好

icon font主要在頁面用Unicode符號調用對應的圖標,這種方式不管是瀏覽器,搜索引擎和對無障礙方面的能力都沒有SVG好

在對比完之前,可能有同學就會問,SVG和iconfont對比有個致命的缺點,就是換色.

比如hover換色,iconfont只要寫個顏色就好了,SVG是不是需要做兩個顏色的圖?這也是SVG圖像應用我們解決的一個難點之一

SVG換色,最初我試過三個方案

一是mask-image屬性,他的優點是簡單粗暴,直接用css來mask這個svg圖形來進行換色,缺點很明顯就是兼容性了,除去兼容性,還是很好用的。

demo:

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

查看demo

二是通過SVG濾鏡來實現,優點是效果更好,缺點除了兼容性,還需要額外的腳本配合。關於濾鏡換色的詳細說明在我上一篇文章里有詳細介紹以及demo

查看文章

三是我們最終選擇的底層無感知換色的方案,把修改顏色的腳本集成到了我們的工作流里,我們在寫css的時候,遇到svg需要換色的地方,只需要

background-image: url(test.svg?fill=#ffffff)

加一句換色參數,工作流在底層會自動生成你所需要的svg圖片併合併到雪碧圖裡。

SVG應用的另一個難點,就是作為背景圖響應式渲染,雪碧圖的background-position和background-size 的計算,這個其實也是其他圖像都會存在的一個難點。

我的導師 wenju 之前發過這個計算公式相關的文章:

百分比值()是背景圖相對於背景定位區(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

根據上面的信息,我就可以計算出具體的(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的回退方案,已經是老生常談

比如

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

svg標籤方式,缺點必須指定寬高,沒有圖片的保持款高比例特性,優點兼容性好,兼容所有主流瀏覽器

或者

<picture>
    <source type="image/svg+xml" srcset="svg.svg">
    <img src="svg.png" alt="">
</picture>

在支持的瀏覽器里使用SVG,在不支持的瀏覽器里顯示PNG,優點是type靈活,可用於SVG,WEBP等,而且保持了img標籤的特性,方便做布局操作。缺點兼容性要求高,ios9+,安卓5+,微軟Edge+
當然這個兼容性說的是source type的兼容,並不是SVG本身的兼容。

對於css里的SVG 的應用與回退策略,比較簡單,也已經成熟,一般情況下都是這種用法

 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來篩選和回退。

練小習
練小習
設計效果檢驗之道
上一遍
每個人心中都有一件白T
下一遍
14,813
QQ空間 新浪微博 Facebook Google+

相關推薦

留下你的想法吧