自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

響應(yīng)式圖像 同像源適應(yīng)不同界面的解決辦法

移動(dòng)開發(fā)
一群來自響應(yīng)式問題社區(qū)組(RICG)的聰明家伙致力于解決這個(gè)難題,他們使picture元素和srcset、sizes屬性納入HTML 5.1規(guī)范草案 。因?yàn)槲覀儫o法預(yù)測(cè)用戶在何地以及如何訪問我們的網(wǎng)站,所以我們需要瀏覽器自身根據(jù)情況選擇最好的圖像。

 [[164364]]

自從2010年Ethan Marcotte開始討論響應(yīng)式網(wǎng)頁設(shè)計(jì),開發(fā)者和設(shè)計(jì)師們競(jìng)相尋求處理響應(yīng)式圖片的方法。這的確是一個(gè)棘手的問題 ,因?yàn)槲覀儗?duì)同一個(gè)網(wǎng)站在眾多設(shè)備寬度下,使用同一圖像源。你愿意在一個(gè)大顯示屏上顯示模糊地、馬賽克狀的圖像?你愿意在你的手機(jī)上加載一個(gè)巨大的(雖然更漂亮的)圖像?這個(gè)問題令人左右為難。

一群來自響應(yīng)式問題社區(qū)組(RICG)的聰明家伙致力于解決這個(gè)難題,他們使picture元素和srcset、sizes屬性納入HTML 5.1規(guī)范草案 。因?yàn)槲覀儫o法預(yù)測(cè)用戶在何地以及如何訪問我們的網(wǎng)站,所以我們需要瀏覽器自身根據(jù)情況選擇***的圖像。新規(guī)范將解決以下問題:

  • 基于設(shè)備象素比(device-pixel-radio)選擇
  • 基于viewport選擇
  • 基于Art direction(美術(shù)設(shè)計(jì))選擇
  • 基于圖像格式選擇

該規(guī)范中,img元素增加了兩個(gè)新屬性:srcset和sizes。srcset用來聲明一組圖像源,瀏覽器根據(jù)我們使用描述符指定的條件來選擇圖像。描述符x表示圖像的像素密度,描述符w表示圖像的寬度;瀏覽器使用這些信息從列表中選擇合適的圖像。sizes屬性為瀏覽器提供將要顯示圖像的尺寸信息,srcset使用w描述符時(shí)必須包含此屬性。這種方法尤其適用于可變寬度的圖像,我將在后面詳細(xì)討論。

我們現(xiàn)在可以根據(jù)用戶的viewport,提供不同質(zhì)量或美術(shù)設(shè)計(jì)(art direction)的圖像,無需借助復(fù)雜的服務(wù)器端設(shè)置。響應(yīng)式圖像將成為HTML規(guī)范的重要組成部分,所有瀏覽器終將都會(huì)支持此解決方案。

固定寬度圖像:基于設(shè)備像素比選擇

視網(wǎng)膜屏幕的廣泛應(yīng)用,使我們不僅需要考慮屏幕分辨率,而且也需要考慮像素密度。視網(wǎng)膜屏幕,4K顯示器,UltraHD-它們都比相同尺寸的標(biāo)準(zhǔn)分辨率顯示器填充了更多的像素。更多的像素=更清晰的圖像。

有些圖片不管屏幕尺寸,始終以固定寬度顯示-如站點(diǎn)logo或人物簡介圖像,也就是說需要根據(jù)設(shè)備像素比來選擇。瀏覽器將根據(jù)設(shè)備像素比來選擇加載哪張圖像。

srcset屬性列出了瀏覽器可以選擇加載的源圖像池,是一個(gè)由逗號(hào)分隔的列表。x描述符表示圖像的設(shè)備像素比。瀏覽器根據(jù)運(yùn)行環(huán)境,利用這些信息來選擇適當(dāng)?shù)膱D像。不理解srcset的瀏覽器會(huì)直接加載src屬性中聲明的圖像。

 
  1. <img srcset="crest-383.jpg 1.5x, crest-510.jpg 2x" src="crest-255.jpg" alt="[ISUX譯]響應(yīng)式圖像" alt="USWNT crest" /> 

[[164365]]

網(wǎng)站logo就是固定寬度圖像的一個(gè)例子,不管viewport的寬度如何,始終保持相同的寬度。不過,與內(nèi)容相關(guān)的圖片,通常也需要響應(yīng)式,它們的大小往往隨viewport改變。對(duì)于這類圖像,還有更好的處理方法。

可變寬度的圖像:基于viewport選擇

對(duì)于可變寬度的圖像,我們使用srcset搭配w描述符以及sizes屬性 。w描述符告訴瀏覽器列表中的每個(gè)圖象的寬度。sizes屬性是一個(gè)包含兩個(gè)值的,由逗號(hào)分隔的列表。根據(jù)***規(guī)范,如果srcset中任何圖像使用了w描述符,那么必須要設(shè)置sizes屬性。

sizes屬性有兩個(gè)值:***個(gè)是媒體條件;第二個(gè)是源圖尺寸值,在特定媒體條件下,此值決定了圖片的寬度。需要注意是,源圖尺寸值不能使用百分比,vw是唯一可用的CSS單位。

  1. <img srcset="uswnt-480.jpg 480w,  
  2.              uswnt-640.jpg 640w,  
  3.              uswnt-960.jpg 960w, 
  4.              uswnt-1280.jpg 1280w"  
  5.      sizes="(max-width: 400px) 100vw,  
  6.             (max-width: 960px) 75vw,  
  7.             640px"  
  8.      src="uswnt-640.jpg" alt="[ISUX譯]響應(yīng)式圖像" alt="USWNT World Cup victory"

上例中,我們告訴瀏覽器在viewport寬度小于400像素時(shí),使圖像的寬度與viewport等寬。在viewport寬度小于960像素時(shí),使圖像的寬度為viewport寬度的75%。當(dāng)viewport大于960像素時(shí),使圖像的寬度為640像素。如果你不熟悉vw ,可以看看Tim Severien的大文viewport單位詳解 。

瀏覽器利用srcset和sizes信息來選擇***規(guī)定條件的圖像。如果瀏覽器的viewport是600像素,圖像最可能以75vw的寬度顯示。瀏覽器將嘗試加載***張大于450像素(600*0.75)的圖像,也就是uswnt-480.jpg。如果我的是dpr為2的Retina顯示屏,那么瀏覽器就會(huì)嘗試加載***張大于900像素(600*0.75*2)的圖像,也就是uswnt-960.jpg。我們無法確定究竟顯示哪張圖像,因?yàn)槊總€(gè)瀏覽器根據(jù)我們提供的信息挑選適當(dāng)圖像的算法是有差異的。(譯者注:srcset和size列表是對(duì)瀏覽器的一個(gè)建議(hint),而非指令。例如,設(shè)備像素比(dpr)為1.5的設(shè)備,亦可用1x也可用2x的圖像,由瀏覽器根據(jù)其能力、網(wǎng)絡(luò)等因素來決定。)

前兩個(gè)例子都是以不同質(zhì)量顯示相同的圖像,僅用srcset屬性就足夠了。不必?fù)?dān)心老舊瀏覽器,老舊瀏覽器會(huì)把它看作為一個(gè)普通的圖像并從src中加載。如果你想在不同寬度下顯示稍微不同的圖像,比如在較窄屏幕下僅顯示圖像的關(guān)鍵部分,那么要使用picture元素。

picture:基于Art direction(美術(shù)設(shè)計(jì))選擇

picture元素就像是圖像和其源的容器。瀏覽器仍然需要img元素,用來表明需要加載圖片,如果沒有img,那么什么都不會(huì)渲染。source為瀏覽器提供了要顯示圖像的供選版本?;诿佬g(shù)設(shè)計(jì)選擇的適用場(chǎng)景為:在一個(gè)特定的轉(zhuǎn)效點(diǎn)(breakpoint)需要顯示一個(gè)特定的圖像。使用picture元素選擇圖像,不會(huì)有歧義。

 
  1. <picture> 
  2.   <source media="(min-width: 960px)" srcset="ticker-tape-large.jpg"
  3.   <source media="(min-width: 575px)" srcset="ticker-tape-medium.jpg"
  4.   <img src="ticker-tape-small.jpg" alt="[ISUX譯]響應(yīng)式圖像" alt="USWNT ticker-tape parade"
  5. </picture> 

[[164367]]

在本例中,當(dāng)viewport大于960像素時(shí),會(huì)加載圖像的風(fēng)景模式版本(ticker-tape-large.jpg)。當(dāng)viewport寬度大于575像素時(shí),瀏覽器會(huì)加載圖像的裁剪過的肖像模式版本(ticker-tape-medium.jpg)。而當(dāng)寬度小于575像素時(shí),加載的圖像( ticker-tape-small.jpg)已經(jīng)被裁剪成焦點(diǎn)僅在一個(gè)球員上了。

picture元素是向后兼容的;不支持picture元素的瀏覽器將顯示img。圖像的所有標(biāo)準(zhǔn)屬性(如alt),應(yīng)該作用在img上而不是picture上。

source:基于圖片格式選擇

最近幾年出現(xiàn)了一些新的圖片格式,這些新圖像格式在較小的文件大小情況下保證了較好的圖片質(zhì)量。聽起來還不錯(cuò),但殘酷的事實(shí)是沒有一個(gè)新格式被所有瀏覽器支持。谷歌的WebP表現(xiàn)不錯(cuò),但只有Chrome和Opera原聲支持。JPEG-XR,最初被稱為高清照片,是微軟發(fā)布的一個(gè)專有圖像格式,僅Internet Explorer支持。如果你想了解更多信息,可以查看Zoltan Hawryluk對(duì)這些新格式的深入研究。

 
  1. <picture> 
  2.   <source type="image/vnd.ms-photo" src="wwc2015.jxr"
  3.   <source type="image/jp2" src="wwc2015.jp2"
  4.   <source type="image/webp" src="wwc2015.webp"
  5.   <img src="wwc2015.png" alt="[ISUX譯]響應(yīng)式圖像" alt="WWC 2015"
  6. </picture> 

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

現(xiàn)在可以使用這些東東嗎?

在寫這篇文章的時(shí)候, Firefox,Chrome和Opera的***穩(wěn)定版本均支持picture。Safari和IE本身均不支持picture。srcset的情況稍微好一點(diǎn),F(xiàn)irefox、Chrome和Opera的***穩(wěn)定版本完全支持,Safari8和Internet Explorer Edge部分支持,可以使用x描述符用于根據(jù)分辨率切換,但不支持w描述符。Safari9已經(jīng)完全支持srcset了(譯者注)。

現(xiàn)有不少polyfills解決支持性問題,最知名的恐怕是Scott Jehl的picturefill。目前我(原作者)在我自己的網(wǎng)站上使用Alexander Farkas的respimage。目前的狀況是,我們已對(duì)響應(yīng)式圖像的處理方案達(dá)成一致,并且這些解決方案逐漸被所有的主流瀏覽器實(shí)現(xiàn)。盡管該規(guī)范仍在不斷完善之中,但原生的響應(yīng)式解決方案離我們?cè)絹碓浇恕?/p>

原文地址:Using Responsive Images (Now)

感謝你的閱讀,本文由 騰訊ISUX 版權(quán)所有,轉(zhuǎn)載時(shí)請(qǐng)注明出處,違者必究,謝謝你的合作。
注明出處格式:騰訊ISUX (https://isux.tencent.com/responsive-image.html)

責(zé)任編輯:倪明 來源: isux
相關(guān)推薦

2013-07-15 14:46:34

iOS開發(fā)UIScrollVie移動(dòng)開發(fā)

2012-12-27 09:49:21

Web響應(yīng)式

2009-06-03 16:41:21

Eclipse亂碼Eclipse

2011-03-04 13:07:47

Filezilla

2011-06-17 11:10:51

Qt 中文 輸出

2009-12-07 18:38:16

WCF異常

2022-07-07 08:00:32

前端界面504

2012-05-28 09:50:32

jQuery插件

2015-11-30 12:02:25

DNS服務(wù)器

2011-01-19 17:54:48

2009-05-31 09:07:35

Oracle鎖定

2023-10-19 21:50:51

業(yè)務(wù)痛點(diǎn)服務(wù)

2021-09-03 19:50:19

微軟Windows 11Windows

2016-07-04 14:22:47

DevOps案例軟件

2010-01-15 09:38:08

磁盤被寫保護(hù)解決辦法

2017-05-04 20:15:51

iOSNSTimer循環(huán)引用

2009-01-14 09:16:24

SQL Server查SQL Server查SQL Server

2018-10-16 09:28:43

網(wǎng)站服務(wù)器故障

2009-12-25 10:31:31

Linux網(wǎng)絡(luò)故障

2010-02-03 16:07:07

Ubuntu Auda
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)