HTML 程式札記 : <img> 圖片

在網頁設計中，圖片是增強用戶體驗的重要元素。本文將介紹如何在 HTML 中使用圖片，包括基本語法、屬性設定等，幫助你更好的在網頁中使用圖片。

HTML 圖片基本語法

HTML中插入圖片主要是通過 <img> 標籤來實現。以下是一個基本的例子：

<img src="image.jpg" alt="描述文字" title="懸停時顯示的文字">

• src 屬性指定了圖片的路徑和檔名。
• alt 屬性提供了圖片的替代文字，當圖片無法顯示時會出現。
• title 屬性可以在滑鼠懸停圖片時顯示一段文字

設定圖片尺寸

可以通過 width 和 height 屬性來設定圖片的寬度和高度：

<img src="image.jpg" alt="描述文字" width="500" height="600">

figure、figcaption 標籤

<figure> 用於將圖片與其他內容分開，<figcaption> 則提供圖片的說明文字。

<figure>
  <img src="image.jpg" alt="描述文字">
  <figcaption>這是圖片的說明文字</figcaption>
</figure>

圖片懶加載

懶加載是一種優化技術，只有當用戶滾動到圖片時，圖片才會加載。這可以通過 JavaScript 實現，或在HTML5中，可以使用loading屬性。

<img src="image.jpg" alt="描述性文字" loading="lazy">

圖片 SEO 優化建議

為了提升網頁的SEO表現和使用者體驗，請遵循以下幾點建議：

• 替代文字(Alt Text)：確保每個圖片都有 alt 屬性，這有助於在圖片無法加載時提供信息。
• 圖片大小：適當的圖片大小可以加快頁面加載速度，提升用戶體驗。

• 描述性檔名和路徑：使用描述性的檔名和組織良好的資料夾結構，有助於搜索引擎理解圖片內容。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡