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

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

鑰匙要點：

• >使用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像素的設備像素的數量，受：

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

瀏覽器縮放級別：更高的縮放級別增加給定設備的設備像素比。

basic
2. 實現使用設備像素比的描述符：
>

<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開發最佳實踐。 詳細的常見問題解答以下是有關

實施的常見問題。 >

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