为博客文章添加封面

今天闲来无事打开博客审视一番，总感觉略显单薄，于是动手为部分文章添加合适的封面图。

选图

那么第一步就是根据文章主题选择合适的图片，有很多途径可以找到合适的图片，经过观察，redefine 主题的图片无论在 PC 还是移动端查看都是横向的，所以在选择图片阶段就要选择横向的图片更方便后期处理。

这里列举几个我常用的网站和渠道：

1. Unsplash

   不必多说

   网址：https://unsplash.com/

2. Pexels

   这次图片很多就是这个网站找的，不登陆也能下载

   网址：https://www.pexels.com/zh-cn/

3. 视觉中国

   网址：https://www.vcg.com/

4. 表情包-逗比拯救世界

   乱入一个表情包素材网址

   网址：http://www.dbbqb.com/

5. Pick Free

   一个各种素材的聚合网站，包括图片、字体、音效、音乐、视频等

   网址：http://www.pickfree.cn/

6. Pixabay

   有照片、插画、矢量图、视频等

   网址：https://pixabay.com/zh/

7. 搜索引擎

   没有比这个更好用的了（doge），很多时候配图只需要一个简单的 logo，有时在上面介绍的素材网站找不到的，灵活互补使用。

后期处理

很多时候找到的图不能直接使用，可能遇到很多问题，比如图片的的比例各异，大小可能也不是很合适，主体元素的位置需要调整等等，这个时候就需要后期处理图片了。

至于具体怎么将图片处理成主体元素位于中间，这个方法比较多，也比较繁琐，这里简单介绍我的技巧。

1. 尽量找背景颜色单调的素材，方便后期扩展背景，使主体元素移动到中间

   比如下面这个我找到的图片以及处理后的图片，能够比较方便的将两侧和上下扩展，调整中间胶卷的位置。

   

   处理前的素材

   

   处理后的素材

2. 寻找没有明显主体的素材图片，比如一篇文章的主题是旅行，那么封面可以找一些风景图，无论怎么裁剪都不会很难看的那种

   比如下面这张，就可以随意裁剪正确比例而不用担心主体元素的位置。

   

   无明显主体素材

以 redefine 主题的封面图，文章头图为例。redefine 在显示图片时有 6 种尺寸，分别对应移动和PC端的封面图和文章头图，以及 PC 端的宽屏模式下的封面图和文章头图。

经过我几次的测量与测试，当主体元素位于图片的横向三等分线的中间一栏时并且图片的宽高比为 2:1，可以使此图片在 6 种尺寸下都达到不错的显示效果（只处理一次图片同时作为封面图和文章头图的情况下）。

优先考虑了 PC 端和移动端的文章封面显示效果。

hexo 的 logo 位于三等分线的中间，具体位置如下图所示

主体位置

此时PC端预览效果如下

PC端封面预览

PC端头图预览

PC端宽屏模式封面预览

PC端宽屏模式头图预览

移动端预览效果如下

移动端封面预览

移动端头图预览]

压缩

后期处理之后最好对图片进行压缩，提高访问速度，以下是我常用的几个网站：

1. TinyPNG

   速度快，免登录，一次处理多张图片，支持 webp，jpg，webp 格式

   网址：https://tinify.cn/

2. Squoosh

   谷歌出品，压缩效果很好，多种格式可选，可微调压缩参数

   网址：https://squoosh.app/

3. cdkm

   不仅支持图片压缩，还支持各种文档压缩，可多个文件同时压缩

   网址：https://cdkm.com/cn/