学会在博客中使用gif

学会在博客中使用gif

在CSDN博客中，使用markdown的语法插入图片后不方便调整其大小，位置等，不利于排版，学会使用HTML语法来帮助排版博客，大有裨益。

排版静态图

• Markdown语法

  ![图片的描述](图片本地或网络地址)

• Html语法

  <img src="图片本地或网络地址" width="???" height="???"></img>

注意，就显示静态图，2者都十分方便，但是在博客中，我们经常需要对图片进行排版，这时markdown语法不太合适，我通常的做法就是：

<div align="center|left|right|...">
    <img src="???" width="??"/>
</div>

这样就可以对静态图进行排版了，而且最大的好处可以调整静态图在博客中大小，使文件看起来更加美观。

引入动态图

目前，基本上都是通过相关工具来控制录制的区域，再通过把录制的视频转换为.gif图片，后续过程和静态图相同。我个人觉得使用一个自动转换的软件最好，无须繁琐的视频转图片过程，下面推荐2款软件：

• gifox

  Gifox 是一款Mac平台上的Gif动画制作软件，Gifox 的功能操作及录制效果都还不错，在图片质量和大小上控制得也算 OK。对于绝大多数情况下的使用都足够。

  下载地址：http://xclient.info/s/gifox.html
  

• licecap

  LICEcap 是一款屏幕录制工具，支持导出 GIF 动画图片格式，轻量级、使用简单，录制过程中可以随意改变录屏范围。

  下载地址：http://www.cockos.com/licecap/
  

---

更新内容：2017.06.21

• QQ mac

  使用QQ mac版本可以自由截屏或录制视频，其中录制视频支持窗口录制，这就很方便我们对模拟器的屏幕进行录制gif。

压缩gif

在使用QQ Mac或其他录制窗口的软件后，我们往往得到了一个比较大的gif图片，而CSDN博客上传图片大小限制在2M，所以必须对gif二次压缩才能上传到CSDN博客图床中。这里我介绍一款非常小巧而实用的工具：ImageOptim，下载地址。