浅谈博客网站图片优化

简介

图片和文章相结合的文章使人阅读愉快，会带来意外的效果。只有文字内容会使人看着容易疲倦。因此我们在写博客大都会添加一些图片，尤其是一些记录生活的博客。

现在的手机动辄几千万抑或上亿像素，拍出来的照片也很大，主要体现在照片尺寸(5414x3195px)和占用的空间(6.47MB)两个部分，这些图片如果不经过一些处理直接上传到网站上就会导致整个页面的体积达到惊人的几十兆，图片加载慢，网页滚动效果不佳的情况层出不穷，即使你把图片放在了CDN。

下面这张图片就是存放在对象存储中通过CDN访问的，有两个参数比较重要，正在等待(TTFB) 和 内容下载 ，这两个时间将直接体现出图片打开速度的快慢。

TTFB时间在CDN正常的情况下一般都差不多，主要是内容下载，你的图片越大下载时间就越长，加载就越慢。

通过以上的描述可以知道，网站中是不宜放置太大的图片的，最开始的时候我上传的照片通过UTools插件进行压缩，压缩率大概在60% ——70%，但是这样还远远不够因为压缩之后图片平均还有1.5M-2M的体积，如果一个网站中放置20几张照片的话整个网页的体积就有30-40MB了，卡的一批

接下来描述一下图片优化的两个主要方面：压缩图片→修改图片尺寸

压缩图片

以下部分内容转自知乎：图片无损压缩工具都有哪些？ - 知乎 (zhihu.com)

1，TinyPNG

TinyPNG，从认识它的那一天开始，我就已经离不开它了，它一次可以批量压缩最多20张JPG或PNG图片，压缩完后还可以打包下载，强烈推荐！TinyPNG除了在线版还有插件版，能把外贸网站里的图片自动压缩，总之功能很强大。

2、Optimizilla

Optimizilla和TinyPNG差不多，同样是是一次可以批量压缩最多20张JPG或PNG图片，压缩完后还可以打包下载，该工具支持中文浏览，习惯中文界面的朋友不妨使用它，压缩完成后还可以调整图片质量，以及预览压缩后的图片是什么样的，也强烈推荐！

3、UTools图片压缩（推荐）

UTools这个玩意在之前的一篇文章里简单介绍过，轻量且强大，插件众多可根据自己的需求自由装配，因为是在本地进行操作不用上传图片并且压缩完成可以直接覆盖原图因此我本人更倾向于使用这种方式来压缩图片。

修改图片尺寸

经过上述的图片压缩，图片的大小已经显著减小，但仍然不够还需要进一步优化，通过修改图片尺寸可使图片的体积再减少一半以上效果显著。

这里因为我有WPS的会员就是用了它的功能，没有再去寻找，有需要可以自行百度查找其它可以批量修改图片尺寸的软件。

使用等比缩放即可，我用小米10PRO拍摄的照片压缩后一般再缩放至40%就能达到一个不错的效果了

CDN配置优化

本着有问题提工单咨询客服的态度，向客服描述过我的问题之后客服推荐我在CDN配置内关闭Range回源，在CDN中没有大文件的前提下可以不用开，经过测试关闭Range回源会好那么一点点，不过最重要的还是在保持图片清晰度的前提下尽量减小图片的体积。

以上就是我这次对网站图片优化的一点经验，仅供参考！