WEB学习进阶之路-之性能优化五

举报
sujrexia 发表于 2020/07/05 18:18:41 2020/07/05
【摘要】 本章学习图片优化在httparchive中,他会统计网络上资源信息的使用量和请求量,截图时间2020-7-5 10:19先看总请求量截图, 可以看到,桌面数据请求量是2007.7KB,移动端是1851.9KB。再看图片请求量截图 前一张是图片请求大小,桌面端是949.6KB,移动端是886.8KB后一张是图片请求数量,桌面端是29,移动端是27另外一个很有意思的就是请求量下面的增长率,大家发...

本章学习图片优化

httparchive中,他会统计网络上资源信息的使用量和请求量,截图时间2020-7-5 10:19

先看总请求量截图,

 image.png

可以看到,桌面数据请求量是2007.7KB,移动端是1851.9KB

再看图片请求量截图

 image.png

image.png

前一张是图片请求大小,桌面端是949.6KB,移动端是886.8KB

后一张是图片请求数量,桌面端是29,移动端是27

另外一个很有意思的就是请求量下面的增长率,大家发现没有,页面的请求总量和图片请求大小总理都是正增长,而请求数量却是负增长,说明什么呢?

说明的是我们这一张的内容的必要性,哈哈

为什么要讲图片优化

1. 图片请求总量在整个网站的请求总量的占比相当恐怖,已经有40%以上的占比。

2. 图片请求次数的下降说明整个行业都在做咋们这章要说的

3. 优化图片,可以提高用户的体验,对于手机端,可以节省用户流量

4. 提高网站的性能,节省宝贵的资源,给公司节省经费。

 

网页上通常用的图片格式有:

JPEG/JPGPNGWebpSVGBase64

图片优化的技术有:

CSS Sprites,合理使用相关格式的图片,下面我们就优先学习下几种常用格式的图片的优势和缺点,并且说明比较适合的使用场景

JPEG/JPG

优点:高质量的有损压缩;单个图以24存储,可以表示1600多万中颜色;将压缩比率设置到50%时,原图的质量可以保持60%以上。

缺点:不支持透明图层;处理矢量图,logo等这些线条感强,颜色对比强烈的图片时,由于太模糊无法胜任这种场景。

应用场景:网站的大图展示区,比如向广告,公司介绍等等。

PNG

png可以分为png-8png-24png-8顾名思义,最多支持256种颜色,而png-24可以支持1600万种颜色。

优点:无损压缩高保真;支持透明图层;比jpg有更好处理色彩的能力,对线条处理的更加细腻。

缺点:质量太大

应用场景:logo

SVG

优点:质量小,可压缩性强;放大不失真;可以直接写入html网页,减少http请求量;可编程性。

缺点:浏览器渲染性能损害高,可编程性。

可编程性既是优点也是缺点是不是很有趣,对于会的人它是把利器,对于不会的人又要花时间和精力去学习一门新技术,所谓成也萧何败也萧何。

应用场景:适配各种屏幕,从手机到PC,到桌面端一图解决。

Base64

优点:可编码性;可以直接写入html网页,减少http请求。

缺点:编码之后图片质量变大

应用场景:小图标使用场景;图片可直接入库场景(例如通讯录头像);

WebP

优点:支持透明图层;支持动态图;体积小;

看看官网的介绍:

PNG 相比,WebP 无损图像的尺寸缩小了 26%。在等效的 SSIM 质量指数下,WebP 有损图像比同类 JPEG 图像小 25-34%。 无损 WebP 支持透明度(也称为 alpha 通道),仅需 22% 的额外字节。对于有损 RGB 压缩可接受的情况,有损 WebP 也支持透明度,与 PNG 相比,通常提供 3 倍的文件大小。

缺点:支持的浏览器太少,需要过多的兼容。

应用场景:支持大多数场景,在未来浏览器中,可以尝试多个场景。

Webp的兼容方式

 

一种是在前端判断是否支持Webp,图片生产时,直接生成多种格式,前端根据情况选择使用图片比如图片 1.jpg.webp;后台存储两张,一张是1.jpg,一张是1.jpg.webp,前端可以根据支持情况截取字符串,显示图片

另外一种方式就是读取请求头,比如accept-type或者content-type判断是否又image/webpmime,根据情况返回相关格式的图片。

CSS Sprites

优点:减少http请求;减少图片大小

缺点:使用过程稍微麻烦点,不像其他类型的图片即插即用

应用场景:网站或者管理端页面的按钮等。


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。