博客图片优化

前言

之前在写博客的时候发现一些图片加载的很慢，查看了一下大小一张图片在2-3M之间。这么大的图片在很大程度上影响了博客的加载速度，你也许会想为什么不用图床服务。其实我也有考虑过使用图床，但是考虑到一些图床可能消失，本地预览速度、还有安全性问题，最终是决定还是放在自己的本地然后用git去管理。

这篇文章就是关于，我是如何优化博客图片大小的文章。

图片格式以及图片质量

我们需要大致了解一下常见并可能使用的格式以及对应的优缺点：

更加详细的内容可以参照知乎这个提问：图片格式 jpg、png、gif各有什么优缺点？什么情况下用什么格式的图片呢？

转换

我这里手机拍的照片大多数都是JPG格式，图片的大小普遍都是在1M以上，首先看一下当前的大小：

思路：我是先降低分辨率转换到png的格式，在从png的格式转换成jpg的格式，这样能够保证清晰度和大小都能够得到一个相对来说比较完美的“平衡”。

这次使用到的工具是 安装imagemagick

Gentoo下安装imagemagick

1

sudo emerge -av imagemagick

Mac下安装imagemagick

1

sudo port install imagemagick

首先创建一个临时的工作目录用于我们这次的转换工作：

1

mkdir ~/tmp

将需要转换的图放到这个临时的工作目录：

1

cp -v ~/Downloads/*.JPG ~/tmp

将图片转换成PNG的格式：

1
2

convert -resize 1024x768 IMG_4168.JPG 1.png

将图片转换成jpg的格式：

1

 convert -rotate "90"  -quality 90 1.png 1.jpg

这里添加这个-rotate的参数是因为jpg转换到png的时候发现图像发现了翻转。

最终效果如下图：

可以看到分辨率大小都是一样的jpg要比png体积小了很多。

额外可选项

如果想要给图片添加上水印imagemagick同样可以做到：

1

convert  -fill  black  -pointsize  60  -font  helvetica  -draw  'text 10,80  "Hello, World!" '  1.jpg 2.jpg

结束语

经过这次的优化成功让博客的源码体积小了0M 😂，可喜可贺。这个是因为以前的commit里面还包含了原来的JPG的超大文件，后面学学git把这些commit再去整理一下。

之后的博客加载速度比较之前的超大图片速度确实有肉眼可见的提升～

参考资料

• Convert Between Image Formats
• 图片格式 jpg、png、gif各有什么优缺点？什么情况下用什么格式的图片呢？
• ImageMagic—convert(格式转换）