前端优化一： 图片处理

图片处理是前端项目中无可缺少的一个重要环节，过大或过多的图片都会导致页面加载缓慢。常用的方式有：1. 图片压缩   2. 减少http请求  3. 图片懒加载    4.图片Base64压缩

一、图片压缩

1.1 解析

1.2 很好用的图片压缩网站：

二、 减少 Http 请求

2.1 使用精灵图（雪碧图）

2.1.1 什么是精灵图

2.1.2 精灵图的作用

2.1.3 如何使用精灵图

2.2 使用SVG图标代替图片

2.2.1 什么是SVG图标

2.2.2 SVG图标的优势

2.2.3 如何使用SVG图标

2.3、使用html5 canvas绘画图形

三、图片懒加载

3.1 什么是图片懒加载

3.2 原理

3.3 如何使用图片懒加载

3.3.1 使用jq的项目：

3.3.2 使用Vue框架的项目

四、图片Base64压缩

4.1 什么是图片Base64压缩

4.2  什么时候用Base64压缩图片

4.2.1 条件

4.2.2 优势和弊端

4.3 如何将图片Base64

4.3.1 使用网站进行转换

4.3.2 使用url-loader，在打包时自动对限制大小的图片进行Base64转换

一、图片压缩

1.1 解析

当用户访问页面时，浏览器会通过get请求的方式获取图片和文件资源，图片的大小和数量直接影响了页面的加载速度和渲染速度。通常我们会使用第三方工具来压缩图片，达到降低图片大小的目的。

压缩前，可以看到每一张图片的大小都是在80k，而在压缩后，所有图片大小都变为原来的30%左右，这无疑会大大降低用户访问图片消耗的时间。

 

1.2 很好用的图片压缩网站：

智图：一个图片优化平台

TinyPNG: 一个良心压缩PNG的神站 ： 一次性最多放20张图片，没张图片最大不能超过5M

 

二、 减少 Http 请求

由于 http 是基于 tcp 的可靠协议，一个http请求发出后，需要有建立连接、发送请求、接收响应、断开请求这四个过程，而这个过程较为耗时。故而减少http请求数目，做到用更少的请求，获取更多的图片，能够有效提高前端加载速度。减少Http请求有以下几种方法：

2.1 使用精灵图（雪碧图）

2.1.1 什么是精灵图

精灵图是一张由很多图片组合而成的图片，他们之间保持有序规则的排列。前端开发者可以通过控制background-position动态显示部分图像的方式，做到浏览器只加载一张图片，却能用在多个地方。例如：

           

2.1.2 精灵图的作用

很多元素丰富的网页，在首次加载时往往需要加载很多的小图片。每一个小图片的加载都会形成一个get请求，这样会导致：

  • 服务器负载上升
  • 耗费大量的时间在建立http连接

为了解决这一问题，采用了精灵图这一技术，实现加载一张大图来替代N张小图片的做法，减少Http请求的时间，缓解加载时间过长和加载图片过多从而影响用户体验的问题

 

2.1.3 如何使用精灵图

1）制作精灵图的注意事项

精灵图通常由UI制作，我们也可以用PS自己制作。但是要注意精灵图中每个元素的间距必须相等，这样才能使用css批量进行操作。若是不相等，我们使用批量图片时就会出现位置难以预估的问题。

 

2）精灵图的使用

使用 CSS 的 background-image, background-repeat, background-position组合进行背景图片的定位。依靠background-position修改背景图片的定位，实现不同的图片显示。

github项目地址： 实现精灵图显示的例子

在线生成精灵图：CSS Sprites Generator

 

2.2 使用SVG图标代替图片

2.2.1 什么是SVG图标

  • 指可伸缩矢量图形
  • 用来定义用于网络的基于矢量的图形
  • XML 格式定义图形
  • 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • 是万维网联盟的标准
  • 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

2.2.2 SVG图标的优势

  • SVG 图像可通过文本编辑器来创建和修改；
  • SVG 图像可被搜索、索引、脚本化或压缩；
  • SVG 是可伸缩的；
  • SVG 图像可在任何的分辨率下被高质量地打印；
  • SVG 可在保证图像质量的情况下被放大；

2.2.3 如何使用SVG图标

1）访问阿里矢量图标库

打开下载的压缩文件：

2）格式选择

提供了三种下载方式，一般选择Font class，使用这种格式下载后，若要修改无需修改类名。

3）在项目中使用

<div class="svg-containter"><!-- 使用font-class --><i class="iconfont icon-RectangleCopy"></i>使用font-class显示图标
</div>
<div class="svg-containter"><!-- 使用unicode --><i class="iconfont"></i>使用unicode显示图标
</div>

github项目地址：简单的svg使用例子

 

2.3、使用html5 canvas绘画图形

目前canvas应用很多，它可以使用脚本javascript来绘制各种图表、动画等点击查看更多html5 canvas

 

三、图片懒加载

3.1 什么是图片懒加载

页面上可能有很多图片素材，若在浏览器渲染时要全部加载会使得浏览器变得很慢。所以对于展现丰富，图片过多的页面，我们应做以下两种方式：

  • 对图片先设置默认图片，当图片加载完成时，替换掉默认图片
  • 在页面中未出现在可视窗口内的图片先不做加载，等用户滚动到可视区域后再去加载。这和预加载使用原理是相反的。

 

3.2 原理

  • 将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（可用其他命名）属性指向真实的图片。
  • src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。
  • 当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />

 

3.3 如何使用图片懒加载

3.3.1 使用jq的项目：

1）使用手撸代码

gitHub项目：简单的懒加载例子

核心代码：

// index.html
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""><img src="default.jpg" data-src="http://file02.16sucai.com/d/file/2014/0704/e53c868ee9e8e7b28c424b56afe2066d.jpg" alt=""><img src="default.jpg" data-src="http://file02.16sucai.com/d/file/2014/0829/372edfeb74c3119b666237bd4af92be5.jpg" alt=""><img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""><img src="default.jpg" data-src="http://b2-q.mafengwo.net/s5/M00/91/06/wKgB3FH_RVuATULaAAH7UzpKp6043.jpeg" alt=""><img src="default.jpg" data-src="http://e.hiphotos.baidu.com/zhidao/pic/item/0bd162d9f2d3572c75676abf8a13632763d0c3c8.jpg" alt=""><img src="default.jpg" data-src="http://image.uisdc.com/wp-content/uploads/2014/02/ea4b4111a08b342a40d11d89a349b20d_m.jpg" alt="">
index.js
// 实际想绑定在 scroll 事件上的 handler
function lazyload) { //监听页面滚动事件var seeHeight = document.documentElement.clientHeight; //可见区域高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度// 加载完成后卸载滚动事件，避免一直触发ifn == num ) $window).off"scroll");for var i = n; i < num; i++) {if img[i].offsetTop < seeHeight + scrollTop) {if img[i].getAttribute"src") == "default.jpg") {img[i].src = img[i].getAttribute"data-src");}n = i + 1;}}
}

2）使用插件

LazyLoad: 基于jq的图片懒加载插件

 

3.3.2 使用Vue框架的项目

1）安装vue-lazyLoader

npm i vue-lazyload -D

2）使用

用法： vue-lazyload npm

github： 使用vue-lazyload插件实现图片懒加载

 

四、图片Base64压缩

转载地址：前端攻略：玩转Base64编码

4.1 什么是图片Base64压缩

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。每一个图片都需要消耗Http请求，从服务器将图片下载到本地。若是图片可以随着html文件下载一起下载到本地，则可以减少http请求，加快图片访问速度。

例如:

<img src="https://img-blog.csdnimg.cn/2022010611220948720.gif">

4.2  什么时候用Base64压缩图片

4.2.1 条件

使用Base64压缩图片需要满足几个条件：

  • 适用于图片小于2k：Base64转换后的文件会比图片略大，同时Base64转换后的字符串过长，会极大影响CSS文件的阅读性
  • 适用于复用高，且基本不会变动的图片
  • 适用于无法被做成雪碧图的图片

4.2.2 优势和弊端

优势：

  • 无额外请求
  • 对于极小或者极简单图片
  • 可像单独图片一样使用，比如背景图片重复使用等
  • 没有跨域问题，无需考虑缓存、文件头或者cookies问题  

弊端:

  • 使用Base64转换后的文件，一般比原图片大，但经过压缩后，大小基本相同
  • 图片请求少了，但是 HTML 文件本身尺寸会变大，会影响首屏加载。由于css文件加载直接影响到渲染，而图片加载是异步加载，并不会导致长时间的空白页
  • base64是包含在html文件或css文件中的，若文件频繁变动，会导致base64的图片无法缓存。相比于图片缓存，base64转换的图片无疑更容易被再次加载
  • 有IE兼容性问题，IE 8 以下不支持 data url，IE 8 开始支持 data url，却有大小限制，32k（未测试）

 

4.3 如何将图片Base64

4.3.1 使用网站进行转换

菜鸟工具：图片转BASE64编码

 

4.3.2 使用url-loader，在打包时自动对限制大小的图片进行Base64转换

在webpack中的配置方式：

module: {rules: [...{test: /.png|jpg|gif|jpeg)$/,use: [{loader: 'url-loader',options: {limite: 2048}}]},{test: /.woff|woff2|eot|ttf|otf)$/,use: [{loader: 'url-loader',options: {limite: 2048}}]}]},

 

参考：

web前端优化之图片优化

前端攻略：玩转Base64编码

实现图片懒加载

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注