?

      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ù)的描述符也是無(wú)效的(例如同一描述符中的兩個(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="">語(yǔ)法用于提供同一圖像的不同大小版本,即是根據(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 的支持瀏覽器加載頁(yè)面,則(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ò)圖形) ——無(wú)損動(dòng)畫序列的不錯(cuò)選擇(GIF 性能較差)

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

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

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

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

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

      7) WebP(網(wǎng)頁(yè)圖片格式) ——圖像和動(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)論

      暫無(wú)評(píng)論

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

      訂閱號(hào)

      備注【拉群】

      商務(wù)洽談

      微信聯(lián)系站長(zhǎng)

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