響應式圖片

時間 2019-12-05

標籤響應圖片简体版

原文原文鏈接

當咱們不考慮圖片所耗的流量，用戶對於某個含有圖片的頁面的體驗時，一般會這樣插入一張圖片：css

<img src="example.jpg" width="100" height="100" />複製代碼

在chrome顯示以下：html

根據設備像素比動態選擇圖片源

在手機端，大圖高清圖加載速度慢，耗流量多，且在像素密度低的設備上加載高清圖簡直是浪費好嗎！再好的高清圖也只能顯示成劣質圖片。。。chrome

若是咱們可以根據設備屏幕的像素密度，寬度選擇適合該設備的圖片資源，是否是一件很美好的事情！瀏覽器

那麼，如今，有這樣兩個屬性能夠完成這個小願望哦！bash

srcset
含義：提供在不一樣場景下供 user agent(第7條)選擇的圖片源
值: 爲多個 圖片候選字符串（image candidate string），圖片候選字符串(術語第29條)之間由「，」分隔

sizes
含義: 根據設備的尺寸動態設置<img>元素的大小
值： media_condition（術語第30條） [image_width], [default_image_width]
選擇規則：執行過程當中的第一個media_condition爲true，則使用對應的image_width，若都爲false,則使用default_image_width

例1iphone

兩張圖片，一張普通圖（500*444），一張高清圖（1000*888）svg

普通圖的尺寸詳細信息以下：性能

水平/豎直分辨率均爲96dpi（1dpx=96dpi）的狀況下，尺寸爲500*444，說明該圖片的位圖寬度爲500，位圖高度爲444，即在設備分辨率爲1的設備上，圖片尺寸爲500*444。fetch

<body>
   <h2>different images</h2>
   <img srcset="example.jpg 500w, example-HD.jpg 1000w" sizes="(max-width:800px) 80vw,(max-width:1500px) 50vw, cal(30vw-100px)" alt="a house with a big courtyard">
</body>複製代碼

在chrome的調試模式下，添加自定義設備，並運行ui

自定義設備500*1

設備大小500*700，設備像素比例爲1

chrome運行結果：

視圖窗口寬度爲500px，所以圖片的寬度會選用80vw檔，爲500*80%=400px

由於圖片的寬度爲400px，設備像素密度爲1，那麼圖片所需像素寬度爲400*1=400w，chrome瀏覽器從srcset中選擇了普通圖

雖然視圖窗口寬度爲500px，但在實際運行結果中寬度卻只有200px，圖片寬度只有160px。這是爲何呢？

在<head>里加入了一段js代碼，檢查了chrome的設備像素比。

window.onload=function(){
		alert(window.devicePixelRatio);
	}
複製代碼

發現當前chrome的像素設備比爲2.5

由於這個自定義設備是chrome模擬出的一個虛擬設備，這段代碼實際上仍是運行在chrome上，所以視圖窗口的css pixel爲500*1/2.5=200px。

自定義設備500*2

設備大小500*700，設備像素比例爲2

chrome運行結果：

視圖窗口寬度爲500px，所以圖片的寬度會選用80vw檔，爲窗口的80%，

由於圖片的寬度爲400px，設備像素密度爲2，那麼圖片所需像素寬度爲400*2=800w，chrome瀏覽器從srcset中選擇了最爲合適的高清圖。

自定義設備1000*1

設備大小1000*700，設備像素比例爲1

chrome運行結果：

視圖窗口寬度爲1000px，所以圖片的寬度會選用50vw檔，爲窗口的50%，

由於圖片的寬度爲500px，設備像素密度爲1，那麼圖片所需像素寬度爲500*1=500w，chrome瀏覽器從srcset中選擇了最爲合適的普通圖。

自定義設備1000*2

設備大小1000*700，設備像素比例爲2

chrome運行結果：

視圖窗口寬度爲1000px，所以圖片的寬度會選用50vw檔，爲窗口的50%，

由於圖片的寬度爲500px，設備像素密度爲2，那麼圖片所需像素寬度爲500*2=1000w，chrome瀏覽器從srcset中選擇了最爲合適的高清圖。

設備模式中的Responsive

chrome運行結果：

視圖窗口寬度爲1904px，所以圖片的寬度會選用默認檔，爲528px。

圖片寬度528px,設備像素密度未知，chrome瀏覽器從srcset中選擇了高清圖。

藝術指導配合設備像素比動態選擇圖片源

上面的作法可在必定程度上調節圖片大小，節省手機流量，然而全部設備上呈現的圖片內容都是同樣的，沒有針對性。若是我但願在大屏幕上呈現整張圖片，在手機端卻只想展現關鍵部分，該怎麼作呢？或者當手機處於橫屏時顯示寬圖，當手機處於豎屏時顯示普通圖，該怎麼作呢？

這須要藝術指導！（是否是跟沒說同樣。。。）

想要作到這點，須要用到<picture>元素及<source>元素。

例2

四張圖：手機普通圖（250*199，圖片上標註 normal phone），手機高清圖（500*399，圖片上標註 HD phone），電腦普通圖（500*444，圖片上標註 normal），電腦高清圖（1000*888，圖片上標註 HD）

<!DOCTYPE>
<html>
<head>
<style>
	*{
		margin-left:0;
		margin-right:0;
	}
</style>
</head>
<body>
   <h2>different images</h2>
   <picture>
   		<source media="(max-width:500px)" srcset="example-phone.jpg 500w,example-HD-phone.jpg 1000w" sizes="100vw">
   		<source media="(max-width:1000px)" srcset="example.jpg 500w,example-HD.jpg 1000w" sizes="50vw">
  		<img src="example.jpg" alt="a house with a big courtyard">
   </picture>
</body>
</html>
複製代碼

在chrome的調試模式下，添加自定義設備，並運行

自定義設備500*1

chrome運行結果：

視圖窗口寬度爲500px，故chrome選擇第一個<source>提供的圖片源。

圖片的寬度爲100%的視圖窗口，應該爲500px，又設備像素密度爲1，那麼圖片所需像素寬度爲500*1=500w，chrome瀏覽器選擇了example-phone.jpg。

注：雖然example-phone.jpg的實際寬度只有250px，但chrome在真正將圖片抓取(fetch)下來以前它是不知道這個實際寬度的，它只知道根據開發人員設置的sizes值及視圖窗口去定圖片的寬度，而後選擇合適的圖片源去展現出來。

自定義設備500*2

設備大小500*700，設備像素比例爲2

chrome運行結果：

視圖窗口寬度爲500px，故chrome選擇第一個<source>提供的圖片源。

圖片的寬度爲100%的視圖窗口，應該爲500px，又設備像素密度爲2，那麼圖片所需像素寬度爲500*2=1000w，chrome瀏覽器選擇了example-HD-phone.jpg。

自定義設備1000*1

設備大小1000*700，設備像素比例爲1

chrome運行結果：

視圖窗口寬度爲1000px，按理說chrome應該選擇第二個<source>提供的圖片源，爲何選擇了手機高清圖

好奇怪。。。待我往後慢慢研究。

自定義設備1000*2

設備大小1000*700，設備像素比例爲2

chrome運行結果：

結果居然與上面的同樣，心酸，不解釋。

設備模式中的iphone8

chrome運行結果：

iphone寬度375px，爲何<html>寬度爲980px。。。

視圖寬度按980px算，那麼選擇第一個<source>，圖片寬度爲490px，這是正確的。

iphone8設備像素比(第33條)爲3，那麼圖片的物理像素寬度爲490*3=1470w，那麼選擇高清圖是合適的。

例3

兩張圖，一張橫屏圖（example-landscape.jpg），一張豎屏圖（example-vertical.jpg）

<body>
   <h2>different images</h2>
   <picture>
   		<source media="(orientation:landscape)" srcset="example-landscape.jpg">
  		<img src="example-vertical.jpg" alt="a house with a big courtyard">
   </picture>
</body>複製代碼

在chrome上模擬iphone8運行

根據條件orientation可選擇合適的圖。

配合圖片格式

使用<source>時結合瀏覽器支持的圖片格式進行更精確的選擇

例4

兩張圖：house.svg和house.png

<body>
   <h2>different images</h2>
   <picture>
   	<source type="image/svg+xml" srcset="house.svg">
  	<img src="house.png">
   </picture>
</body>複製代碼

在chrome上運行

chrome支持svg格式，採用的是house.svg

準備好圖片的文本備用方案

當少數用戶由於不能看見圖片不得不採起語音的方式瀏覽網頁時，給圖片設置文本就顯得相當重要。

<img>有個屬性alt，就是專門使用文本的方式去傳達圖片的內容及目的。

看下面這張圖：

咱們能夠用以下img元素去描述它：

<img src="pipechart.gif" alt="Browser Share: Internet Explorer:25%, Firefox:40%, Chrome:25%, Safari:6%, Opera:4%">複製代碼

咱們在設置alt屬性值時，應儘量描述出圖片的內容。若是圖片傳達的內容過多，使用alt屬性不太方便時，可以使用longdesc屬性，不過這個屬性過期了，但目前我還沒發現有更好的替代品。

小結：srcset屬性配合sizes可幫助咱們選擇尺寸不一樣但內容相同的圖片，讓圖片加載更快，流量更省；而<picture><source>元素則可以讓咱們針對不一樣的設備終端顯示不一樣的圖片，定位用戶更精準，固然，這也可配合srcsest屬性使用；針對不一樣的設備，支持的圖片格式可能不同，配合圖片格式使用<picture><source>，在圖片解壓縮方面性能更好；最後，設置好圖片的alt屬性，以備不時之需。（文中留下的坑往後慢慢研究。。。心酸中）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。