Markdown圖片指南：如何在Markdown中插入、添加、調整大小和嵌入圖片及尺寸控制

圖片能讓文件更加生動和易於理解。Markdown的圖片語法簡潔而靈活，本教學將帶你從基礎語法到進階技巧，全面掌握markdown image的使用方法。

一、基礎語法：3步搞定圖片插入

1.1 基本語法格式

Markdown圖片的基本語法格式如下：

![替代文字](圖片路徑)
![替代文字](圖片路徑 "圖片標題")

語法組成部分：

  • 開頭一個驚嘆號 !
  • 接著一個方括號，裡面放上圖片的替代文字（alt text）
  • 接著一個普通括號，裡面放上圖片的路徑或URL
  • 可選：在路徑後添加引號包圍的標題文字

1.2 實際使用範例

本地圖片範例：

![專案截圖](./images/screenshot.png)
![使用者介面](../assets/ui-demo.jpg "使用者介面演示")
![應用程式圖示](images/icon.svg "應用程式圖示")

網路圖片範例：

![範例圖片](https://dummyimage.com/largerectangle/09f/fff&text=guidest.com)
![網站Logo](https://dummyimage.com/largerectangle/09f/fff&text=guidest.com "網站標誌")

1.3 路徑使用指南

相對路徑（推薦）：

  • 同級目錄：photo.jpg
  • 子目錄：images/photo.jpg
  • 上級目錄：../photos/photo.jpg

絕對路徑：

  • Windows：C:\Users\username\Pictures\screenshot.png
  • macOS/Linux：/Users/username/Documents/image.png

路徑使用建議：

  • 推薦使用相對路徑，便於專案移植
  • 建議建立專門的圖片資料夾（如 images/、assets/）
  • 使用有意義的檔案名稱，便於管理
  • 注意路徑分隔符在不同作業系統中的差異

二、進階技巧：讓圖片排版更專業

2.1 調整圖片尺寸

Markdown原生語法無法直接調整圖片大小，需要使用HTML標籤：

<img src="chart.png" width="300" height="200" alt="統計圖表">
<img src="logo.png" width="50%" alt="響應式圖片">

2.2 圖片置中顯示

方法一：使用center標籤

<center>
![架構圖](diagram.png)
</center>

方法二：使用div + CSS

<div style="text-align: center;">
  <img src="image.jpg" alt="置中圖片" style="max-width: 100%;">
</div>

方法三：使用p標籤對齊

<p align="center">
  <img src="image.jpg" alt="置中圖片" width="400">
</p>

2.3 圖文混排

<img src="logo.png" style="float:right; margin:0 0 1em 1em;" width="150">
這裡是環繞文字內容，圖片會浮動在右側...

2.4 帶編號的圖片說明

![圖1：系統架構圖](architecture.png)

正文內容...（參見圖1）

![圖2：資料流程圖](dataflow.png)

三、編輯器操作技巧

3.1 VSCode外掛推薦

必裝外掛：

  • Markdown Paste：支援直接貼上剪貼簿中的圖片
  • Paste Image：可自訂儲存路徑
  • Markdown All in One：增強Markdown編輯功能

使用步驟：

  1. 安裝外掛：在VSCode擴充功能商店搜尋並安裝
  2. 複製圖片到剪貼簿（截圖或本地圖片）
  3. 在Markdown檔案中按 Ctrl + Alt + V（Windows）或 Cmd + Option + V（Mac）
  4. 外掛會自動儲存圖片並插入語法

3.2 拖拽插入

直接將圖片檔案從檔案總管拖拽到Markdown編輯器中，大多數現代編輯器會自動產生語法。

3.3 編輯器比較

編輯器拖拽插入即時預覽雲端儲存同步特色功能
Typora✅✅❌直接貼上截圖
VS Code✅✅⚠️需外掛支援圖床外掛
Obsidian✅✅✅自動管理附件目錄
Bear✅✅✅iOS生態完美適配

四、圖片管理最佳實務

4.1 檔案組織結構

專案根目錄/
├── docs/
│   ├── README.md
│   └── guide.md
├── images/
│   ├── screenshots/
│   ├── diagrams/
│   └── icons/
└── assets/
    └── media/

4.2 命名規範

推薦命名格式：

  • 日期-描述：2024-01-15-login-interface.png
  • 功能-類型：user-dashboard-screenshot.jpg
  • 編號-描述：fig01-system-architecture.svg

避免的命名：

  • 包含空格：my photo.jpg
  • 中文字元：使用者介面.png
  • 特殊符號：image@#$.jpg

4.3 圖片最佳化建議

格式選擇：

  • PNG：適合圖示、截圖、透明背景圖片
  • JPG：適合照片、複雜圖像
  • SVG：適合向量圖示、簡單圖形
  • WebP：現代格式，體積小，品質高

效能最佳化：

  • 壓縮圖片大小（推薦工具：TinyPNG）
  • 使用適當的圖片尺寸
  • 避免在網頁中縮放大圖
  • 為不同裝置準備不同尺寸

五、圖床服務與雲端儲存

5.1 免費圖床推薦

GitHub圖床：

優點：

  • 完全免費
  • 穩定可靠
  • 支援CDN加速

缺點：

  • 需要Git操作
  • 國內存取可能較慢

5.2 商業圖床服務

Cloudinary：

  • 25GB永久免費額度
  • 全球CDN
  • 進階圖片處理

AWS S3：

  • 按量付費
  • 企業級穩定性
  • 功能強大

5.3 自建圖床

使用PicGo等工具設定自建圖床

六、常見問題與解決方案

6.1 圖片無法顯示

可能原因：

  1. 路徑錯誤
  2. 檔案不存在
  3. 網路圖片失效
  4. 權限問題

解決方法：

  • 檢查路徑拼寫
  • 確認檔案存在
  • 使用相對路徑
  • 檢查檔案權限

6.2 圖片過大影響載入

解決方案：

  • 使用圖片壓縮工具
  • 調整圖片尺寸
  • 使用WebP格式
  • 實現延遲載入

6.3 路徑問題

常見錯誤：

![錯誤](C:\Users\圖片.jpg)  # 絕對路徑不可移植
![錯誤](my photo.jpg)        # 檔案名稱包含空格

正確做法：

![正確](./images/my_photo.jpg)
![正確]("./images/my photo.jpg")  # 用引號包裹

七、Alt文字最佳實務

7.1 Alt文字的重要性

Alt文字（替代文字）在以下情況下非常重要：

  • 圖片無法顯示時提供替代資訊
  • 螢幕閱讀器的無障礙存取
  • 搜尋引擎最佳化（SEO）

7.2 優秀的Alt文字範例

好的範例：

![蘋果公司總部大樓外觀，現代玻璃帷幕建築](./images/apple-headquarters.jpg)
![網站流量統計圖表，顯示過去六個月訪問量呈上升趨勢](./charts/traffic-stats.png)
![使用者登入介面，包含使用者名稱和密碼輸入框](./screenshots/login-page.png)

避免的寫法：

![圖片](image.jpg)      # 太簡單，沒有描述性
![](image.jpg)          # 完全沒有alt文字
![點擊這裡](image.jpg)  # 不描述圖片內容

7.3 Alt文字編寫原則

  • 簡潔但有描述性
  • 描述圖片的主要內容
  • 避免「圖片」、「照片」等冗餘詞彙
  • 考慮上下文語境
  • 長度控制在125字元以內

八、進階應用場景

8.1 建立圖片畫廊

<div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
  <img src="image1.jpg" alt="圖片1" style="width: 30%; margin: 10px;">
  <img src="image2.jpg" alt="圖片2" style="width: 30%; margin: 10px;">
  <img src="image3.jpg" alt="圖片3" style="width: 30%; margin: 10px;">
</div>

8.2 產品展示範本

## 產品展示

### 主要功能
<table>
  <tr>
    <td align="center">
      <img src="./images/feature1.png" width="200" alt="功能1">
      <br>
      <strong>智慧識別</strong>
      <br>
      <sub>AI驅動的圖像識別技術</sub>
    </td>
    <td align="center">
      <img src="./images/feature2.png" width="200" alt="功能2">
      <br>
      <strong>快速處理</strong>
      <br>
      <sub>毫秒級回應速度</sub>
    </td>
  </tr>
</table>

8.3 介面比較展示

| 行動端 | 桌面端 |
| :---: | :---: |
| ![行動介面](./images/mobile.png) | ![桌面介面](./images/desktop.png) |
| 響應式設計，完美適配 | 大螢幕體驗，功能齊全 |

九、版權與法律注意事項

9.1 圖片版權

免費圖庫推薦：

  • Unsplash：高品質免費照片
  • Pexels：免費圖片和影片
  • Pixabay：免費圖片、插圖、向量圖
  • Freepik：免費向量圖和插圖

9.2 使用注意事項

  • 確認圖片使用許可
  • 註明圖片來源
  • 避免使用有版權爭議的圖片
  • 商業使用需特別注意授權

十、總結與建議

10.1 最佳實務總結

  1. 檔案管理：統一放在專門目錄，使用規範命名
  2. 路徑使用：優先使用相對路徑，便於專案移植
  3. 圖片最佳化：壓縮大小，選擇合適格式
  4. Alt文字：編寫有意義的替代文字
  5. 版權意識：使用合法授權的圖片

10.2 常用工具推薦

圖片編輯：

  • GIMP（免費）
  • Photoshop（付費）
  • Canva（線上設計）

圖片壓縮：

  • TinyPNG（線上壓縮）
  • ImageOptim（Mac）
  • RIOT（Windows）

圖床管理：

  • PicGo（多平台圖床工具）
  • uPic（Mac圖床工具）
  • ShareX（Windows截圖+上傳）

透過本教學，你已經掌握了markdown image的完整使用方法。從基礎語法到進階技巧，從檔案管理到版權注意事項，這些知識將幫助你更好地在Markdown文件中使用圖片，建立更加生動和專業的內容。

記住，好的圖片不僅能提升文件的視覺效果，更能幫助讀者更好地理解內容。在實際使用中，要根據具體需求選擇合適的方法和工具，持續最佳化你的markdown圖片使用技巧。