web资源优化-图片篇(一)

序言
【web资源优化-图片篇(一)】对于web前端开发来说,都会碰到各种各样的性能问题,今天主要聊一下图片优化的见解和总结,有些语言组织不到位的地方,请大家多多担待。
随着web的发展,从之前的 From表单>文字网站>多样化的网站,网站资源所消耗的流量也变得越来越大,同时,随着图片过多,一个网站渲染图片所消耗的性能也是不小。所以我们考虑到的是合理性的优化图片,主要从性能方面考虑。
一、压缩图片+响应式尺寸
介绍:
压缩图片可以说是比较常见,也是经常提起的一种方式。压缩图片虽然是一种常见的方式,但是也是一种有兼容需要的方法。压缩的前提也是尽量在不影响用户查看的情况去压缩,也就是所说的失真度要在合理范围。一般来说,压缩图片可以让ui来以基准屏(比如iphone6/7/8)的大小压缩,但是这里比较合适的还是使用文件系统来动态压缩比较好(假如有,或者是用类似阿里云oss),根据不同屏幕大小来压缩,能够合理性的提供所需要的文件。
优点:减少图片大小,提高加载速度。
缺点:单一图片压缩不好兼容多分辨率,有失真的可能。(使用文件系统动态压缩无此缺点)。
二、图片格式选择
介绍:根据曾看过的多篇博客介绍,不同的图片格式对于浏览器来说,性能差别还是比较大的。先说说通用的图片格式,有 jpg, jpeg, png, gif, webp(兼容需要考虑), svg, base64等,但是今天就说这几种通用的(主要是我一般用这几种,手动呲牙)。可以根据不同场景选择适应的图片格式。
1. jpg、jpeg 介绍:JPEG图片格式的设计目标,是在不影响人类可分辨的图片质量的前提下,尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息,也即是进行了有损压缩。
优点:支持隔行渐进显示、尺寸小、加载快。
缺点:不支持透明、有损压缩。
2. png 介绍:png文件分为png8(8位透明png)、png24(256色png)、png32(多阶透明png),png的有点在于使用位图实现web上的透明图片,以实现比较好的体验。
优点:
支持256色调色板技术以产生小体积文件
支持 alpha 透明
支持图像亮度的gamma校正信息。- 支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息
使用无损压缩。
PNG新标准允许在一个文件内存储多幅图像。
缺点:间隔渐进显示在某些方面会影响用户体验。
3. webp 介绍:webp是一种比较新的图片格式,而新嘛,可以说肯定会有考虑其他文件格式的缺点,所以,对于webp来是就是优点了(手动狗头)。从 webp 使用的一些算法等可以知道,webp 不仅压缩率高,而且解码速度快,支持 alpha 透明,且拥有着我们肉眼几乎无法识别的图像质量差异等优点,在一些需要更大压缩比的场景下被广泛使用。但是,webp有个很大的问题,兼容度不如其他的格式如 jpg, png ,webp 目前支持的最好的是 chrome 浏览器,因为它本身就是 google 推出的图片格式。
优点:压缩率高、解码速度快、支持 alpha 透明、图像质量差异小。
缺点:兼容度有限。
4. gif 介绍:GIF(Graphics Interchange Format)的原义是“图像互换格式”,GIF文件的数据,是一种基于LZW算法(串表压缩算法)连续色调的无损压缩格式。是目前web网页中十分常用的一种动画文件格式。
优点:保证图像质量的同时体积变得很小、动画效果、有限的透明度。
缺点:不适合高质量的图片。
5. svg 介绍:SVG 是 W3C 推荐标准, 于 2003 年 1 月 14 日成为 W3C 推荐标准。什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
优点:
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML
缺点:兼容度有限。
三、精灵图(雪碧图)
介绍:通过资源加载分析可以看到,图片加载虽然不是阻塞式加载,但是同时加载的图片是有限的(根据不同浏览器不同),同时,加载图片是要先去访问图片,解析路径寻找到具体的图片(tcp/ip又来了?),然后拉取图片资源,最后才加载渲染。所以,我们是不是可以通过减少这种情况,从而提高体验效果呢?精灵图就根据这种情况出来的,很容易理解,多个小图片一直重复这种过程太浪费时间。
例如:出门的时候发现没带手机(手机可是半条命纳,命都不要了?),只能返回去拿手机。然后再次出门后发现,嘿!好家伙,口罩没带(记得出门一定要带口罩),然后只能再次折回去拿口罩。
那~其中是不是可以优化一下呢,一次性拿呢。
所以,我们可以出门前先把要带出门的东西都放包里,然后背着包出门。这也是精灵图的原理。
优点:通过减少http请求减少资源获取的时间、集中管理小图片。
缺点:中大图片不适合、精灵图大小需要控制(避免太大造成的资源加载慢)。
四、字体图标
介绍:可以缩放的矢量图标。你可以使用CSS对它们进行修改,如:大小,颜色,阴影等。
优点:轻量、灵活,可用css修改、兼容性强。
缺点:单色(可通过css属性改变)。
五、base64
介绍:base64不是一种图片格式,只是将图片转换为base64编码字符串插入到页面或css中,在同页面图片多的时候不适合内嵌到页面代码中,可选择后端传输然后插入到页面(好像有点本末倒置了?)。
优点:减少http的请求次数(一定场景)。
缺点:超过2KB的图片转换成base64字符串会很长。
六、懒加载
介绍:在一个页面,特别是带图片的列表页面里边,图片非常多,就会看到图片加载很慢,带有闪屏,白屏等情况,对于这种情况,我们怎么去优化呢。如果有注意到各大电商平台图片加载情况就会发现,他们运用了一种有选择性的加载方法,通常优加载看得见的范围内的图片,这种方法就叫懒加载。
优点:用户体验好、有效的分配加载资源、减低服务器的压力。
缺点:需要一定的处理逻辑,处理不好容易出现图片不加载的情况,可选择评价比较高的插件。
七、渐进显示
介绍:渐进显示,顾名思义,逐渐显示出来,从模糊的图片加载成清晰的图片。这里有两种思路。
通过特殊的方式让浏览器一部分一部分的渲染出来。通过看480p、720p、1080p图片可以看出一些问题,会发现1080p抽掉一些像素点就变成了720p,再抽掉一下像素点就变成了480p。所以,它们是不是可以先加载480p的像素点,然后再加载到720p的像素点,最后加载全部像素点呢,既然有思路了,那就可以解决了。
通过多张图片切换,一般来说有两张图片,一张模糊的压缩度高的,一张真正需要展示的图片,总共两张图片,通过技术手段让模糊的先展示,然后再等待清晰的图片加载完毕后再切换,通过这种方法产生过渡效果,从而提升用户体验。这种方法有一定的局限性,比如很多图片的场景的不建议用这种方式。
八、图片拆分
介绍: 如果大家有用类似 ps 的工具绘画过图就知道,一张设计稿是由多个图层组合在一起的,从而产生了特殊的效果。那么,思路又来了,我们可不可以把图片的图层放到页面里边再拼接起来呢?答案明显是可以的,把一张图片拆分成多张图片,按照它们的优先级加载渲染,然后按层级合并,最终形成需要的效果。
图例:
web资源优化-图片篇(一)
文章图片

web资源优化-图片篇(一)
文章图片

web资源优化-图片篇(一)
文章图片

优点:通过切分得到的多张图片一起加载比一张图片加载快、用户体验好。
缺点:不适合太复杂的图片。
九、CDN 加速
介绍:CDN(Content Delivery Network/Content Distribution Network,内容分发网络)。简单来说,CDN 就是将静态的资源分发到,位于多个地理位置机房中的服务器上,因此它能很好地解决数据就近访问的问题,也就加快了静态资源的访问速度。
优点:加载快,用户体验好
缺点:费钱
参考
web资源优化-图片篇(一)
web前端图片极限优化策略_Bob的专栏-CSDN博客
前端性能优化之图片优化_web前端开发-CSDN博客
SVG 教程 | 菜鸟教程
几种常见图片文件格式的优缺点_woaidadaima1的博客-CSDN博客_各种图片格式的优缺点
寒江孤影:CDN:静态资源如何加速?

    推荐阅读