前端图片优化方案-白红宇

前端图片优化方案

阅读量：6155 次

发布时间：2019-06-21

本文共 1034 字，大约阅读时间需要 3 分钟。

在知乎上看见的一个回答（），自己做一些测试以及添加一些自己的理解整理成章。

1.使用base64编码代替图片

Base64目前主要用于HTML5、移动开发等不考虑IE6的场景中。图片大小不宜超过2KB，不然编码出来的会很长。

使用方法：

或者CSS中

background-image: url(ase64编码后的字符串);

2.使用css sprite合并图片

在线css sprite：http://css.spritegen.com/

图片不宜太大

3.图片延迟加载

在我的项目中，使用的是angular框架，用的第三方插件me-lazy-load.js对界面多图进行懒加载。

使用方法：

4.使用css、svg、canvas或iconfont代替图片

CSS可以使用为元素before、after实现简单的绘图

如图：

ul.create-nav>li span:after, ul.create-nav>li span:before {    content: " ";    height: 0;    width: 0;    border-style: solid;    border-width: 20px 5px 20px 25px;    border-color: transparent;    pointer-events: none;}ul.create-nav>li span:before {    position: absolute;    left: 0;    border-left-color: #F3F3F4;}ul.create-nav>li span:after {    position: absolute;    right: -20px;    z-index: 1;    border-left-color: #D7D7D7;}

5.加载对应尺寸

这是针对不同终端，加载符合屏幕大小的不同尺寸的图片，主要针对移动端。

6. 预加载

待续...

7.更好的图片格式

待续...

转载于:https://www.cnblogs.com/echo2016/p/5776511.html

你可能感兴趣的文章