浅谈博客网站图片优化

简介

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

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

CDN的全称是Content Delivery Network,即内容分发网络。是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。

图片[1]-浅谈博客网站图片优化 | 登山亦有道-登山亦有道

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

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

图片[2]-浅谈博客网站图片优化 | 登山亦有道-登山亦有道
压缩处理过的图片

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

图片[4]-浅谈博客网站图片优化 | 登山亦有道-登山亦有道

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

压缩图片

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

1,TinyPNG

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

图片[5]-浅谈博客网站图片优化 | 登山亦有道-登山亦有道

2、Optimizilla

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

图片[6]-浅谈博客网站图片优化 | 登山亦有道-登山亦有道

3、UTools图片压缩(推荐)

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

图片[7]-浅谈博客网站图片优化 | 登山亦有道-登山亦有道

修改图片尺寸

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

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

图片[8]-浅谈博客网站图片优化 | 登山亦有道-登山亦有道

使用等比缩放即可,我用小米10PRO拍摄的照片压缩后一般再缩放至40%就能达到一个不错的效果了 图片[9]-浅谈博客网站图片优化 | 登山亦有道-登山亦有道

CDN配置优化

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

图片[10]-浅谈博客网站图片优化 | 登山亦有道-登山亦有道

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



© 版权声明
THE END
喜欢就支持一下吧
点赞35赞赏
分享
评论 共12条
    • 苑晨岩的头像-登山亦有道
    • Fong0
      我都不压缩直接往上传,预大用小,通常图片都尺寸都 4M+。 srcset 缩略图都被我改造成走 CDN 计算压缩裁剪方案。:heo-滑稽喝水:
      35天前回复
      • 直接上传占服务器空间的吧 cdn的压缩裁剪好像要收费,我知道腾讯云有个数据万象,但是一直没用过
        35天前@Fong回复
    • 苑晨岩的头像-登山亦有道
    • 牧之0
      网站程序是WordPress啊,我以为typecho呢
      36天前回复
    • 林羽凡的头像-登山亦有道
    • 我的解决方案是在ps上压缩,也可以修改尺寸,上传的时候再用php压缩,保证一个图片小于800k,小于900*900
      36天前回复
      • 没用过PS,也不太会 反正总结一下就是修改尺寸+压缩,尽量减小图片体积不然太难受了
        • ps压缩图片两步就好了,另存为图片,保存jpg的时候选择大小就行,尺寸直接在图像->图像大小,里修改大小就行