/

HTML的`img`標籤

HTML的img標籤

了解使用圖片和HTML的img標籤的基礎知識，以及如何使它們具有響應性

圖片可以使用img標籤顯示。

這個標籤接受一個src屬性，我們用它來設置圖片的來源：

1
<img src="image.png" />

我們可以使用各種圖片格式。最常見的是PNG、JPEG、GIF、SVG和最近的WebP格式。

HTML標準要求必須有一個alt屬性來描述圖片。這對於螢幕閱讀器和搜索引擎機器人來說都很重要：

1
<img src="dog.png" alt="一張狗的圖片" />

您可以設置width和height屬性來設置元素所占的空間，以便瀏覽器在完全加載之前預留空間，防止佈局變化。它接受以像素為單位的數值。

1
<img src="dog.png" alt="一張狗的圖片" width="300" height="200" />

使用srcset實現響應式圖片

srcset屬性允許您根據像素密度或窗口寬度設置響應式圖片，根據您的喜好，瀏覽器可以根據需要下載所需的資源，例如在移動設備上不下載更大的圖片。

下面是一個例子，我們為4個不同的螢幕尺寸提供了4個附加圖片：

1
2
3
4
5
6
<img src="dog.png"
 alt="一張狗的圖片"
 srcset="dog-500.png 500w,
 dog-800.png 800w,
 dog-1000.png 1000w,
 dog-1400.png 1400w">

在srcset中，我們使用w單位來指示窗口寬度。

既然這樣做，我們還需要使用sizes屬性：

1
2
3
4
5
6
7
<img src="dog.png"
 alt="一張狗的圖片"
 sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
 srcset="dog-500.png 500w,
 dog-800.png 800w,
 dog-1000.png 1000w,
 dog-1400.png 1400w">

在這個例子中，sizes屬性中的(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px字符串描述了圖片相對於視口的大小，使用逗號分隔的多個條件。

媒體條件max-width: 500px根據視口寬度設置圖片的大小。簡單地說，如果視窗大小小於500px，則以視窗大小的100%渲染圖片。

如果窗口大小更大，但小於900px，則以視窗大小的50%渲染圖片。

如果更大，則以800px渲染圖片。

vw單位可能對您來說是新的，簡單地說，可以將1vw視為視窗寬度的1%，因此100vw就是視窗寬度的100%。

一個有用的網站可以生成srcset和漸進式縮小的圖片是 https://responsivebreakpoints.com/。

tags: [“HTML”, “img”, “responsive images”, “srcset”]