圖片語法
圖片是文檔中的重要視覺元素。Markdown 提供了簡潔的語法來插入和管理圖片。
基本圖片語法
內聯式圖片
使用  的格式：
markdown
帶標題的圖片
添加可選的標題信息：
markdown
當鼠標懸停在圖片上時，會顯示標題文本。
引用式圖片
基本引用式
markdown
![替代文本][圖片引用標識]
[圖片引用標識]: https://www.markdownlang.com/image.jpg "可選標題"簡化引用式
當引用標識與替代文本相同時：
markdown
![Markdown Logo][]
[Markdown Logo]: https://www.markdownlang.com/markdown-logo.png圖片路徑類型
絕對URL
markdown
相對路徑
markdown
絕對路徑
markdown
高級圖片功能
圖片鏈接
將圖片包裝在鏈接中：
markdown
[](https://www.markdownlang.com)渲染效果：點擊圖片會跳轉到指定鏈接。
使用HTML控制圖片
指定尺寸
markdown
<img src="image.jpg" alt="描述文本" width="300" height="200">圖片對齊
markdown
<!-- 居中對齊 -->
<div align="center">
<img src="image.jpg" alt="居中圖片" width="400">
</div>
<!-- 右對齊 -->
<div align="right">
<img src="image.jpg" alt="右對齊圖片" width="300">
</div>響應式圖片
markdown
<img src="image.jpg" alt="響應式圖片" style="max-width: 100%; height: auto;">圖片組合顯示
並排顯示
markdown
<img src="img1.jpg" width="45%"> <img src="img2.jpg" width="45%">圖片網格
markdown
<table>
<tr>
<td><img src="img1.jpg" width="200"></td>
<td><img src="img2.jpg" width="200"></td>
</tr>
<tr>
<td><img src="img3.jpg" width="200"></td>
<td><img src="img4.jpg" width="200"></td>
</tr>
</table>圖片與文字混排
markdown
<img src="avatar.jpg" align="left" width="100" style="margin-right: 10px;">
這是一段文字，圖片在左側浮動。文字會環繞在圖片周圍，形成圖文混排的效果。可以用來制作個人簡介或產品介紹等內容。
<div style="clear: both;"></div>替代文本最佳實踐
描述性文本
markdown
✅ 推薦：描述圖片內容
❌ 不推薦：無意義文本
功能性圖片
markdown
✅ 推薦：說明圖片作用
❌ 不推薦：重復周圍文字
點擊  搜索裝飾性圖片
markdown
✅ 推薦：裝飾性圖片使用空替代文本
❌ 不推薦：不必要的描述
常見圖片格式
網絡友好格式
| 格式 | 用途 | 特點 |
|---|---|---|
| JPEG | 照片、復雜圖像 | 文件小，有損壓縮 |
| PNG | 圖標、透明背景 | 無損壓縮，支持透明 |
| WebP | 現代網頁圖片 | 更小體積，更好質量 |
| SVG | 矢量圖形、圖標 | 可縮放，文件小 |
| GIF | 簡單動畫 | 支持動畫，顏色有限 |
格式選擇建議
markdown
✅ 推薦用法：
 ← JPEG適合照片
 ← PNG適合圖標
 ← SVG適合矢量圖
 ← GIF適合簡單動畫
❌ 不推薦：
 ← JPEG不適合圖標
 ← PNG文件會很大圖片優化技巧
文件大小優化
選擇合適的分辨率
markdown<!-- 網頁顯示建議 --> <img src="image.jpg" width="800" alt="描述"> ← 2倍圖用於高清屏使用適當的壓縮
markdown<!-- JPEG質量建議：70-80% --> 懶加載
markdown<img src="image.jpg" alt="描述" loading="lazy">
CDN和圖床使用
markdown
<!-- 使用CDN加速 -->
<!-- 圖床服務 -->
常見錯誤和解決方案
1. 路徑錯誤
markdown
❌ 錯誤：
 ← 路徑不存在
✅ 正確：
 ← 確認文件路徑
 ← 使用正確的相對路徑2. 替代文本缺失
markdown
❌ 錯誤：
 ← 重要圖片缺少描述
✅ 正確：
3. 尺寸控制問題
markdown
❌ 問題：圖片過大
 ← 可能撐破布局
✅ 解決：
<img src="huge-image.jpg" alt="大圖片" style="max-width: 100%;">4. 鏈接圖片問題
markdown
❌ 錯誤：
[(https://www.markdownlang.com) ← 語法錯誤
✅ 正確：
[](https://www.markdownlang.com)實際應用場景
1. 技術文檔
markdown
## 安裝步驟
1. 下載安裝包
2. 運行安裝程序
3. 完成安裝
2. 產品展示
markdown
## 產品特性
### 現代化界面設計
<div align="center">
<img src="ui-screenshot.png" alt="產品界面截圖" width="600">
<p><em>簡潔直觀的用戶界面</em></p>
</div>
### 多平台支持
<table>
<tr>
<td align="center">
<img src="windows-logo.png" width="60"><br>
<strong>Windows</strong>
</td>
<td align="center">
<img src="mac-logo.png" width="60"><br>
<strong>macOS</strong>
</td>
<td align="center">
<img src="linux-logo.png" width="60"><br>
<strong>Linux</strong>
</td>
</tr>
</table>3. 個人簡介
markdown
## 關於我
<img src="avatar.jpg" align="right" width="150" style="margin-left: 20px; border-radius: 50%;">
你好！我是一名全棧開發者，專注於現代Web技術。擁有5年以上的開發經驗，熟悉多種編程語言和框架。
### 技能堆棧
<div style="clear: both;"></div>4. 教程說明
markdown
## 代碼編輯器配置
按照以下步驟配置您的開發環境：
1. **打開設置**
2. **搜索配置項**
3. **修改配置值**
> 💡 **提示**：配置完成後重啟編輯器以確保設置生效。無障礙訪問
編寫有意義的替代文本
markdown
✅ 推薦：詳細描述
❌ 不推薦：簡單重復
使用結構化描述
markdown
HTML輸出
Markdown圖片轉換為HTML：
markdown
轉換為：
html
<img src="image.jpg" alt="替代文本" title="圖片標題">引用式圖片：
markdown
![替代文本][ref]
[ref]: image.jpg "標題"轉換為：
html
<img src="image.jpg" alt="替代文本" title="標題">相關語法
練習
嘗試創建以下內容：
- 一個產品展示頁面，包含多張產品圖片
- 一個技術教程，包含步驟截圖和說明
- 一個團隊介紹頁面，包含成員頭像和信息
- 一個對比圖表，展示數據變化趨勢
工具推薦
圖片編輯工具
- 在線工具：Canva、Figma、Photopea
- 桌面軟件：GIMP、Paint.NET、Adobe Photoshop
- 截圖工具：Snipaste、Lightshot、系統自帶截圖
圖片優化工具
- 壓縮工具：TinyPNG、ImageOptim、Squoosh
- 格式轉換：CloudConvert、Online-Convert
- 批量處理：ImageMagick、XnConvert
圖床服務
- 免費服務：GitHub、Gitee、sm.ms
- 付費服務：七牛雲、阿裡雲OSS、騰訊雲COS
- CDN加速：jsDelivr、Cloudflare、AWS CloudFront