2-7：HTML 的 img 標籤

在 HTML 中，<img> 是用來嵌入圖片的標籤，可以設定屬性來指定圖片的來源、替代文字、尺寸等。

基本語法

<img src="圖片網址" alt="替代文字">

• src：指定圖片的網址，一定要有值
• width：指定圖片的寬度，有指定的好處可以避免瀏覽器在讀取的時候會有跳動的情形
• height：指定圖片的高度，有指定的好處可以避免瀏覽器在讀取的時候會有跳動的情形
• alt：圖片的替代文字，會在圖片連結不到時顯示該文字，也可以當作圖片的說明，對 SEO 有幫助會建議都加上
• title：可以指定一段文字，會當滑鼠停留在上面一段時間後顯示
• loading：可以給定 lazy 的值讓圖片有緩讀的效果

注意事項

1. 圖片路徑：

   • 絕對路徑：指向一個完整的 URL，例如 https://example.com/image.jpg。
   • 相對路徑：相對於當前檔案的位置，例如 images/photo.jpg。

2. 圖片尺寸：

   • 建議只設定 width 或 height，避免圖片變形。
   • 可以透過 CSS 進一步控制圖片樣式，避免直接在 HTML 中指定過多屬性。

3. 無障礙設計：

   • 為每張圖片提供有意義的 alt 文字，這對視障用戶和 SEO 都很重要。
   • 如果圖片只是裝飾用途，alt 可以設為空（alt=""）。

4. 性能優化：

   • 使用 loading="lazy" 延遲載入不在視窗中的圖片，提高網頁加載速度。
   • 優化圖片格式，推薦使用 WebP 格式，因為它具有較高的壓縮比。