中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

響應式圖像解決方案

2024-01-22    分類: 網(wǎng)站建設

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

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

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

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

固定寬度圖像:基于設備像素比選擇

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

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

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

<img srcset="crest-383.jpg 1.5x, crest-510.jpg 2x" src="crest-255.jpg" alt="[ISUX譯]響應式圖像" alt="USWNT crest" />
[ISUX譯]響應式圖像
網(wǎng)站logo就是固定寬度圖像的一個例子,不管viewport的寬度如何,始終保持相同的寬度。不過,與內(nèi)容相關(guān)的圖片,通常也需要響應式,它們的大小往往隨viewport改變。對于這類圖像,還有更好的處理方法。

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

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

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

<img srcset="uswnt-480.jpg 480w,
             uswnt-640.jpg 640w,
             uswnt-960.jpg 960w,
             uswnt-1280.jpg 1280w"
     sizes="(max-width: 400px) 100vw,
            (max-width: 960px) 75vw,
            640px"
     src="uswnt-640.jpg" alt="[ISUX譯]響應式圖像" alt="USWNT World Cup victory">
[ISUX譯]響應式圖像
上例中,我們告訴瀏覽器在viewport寬度小于400像素時,使圖像的寬度與viewport等寬。在viewport寬度小于960像素時,使圖像的寬度為viewport寬度的75%。當viewport大于960像素時,使圖像的寬度為640像素。如果你不熟悉vw ,可以看看Tim Severien的大文viewport單位詳解 。

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

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

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

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

<picture>
  <source media="(min-width: 960px)" srcset="ticker-tape-large.jpg">
  <source media="(min-width: 575px)" srcset="ticker-tape-medium.jpg">
  <img src="ticker-tape-small.jpg" alt="[ISUX譯]響應式圖像" alt="USWNT ticker-tape parade">
</picture>
[ISUX譯]響應式圖像
在本例中,當viewport大于960像素時,會加載圖像的風景模式版本(ticker-tape-large.jpg)。當viewport寬度大于575像素時,瀏覽器會加載圖像的裁剪過的肖像模式版本(ticker-tape-medium.jpg)。而當寬度小于575像素時,加載的圖像( ticker-tape-small.jpg)已經(jīng)被裁剪成焦點僅在一個球員上了。

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

source:基于圖片格式選擇

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

<picture>
  <source type="image/vnd.ms-photo" src="wwc2015.jxr">
  <source type="image/jp2" src="wwc2015.jp2">
  <source type="image/webp" src="wwc2015.webp">
  <img src="wwc2015.png" alt="[ISUX譯]響應式圖像" alt="WWC 2015">
</picture>
source的type屬性用來指定每個圖像的MIME類型,瀏覽器會選擇第一個含有其支持的MIME類型的源。源的順序是至關(guān)重要的,如果瀏覽器無法識別所有的圖象類型,它會回退至原來的img元素。

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

在寫這篇文章的時候, Firefox,Chrome和Opera的最新穩(wěn)定版本均支持picture。Safari和IE本身均不支持picture。srcset的情況稍微好一點,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。目前的狀況是,我們已對響應式圖像的處理方案達成一致,并且這些解決方案逐漸被所有的主流瀏覽器實現(xiàn)。盡管該規(guī)范仍在不斷完善之中,但原生的響應式解決方案離我們越來越近了。

本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司!

當前名稱:響應式圖像解決方案
URL鏈接:http://m.rwnh.cn/news43/314893.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供云服務器、品牌網(wǎng)站設計、域名注冊ChatGPT、服務器托管移動網(wǎng)站建設

廣告

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

營銷型網(wǎng)站建設
河间市| 汪清县| 崇阳县| 洱源县| 四平市| 乳山市| 台东县| 周宁县| 古浪县| 丰都县| 玉屏| 玉屏| 安顺市| 繁昌县| 崇阳县| 原平市| 邳州市| 怀宁县| 津市市| 峡江县| 天长市| 仙居县| 大关县| 若尔盖县| 钟山县| 治多县| 乐平市| 乌拉特中旗| 巴彦淖尔市| 出国| 沿河| 北宁市| 平果县| 库车县| 盐城市| 陇南市| 宜川县| 济阳县| 金堂县| 太原市| 仲巴县|