HTML - 圖片

HTML 圖片為網頁提供視覺內容，增強使用者體驗並傳達資訊。它們可以是照片、圖形、圖示或插圖。

HTML 提供了各種用於嵌入、操作和控制影像的元素，有助於提高網站的美觀性和功能性。瞭解影像標籤、屬性和響應式設計原則對於有效的網頁開發至關重要。

HTML 圖片語法

以下是 HTML 圖片的基本語法

<img src="image_path" alt="Alternate text for the image" width="200px" height="150px" />

這裡，

src：src 屬性定義影像的路徑（影像 URL）。
alt：alt 屬性定義備用文字；如果影像路徑存在斷鏈，則備用文字會顯示在網頁上。
width 和 height：width 和 height 屬性定義影像的高度和寬度。

插入圖片

您可以使用 <img> 標籤和 src 屬性（這是定義影像路徑的必需屬性）在網頁上插入（嵌入）圖片。

注意：<img> 標籤是一個空標籤，這意味著它只能包含屬性列表，並且沒有結束標籤。

語法

使用以下語法使用 <img> 標籤插入圖片

<img src="Image URL" ... attributes-list/>

示例

要嘗試以下示例，讓我們將 HTML 檔案 test.htm 和影像檔案 test.png 儲存在同一個目錄中 -

<DOCTYPE html>
<html>
<head>
   <title>Example of HTML Image (Insert on the webpage)</title>
</head>
<body>
   <h1>Example of HTML Image (Insert on the webpage)</h1>
   <img src="/html/images/test.png" alt="Test Image" />
</body>
</html>

您可以根據您的喜好使用 PNG、JPEG 或 GIF 影像檔案，但請確保在 src 屬性中指定正確的影像檔名。影像名稱始終區分大小寫。

alt 屬性是一個可選屬性，但建議使用，因為它指定了如果影像無法顯示則顯示的影像備用文字。

設定圖片位置

圖片位置（路徑）必須在 src 屬性中明確定義。您可以遵循絕對路徑，該路徑以根目錄 (/) 開始，然後是目錄名稱（如果有），然後是帶副檔名的影像名稱。

示例

例如，如果我們有一個名為“test.png”的圖片，並且它儲存在根目錄的“html”資料夾中的“images”資料夾中。您可以簡單地使用如下圖片路徑“/html/images/test.png”。

<!DOCTYPE html>
<html>
<head>
   <title>Using Image in Webpage</title>
</head>
<body>
   <img src="/html/images/test.png" alt="Test Image" />
</body>
</html>

設定圖片寬度和高度

您可以根據您的需求使用 width 和 height 屬性設定圖片寬度和高度。您可以根據畫素或其實際大小的百分比來指定影像的寬度和高度。

示例

以下示例演示瞭如何設定圖片的寬度和高度

<!DOCTYPE html>
<html>
<head>
   <title>Set Image Width and Height</title>
</head>
<body>
   <p>Setting image width and height</p>
   <img src="/html/images/test.png" alt="Test Image" width="450px" height="200px" />
</body>
</html>

帶邊框的圖片

您可以使用 border 屬性根據畫素指定邊框及其粗細。粗細為 0 表示圖片周圍沒有邊框。

示例

在以下示例中，我們正在為圖片指定邊框

<!DOCTYPE html>
<html>
<head>
   <title>Set Image Border</title>
</head>
<body>
   <p>Setting image Border</p>
   <img src="/html/images/test.png" alt="Test Image" border="3" />
</body>
</html>

圖片對齊

預設情況下，圖片將對齊在頁面左側，但您可以使用 align 屬性將其設定為居中或右側。

示例

在以下示例中，我們正在為圖片指定右對齊

<!DOCTYPE html>
<html>
<head>
   <title>Set Image Alignment</title>
</head>
<body>
   <p>Setting image Alignment</p>
   <img src="/html/images/test.png" alt="Test Image" border="3" align="right" />
</body>
</html>

動畫圖片

您還可以在網頁上使用動畫圖片（具有 .gif 副檔名）。不需要任何特定屬性來顯示動畫圖片；您只需在 src 屬性中設定動畫圖片 (.gif) 的路徑即可。

示例

以下示例演示瞭如何插入動畫圖片

<!DOCTYPE html>
<html>
<head>
   <title>Using Animated Images in HTML</title>
</head>
<body>
   <h1>Using Animated Images in HTML</h1>
   <img src="/html/images/animated_image.gif" alt="Animated Images"  />
</body>
</html>

響應式圖片

您還可以使圖片具有響應性，這將根據裝置的螢幕尺寸和解析度自動調整其大小。以下是在 HTML 中使圖片具有響應性的方法

1. 使用 CSS

使用 CSS，您可以將圖片的寬度設定為 100%，這允許圖片按比例縮放以適應其父容器。

<img src="/html/images/test.png" alt="Responsive Image" style="width: 100%; height: auto;"/>

2. 使用 <picture> 標籤

您還可以透過使用 <picture> 標籤以不同尺寸或解析度顯示不同的圖片，當您希望根據裝置顯示不同的圖片時，這很有用。

<picture>
  <source media="(min-width: 800px)" srcset="image_path_1">
  <source media="(max-width: 799px)" srcset="image_path_2">
  <img src="default_image_path.jpg" alt="Responsive Image">
</picture>

示例

以下示例演示瞭如何在網頁上定義響應式圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image Example</title>
    <style>
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Responsive Image Example</h1>
    <img src="/html/images/test.png" alt="A responsive example image" />
</body>
</html>

支援的圖片格式

下表顯示了 HTML <img> 標籤中支援的圖片格式

圖片格式	圖片格式名稱	透明度支援	動畫支援	副檔名
JPEG/JPG	聯合影像專家組	否	否	.jpg, .jpeg
PNG	行動式網路圖形	是	否	.png
GIF	圖形交換格式	是	是	.gif
SVG	可縮放向量圖形	是	否	.svg
WebP	Web 圖片格式	是	是	.webp
BMP	點陣圖影像檔案	否	否	.bmp
ICO	圖示檔案	是	否	.ico

免費網頁圖形

對於包括圖案在內的免費網頁圖形，您可以檢視免費網頁圖形

列印頁面