网站优化

记得蛮久之前,图片上传之前没有对它们进行压缩的习惯,导致了站点加载过慢,因为图片大,加载起来自然慢,网站优化其实有很多方面,这篇文章是关于图片方面的因素的优化,简单来说,尽量压缩图片,减少图片的大小,文件小了加载自然比原来快一点。


TinyPNG

在线无损压缩网站:https://tinypng.com/

一般来说,设计软件比如PS、Sketch等都有图片压缩导出的功能,但对于透明的PNG图片,压缩过后仍然很大,特别是对追求前端性能的开发者来说,图片在不影响画质的情况下把它压缩到最小,而TinyPNG是目前我用的压缩工具,图片保真率最好,体积最小的工具,一直在用

不需要注册就能用的在线图片压缩应用,虽然是国外网站,但跟国内网站没差多少,访问速度很快,这对于上传下载体验很好,使用也非常简单方便,上传图片后,会压缩然后返回下载链接,压缩效果完爆PS等设计软件。


 

 

压缩前后对比
压缩前后对比

Demo图片为网站首页的截图,尺寸为1920*1080,可以看到没有压缩之前图片大小为1.4M,而压缩后变成了436KB,压缩了69%,这个效果是非常理想的,压缩前后画质的话,其实肉眼是看不出的,可以自行打开图片放大进行对比。

全国节点的加载速度:

 

 

数据可能要仔细对比,速度方面还是有提升的,毕竟1.4M和436KB的加载,毋庸置疑,小图片的加载肯定比大图片快,为了更直观的感受到两张图片加载速度的差异,简单做了个HTML页面,引入这2张图片,查看加载速度情况:

本地测试
本地测试

在禁止缓存的情况下,可以看到压缩前加载耗时801MS,而压缩后耗时399MS,所以,养成图片压缩的习惯,不管你是将图片上传到对象存储还是直接上传到服务器,在上传之前对图片体积进行压缩,图片的加载速度自然也就快了一些。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇