精品国产三级a在线观看网站,亚洲综合色成在线观看,亚洲熟妇一区二区三区,,中文字幕成人精品久久不卡 ,永久免费av无码网站国产

?

01

什么是srcset?



Srcset:以逗號(hào)分隔的一個(gè)或多個(gè)字符串,指示用戶代理可能使用的圖像源。?
每個(gè)字符串由以下部分組成:
? ??1) 圖像的URL

? ? 2)(可選)空格后跟以下之一:

  • ? ?寬度描述符(緊跟其后的正整數(shù)w)。寬度描述符除以屬性中給出的源尺寸sizes來計(jì)算有效像素密度。

  • ? ?像素密度描述符(緊跟其后的正浮點(diǎn)數(shù)x),不需要使用sizes屬性。

如果未指定描述符,則為源分配默認(rèn)描述符1x。

注意:

1) 在srcset同一屬性中不可混合寬度描述符和像素密度描述符

2) 重復(fù)的描述符也是無效的(例如同一描述符中的兩個(gè)源都是srcset用描述2x

3)?如果srcset屬性使用寬度描述符,則該sizes屬性也必須存在,否則其srcset本身將被忽略。

02

什么是src?



Src是指圖片網(wǎng)址,圖像的原始屬性。
該<img>元素是必需的。在支持 srcset 的瀏覽器上,src 被視為具有像素密度描述符 1x 的候選圖像,除非擁有像素描述符和寬度描述符(srcset中定義了此像素密度描述符,或srcset 包含 w 描述符。)
另外,始終使用 src 屬性來標(biāo)識(shí)“默認(rèn)”圖像源,以保障在不支持 srcset 的瀏覽器中也可以展示圖像。

03

Srcset使用于根據(jù)分辨率或根視口寬度來提供圖像



通俗來說,srcset 屬性允許您指定圖像文件 URL 列表以及大小描述。
1.像素描述符:

使用Srcset根據(jù)設(shè)備分辨率為不同分辨率提供相同大小的圖像

使用<img srcset="" src="" alt="">語法用于提供同一圖像的不同大小版本,即是根據(jù)同一圖片創(chuàng)建不同的分辨率。

在響應(yīng)式圖像中使用比例僅占15%

2.寬度描述符:

Srcset/Size根據(jù)視口寬度提供不同的圖像大小

使用<img alt="A baby smiling with a yellow headband." srcset="baby-s.jpg ?300w, baby-m.jpg ?600w, baby-l.jpg ?1200w, baby-xl.jpg 2000w" sizes="70vmin">以多種尺寸提供同一圖像的多個(gè)副本,并讓瀏覽器選擇最合適的一個(gè)。

在響應(yīng)式圖像中使用比例達(dá)85%

示例1:

示例2:

示例3:

優(yōu)點(diǎn):

如果視口寬度為 480px 的支持瀏覽器加載頁面,則(max-width: 600px)媒體條件將為 true,因此瀏覽器會(huì)選擇插槽480px。將elva-fairy-480w.jpg被加載,因?yàn)槠涔逃袑挾?( 480w) 最接近插槽尺寸。800 像素圖片在磁盤上的大小為 128 KB,而 480 像素版本僅為 63 KB,節(jié)省了 65 KB。?
04

擴(kuò)展:


?
網(wǎng)絡(luò)上最常用的圖像文件格式是:
1) APNG(動(dòng)畫便攜式網(wǎng)絡(luò)圖形) ——無損動(dòng)畫序列的不錯(cuò)選擇(GIF 性能較差)

2) AVIF(AV1 圖像文件格式) — 由于其高性能,對(duì)于圖像和動(dòng)畫圖像來說都是不錯(cuò)的選擇。

3) GIF(圖形交換格式) ——簡單圖像和動(dòng)畫的不錯(cuò)選擇。

4) JPEG(聯(lián)合攝影專家組圖像) — 靜態(tài)圖像有損壓縮的不錯(cuò)選擇(目前最流行)。

5) PNG(便攜式網(wǎng)絡(luò)圖形) — 靜態(tài)圖像無損壓縮的不錯(cuò)選擇(質(zhì)量比 JPEG 稍好)。

6) SVG(可縮放矢量圖形) — 矢量圖像格式。用于必須以不同尺寸精確繪制的圖像。

7) WebP(網(wǎng)頁圖片格式) ——圖像和動(dòng)畫圖像的絕佳選擇

建議使用WebP和AVIF等格式,因?yàn)閷?duì)于靜態(tài)圖像和動(dòng)畫圖像來說,它們的性能比 PNG、JPEG、GIF 好得多。WebP 得到廣泛支持,而 AVIF 在 Edge 中缺乏支持。


點(diǎn)贊(0) 打賞

評(píng)論列表 共有 0 條評(píng)論

暫無評(píng)論

服務(wù)號(hào)

訂閱號(hào)

備注【拉群】

商務(wù)洽談

微信聯(lián)系站長

發(fā)表
評(píng)論
立即
投稿
返回
頂部