前端优化(一)：图片处理

最新推荐文章于 2024-05-11 14:59:07 发布

AldarLin

最新推荐文章于 2024-05-11 14:59:07 发布

阅读量2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34416331/article/details/103691429

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

2.3、使用html5 canvas绘画图形

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">&#xe63d;</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; //滚动条距离顶部高度
    
    // 加载完成后卸载滚动事件，避免一直触发
    if(n == 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编码

实现图片懒加载

AldarLin

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端优化(一)：图片处理

图片处理是前端项目中无可缺少的一个重要环节，过大或过多的图片都会导致页面加载缓慢。常用的方式有：1. 图片压缩 2. 减少http请求 3. 图片懒加载 4.图片Base64压缩一、图片压缩1.1 解析1.2很好用的图片压缩网站：二、减少 Http 请求2.1 使用精灵图（雪碧图）2.1.1 什么是精灵图2.1.2 精灵图的作用2.1.3 如何使用精...
复制链接

扫一扫