首頁 > web前端 > css教學 > 如何使用SRCSET構建響應式圖像

如何使用SRCSET構建響應式圖像

Joseph Gordon-Levitt
發布: 2025-02-23 10:24:41
原創
269 人瀏覽過

本文是Microsoft Web開發系列的一部分,探討了響應式圖像 - 創建網站的關鍵方面,這些網站可以在各種設備之間完美運行。 它不再是可選的;在我們的多設備世界中,這是必要的。

How to Build Responsive Images with srcset

鑰匙要點:

  • >使用srcset>屬性提供針對不同設備像素比的各種圖像源。
  • >與srcset>屬性相對於視口指定圖像顯示大小,引導瀏覽器選擇最佳映像。 > sizes>利用
  • 元素的增強靈活性,啟用基於媒體條件(例如CSS媒體查詢)的圖像選擇,並通過
  • >屬性來支持各種圖像格式。 <picture></picture>> type始終使用
  • 屬性作為缺少
  • 支持的瀏覽器的後備。 src srcset>使用Microsoft提供的工具徹底測試各種設備和瀏覽器的響應性和性能
  • 理解響應式圖像:

響應式圖像將其表示形式調整到查看設備。 “最佳形式”是指不同的事物:

>根據屏幕尺寸顯示不同的圖像資產(例如,13.5英寸筆記本電腦與5英寸手機的不同圖像)。

    使用基於設備分辨率的不同圖像(或設備像素比 - 設備像素與CSS像素的比率)。
  • 選擇圖像格式(例如JPEG XR),如果由瀏覽器支持,則有可能獲得更好的壓縮。
  • >
  • 啟用響應式圖像:

>在存在較舊的腳本方法時,由於有多個下載或缺少圖像的潛在問題,因此不建議使用它們。首選方法使用:

屬性
  1. srcset屬性
  2. sizes元素
  3. <picture></picture>
>屬性:

> srcset在潛入使用之前,讓我們定義:>

>

設備像素比:srcset這是每個CSS像素的設備像素的數量,受:

設備像素密度(每英寸物理像素):較高的分辨率設備具有較高的密度,因此在相同的變焦級別上具有較高的設備像素比。 >

瀏覽器縮放級別:更高的縮放級別增加給定設備的設備像素比。
  1. basic
  2. 實現使用設備像素比的描述符:
  3. >
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174027748422704.jpg"  class="lazy" alt="How to Build Responsive Images with srcset " />
    登入後複製
    • 1x:space-needle.jpg對於1.
    • 的設備像素比。
    • 2x:space-needle-2x.jpg對於2的設備像素比2
    • 3x:
    • 對於設備像素的比率為3> space-needle-hd.jpg

    屬性可作為無支持的瀏覽器的後備。 描述符指定圖像寬度:src srcset w

    <img  src="/static/imghw/default1.png"  data-src="images/space-needle.jpg"  class="lazy" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="如何使用SRCSET構建響應式圖像" >
    登入後複製
    <>>屬性:

    > sizes基於視口大小來控製圖像大小,請在中使用>描述符。

    >示例1(一半視口寬度的圖像):sizes> w srcset>

    >示例2(基於視口寬度的響應尺寸):

    <img  src="/static/imghw/default1.png"  data-src="images/space-needle.jpg"  class="lazy"  sizes="50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="如何使用SRCSET構建響應式圖像" >
    登入後複製
    元素:

    >

    元素允許根據渲染尺寸和瀏覽器功能進行圖像選擇。 它包含
    <img  src="/static/imghw/default1.png"  data-src="images/space-needle.jpg"  class="lazy"  sizes="(max-width: 40em) 100vw, 50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="如何使用SRCSET構建響應式圖像" >
    登入後複製
    >,

    and<picture>>屬性的元素。 一個

    (注意:圖像源和大小是說明性的。)> <picture><source> srcset sizes mediatype <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748575415.png" class="lazy" alt="How to Build Responsive Images with srcset " /> </picture>結論:

    響應式圖像可以增強跨設備的用戶體驗。 實施它們以獲得最佳網站性能。 Microsoft的更多資源和工具可用於跨瀏覽器測試和Web開發最佳實踐。 詳細的常見問題解答以下是有關

    實施的常見問題。 How to Build Responsive Images with srcset >

以上是如何使用SRCSET構建響應式圖像的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板