2024-02-08|閱讀時間 ‧ 約 22 分鐘

HTML 程式札記 : <img> 圖片

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

HTML 圖片基本語法

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

<img src="image.jpg" alt="描述文字" title="懸停時顯示的文字">
  • src 屬性指定了圖片的路徑和檔名。
  • alt 屬性提供了圖片的替代文字,當圖片無法顯示時會出現。
  • title 屬性可以在滑鼠懸停圖片時顯示一段文字

設定圖片尺寸

可以通過 widthheight 屬性來設定圖片的寬度和高度:

<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 屬性,這有助於在圖片無法加載時提供信息。
  • 圖片大小:適當的圖片大小可以加快頁面加載速度,提升用戶體驗。
  • 描述性檔名和路徑:使用描述性的檔名和組織良好的資料夾結構,有助於搜索引擎理解圖片內容。

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

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

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.