網頁設計_HTML基礎語法_插入圖片

我們探討了 HTML 圖片的展示、嵌入技巧和優化策略，這對於任何想要提高網站性能和 SEO 表現的開發者都是必須掌握的知識。 從選擇正確的圖片格式到使用 ALT 標籤以及響應式設計，這些細節都將為您的網站帶來重大改變。

在本文中，我們將研究如何深入使用它，包括在網頁中嵌入簡單圖像的基礎知識，使用<figure>增加標題說明以做註釋，以及詳細說明它與 CSS 背景圖片的關係。

當線上的圖片撤掉時，你的連結也會失效，另外也要記得圖片著作權的部份，請小心服用。

使用 <img> 是 HTML 裡的圖片元素，使用時只要在 src 屬性裡填入圖片的網址，或是圖片的 base64 編碼，就可以在網頁中顯示圖片，這篇文章會介紹 <img> 圖片元素的用法。

而且所有主流的瀏覽器（Browser）都支援圖片 超連結 效果，我們先帶一下網頁圖片的語法以及 超連結 的語法，在範例中將兩者套用在一起讓各位參考。

HTML 圖片插入或加入連結語法 網頁設計難免會需要插入些圖片來美化你的頁面，或是需要透過圖片來表達你要傳遞的內容，你可以透過 HTML 的 img 標籤來為網頁加入圖片以及呈現的風格調整，許多的呈現效果在 CSS 中也是可以達到的。

更進階的，如果你想在不同情況下載入完全不一樣的圖片，像是針對手機行動網頁直向 portrait 和橫向 landscape 做處理，或在不同瀏覽器載入不同格式的圖片等，你可以使用 <picture> 標籤。