咖啡廳推薦
這間咖啡廳的環境非常舒適...
他們的拿鐵拉花藝術更是出色...
HTML 嵌入教學
學習如何在網頁中使用 HTML img 標籤嵌入圖片， 包含進階屬性和最佳實踐。
🏷️ HTML img 標籤基礎
基本語法
HTML 中插入圖片最基本的標籤是 <img>：
這是最簡單的形式，但實際使用時我們會加入更多屬性來優化體驗。
duk.tw 自動生成
duk.tw 會在上傳完成後自動生成完整的 HTML img 標籤。例如：
實際顯示效果：
🎯 進階屬性與最佳實踐
尺寸控制屬性
使用 width 和 height 屬性來控制圖片尺寸：
- width - 圖片寬度（像素）
- height - 圖片高度（像素）
- 設定尺寸有助於防止頁面重新排版
- 建議使用實際圖片尺寸以保持比例
Loading 屬性
控制圖片的載入時機，提升頁面效能：
- loading="lazy" - 圖片進入視窗時才載入
- loading="eager" - 立即載入（預設值）
- 適用於長頁面，可以提升初始載入速度
🔍 SEO 與無障礙優化
替代文字（Alt Text）最佳實踐
良好的 alt 文字應該：
- 準確描述圖片內容
- 簡潔但資訊完整
- 包含關鍵字但避免關鍵字堆砌
- 考慮語境和用戶需求
Title 屬性
title 屬性提供額外的資訊：
滑鼠懸停時會顯示提示，但不影響 SEO。
🚀 效能優化技巧
圖片壓縮
在上传前進行適當的圖片壓縮：
- JPG 格式適合照片，壓縮率 70-85%
- PNG 適合圖標和透明圖片
- WebP 提供最佳壓縮效果
- 避免不必要的超高解析度
Lazy Loading 實作
在長頁面中使用延遲載入：
<!-- 在可視區域外的圖片 --> <img src="https://duk.tw/LazyImg.jpg" alt="延遲載入圖片" loading="lazy" /> <!-- 重要的首屏圖片 --> <img src="https://duk.tw/Important.jpg" alt="重要圖片" loading="eager" />
CDN 加速
duk.tw 已經整合 CDN 加速：
- 全球節點分發
- 自動選擇最近的伺服器
- HTTPS 加密傳輸
- 快取優化
📝 實戰範例
部落格文章
咖啡廳溫馨的用餐環境
🔧 疑難排解
Q: 圖片不顯示怎麼辦？
A: 檢查 src 屬性是否正確，確認網址可以直接在瀏覽器中開啟。也檢查是否有 CORS 或防火牆阻擋。
Q: 圖片變形或模糊？
A: 確保 width 和 height 屬性與圖片實際比例相符。避免強制拉伸圖片。
Q: 載入速度很慢？
A: 考慮使用 loading="lazy"，並確保圖片已經過適當壓縮。duk.tw 使用 CDN 加速，但網路環境也會影響速度。
Q: SEO 最佳化？
A: 使用描述性的 alt 文字，選擇合適的檔案名稱，並確保圖片與內容相關。