图片处理

在 Markdown 中，图片是一种重要的内容元素，它可以使文档更加生动和直观。Markdown 提供了基本的图片插入功能，同时也有一些高级的图片处理技巧。

图片尺寸控制

Markdown 本身不直接支持控制图片尺寸，但可以通过以下方法实现：

使用 HTML 标签

可以使用 HTML 的 <img> 标签来控制图片尺寸：

<img src="https://www.example.com/image.jpg" width="300" height="200" alt="图片描述">

使用 Markdown 扩展语法

一些 Markdown 编辑器支持扩展语法来控制图片尺寸：

![图片描述](https://www.example.com/image.jpg =300x200)

使用 CSS

如果你的 Markdown 文档会被转换为 HTML，可以使用 CSS 来控制图片尺寸：

<style>
  .small-img {
    width: 300px;
    height: auto;
  }
</style>

![图片描述](https://www.example.com/image.jpg){: .small-img}

图片对齐

Markdown 本身也不直接支持图片对齐，但可以通过以下方法实现：

使用 HTML 标签

<img src="https://www.example.com/image.jpg" align="left" alt="左对齐图片">
<img src="https://www.example.com/image.jpg" align="center" alt="居中对齐图片">
<img src="https://www.example.com/image.jpg" align="right" alt="右对齐图片">

使用 CSS

<style>
  .left-img {
    float: left;
    margin-right: 10px;
  }
  .center-img {
    display: block;
    margin: 0 auto;
  }
  .right-img {
    float: right;
    margin-left: 10px;
  }
</style>

![左对齐图片](https://www.example.com/image.jpg){: .left-img}
![居中对齐图片](https://www.example.com/image.jpg){: .center-img}
![右对齐图片](https://www.example.com/image.jpg){: .right-img}

图片链接

可以将图片作为链接，点击图片跳转到指定 URL：

[![图片描述](https://www.example.com/image.jpg)](https://www.example.com)

图片库组织

对于包含大量图片的文档，合理组织图片文件非常重要：

目录结构

建议将图片放在专门的目录中，例如：

docs/
├── index.md
├── images/
│   ├── logo.png
│   ├── screenshot1.png
│   └── screenshot2.png
└── other.md

使用相对路径

使用相对路径引用图片：

![logo](images/logo.png)
![截图](images/screenshot1.png)

图片命名规范

• 使用描述性的文件名
• 使用小写字母和连字符
• 避免使用空格和特殊字符
• 保持文件名一致

图片格式选择

选择合适的图片格式可以减小文件大小，提高加载速度：

JPEG

• 适合照片和复杂图像
• 支持压缩
• 文件大小适中

PNG

• 支持透明背景
• 适合图标和简单图形
• 文件大小较大

GIF

• 支持动画
• 适合简单动画效果
• 颜色有限

WebP

• 现代图片格式
• 压缩率高
• 支持透明背景
• 浏览器支持逐渐增加

图片优化

压缩图片

• 使用图片压缩工具减小文件大小
• 保持适当的分辨率
• 避免使用过大的图片

使用 CDN

• 使用 CDN 托管图片
• 提高图片加载速度
• 减轻服务器负担

响应式图片

在响应式设计中，图片需要适应不同的屏幕尺寸：

<style>
  .responsive-img {
    max-width: 100%;
    height: auto;
  }
</style>

![响应式图片](https://www.example.com/image.jpg){: .responsive-img}

小结

图片处理是 Markdown 文档中的重要部分，通过合理使用图片尺寸控制、对齐方式、链接和组织方法，可以使你的文档更加专业和美观。

在接下来的章节中，我们将介绍 Markdown 扩展语法等更多 Markdown 中级技巧。