锐客网

  1. 首页 > it技术 > >

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：静态资源如何加速？

    推荐阅读


    上一篇：PEER|Python整理PEER所下载的地震波源数据——提取地震波至txt+生成地震波反应谱

    下一篇：区块链的分类