超文字標記語言/影像

讓我們從一個簡短的最小示例開始

<img src="turtleneck-sweater.jpeg" />

讓我們也看看更擴充套件的示例

<img src="turtleneck-sweater.jpeg" alt="Photograph of a Turtleneck Sweater"
     title="Photograph of a Turtleneck Sweater" />

影像通常儲存在外部檔案中。要將影像放置到 HTML 原始碼中，請使用 img 標籤，並將 src 屬性設定為影像檔案的 URL。為了支援無法渲染影像的瀏覽器，您可以提供 alt 屬性，其中包含影像的文字描述。要為影像提供工具提示，請使用 title 屬性。

示例中 /> 前面的空格是有意留出的。一些較舊的瀏覽器在省略空格時行為異常。

放置

預設情況下，影像與其周圍環境內聯放置。要將影像作為塊或浮動放置，可以使用層疊樣式表。

替代文字和工具提示

一段描述數字文件可訪問性挑戰的影片。雖然此影片與 PDF 和 Word 文件相關，但該概念也適用於 HTML。

HTML 規範要求所有影像都具有 alt 屬性。這通常被稱為alt 文字。影像可以分為兩類：

• 那些增加了頁面內容的影像；
• 那些純粹是裝飾性的影像，例如間隔符、花式邊框和專案符號。

裝飾性影像應具有空的 alt 文字，即 alt=""。用作專案符號的影像可以使用星號，alt="*"。

所有其他影像應具有有意義的 alt 文字。alt 文字不是影像的描述，請使用 title 屬性來描述簡短的描述。alt 文字是將在影像而不是影像本身讀取的內容。例如，

<img src="company_logo.png" alt="???"> makes the best widgets in the world.

alt 文字應該是公司的名稱，而不是廣受歡迎的“我們的徽標”，這在文字瀏覽器中讀取時會給出“我們的徽標製作世界上最好的小部件”的句子。

alt 屬性代表替代，盲人使用的螢幕閱讀器以及非圖形功能瀏覽器（如 Lynx）可以使用它來更好地使使用者瞭解影像的用途。完整準確地使用 alt 文字對於以下原因至關重要：

• 使盲人和視力障礙使用者能夠理解您網站的內容。
• 幫助機器人和搜尋引擎瞭解您網站的內容。

工具提示

工具提示的示例

一些較舊的瀏覽器錯誤地使用 alt 屬性標籤來生成影像工具提示。但是，實際上應使用 title 屬性來實現這一點。

寬度和高度

要使影像顯示小於外部檔案中的尺寸，請使用 width 和 height 屬性。僅指定一個或另一個屬性時，影像將按比例縮放以保持相同的總體比例。

格式

大多數 Web 影像將使用有限數量的格式製作。以下是常用支援格式的簡單列表。

• jpg / jpeg
  • 適用於照片。
  • 幾乎所有瀏覽器都支援。
  • 無法完美地重新建立影像，導致許多簡單的徽標和插圖出現明顯問題。
• webp
  • jpg 的更高效替代品。
  • 還支援動畫和透明度。
• png
  • 適用於具有透明度的影像。
  • 適用於簡單的或平面顏色，例如卡通，例如徽標。
• svg
  • 具有無限解析度的向量格式。
  • 非常適合徽標和簡單的幾何圖形。
  • 不適用於照片。
• gif
  • 支援動畫影像。
  • 在顏色和解析度支援方面非常有限。
  • 非常低效的格式。

• 
  JPG 影像非常適合靜態照片或詳細的繪畫。
• 
  JPG 不適合簡單的圖形。這裡比較了有損 JPG 和無損 PNG。
• 
  光柵圖形（左），與 SVG（右）比較
• 
  比較無損 PNG、有損 JPG 和有損 Webp，包括檔案大小。有損格式比無損 PNG 小得多。Webp 在大約相同的檔案大小下提供比 JPG 更好的視覺保真度。