Comments (6)
借助第三方工具压缩图片;
图片使用jpg格式;
雪碧图减少http请求;
svg,canvas画图;
字体库代替图片;
图片懒加载/延迟加载;
静态资源缓存;
开启cdn网络加速。
from fe-weekly-questions.
- 选择合适的图片格式(jpg bmp webp gif 。。。)
- 合并 (雪碧图)
- 压缩 (各种压缩工具)
- 选择不同大小的图片(网络,屏幕。。。)
- 逐步加载
- 懒加载
- 或许不需要图片(其他形式替代)
from fe-weekly-questions.
使用base64编码代替图片
场景:适用于图片大小小于2KB,页面上引用图片总数不多的情况
原理:将图片转换为base64编码字符串inline到页面或css中
优势:减少http的请求次数,并可以放到后台数据库中,只传输字符串,有较多的构建工具可以直接实现
劣势:这种方法仅限于图片总数较少,而且图片大小小于2KB的情况。否则图片字符串会变得很长很长
合并图片sprite(雪碧图)
场景:任何用到页面图片的场景
原理:将多个页面上用到的背景图片合并成一个大的图片在页面中引用
优势:可以有效的较少请求个数,而且,而不影响开发体验,使用构建插件可以做到对开发者透明。适用于页面图片多且丰富的场景。
劣势:生成的图片体积较大,减少请求个数同时也增加了图片大小,不合理拆分将不利于并行加载
使用css、svg、canvas或iconfont代替图片
css代替图片
场景:适用于移动端或较高级的浏览器,而且绘制的图案较为简单。
原理:css方式可以用来绘制相对简单的团来代替图片,一般使用before或者after伪元素来丰富图案的复杂度。
优势:具有实现简单,图片体积小的特点,可以实现简单的动态效果
劣势:也受限于css的兼容性特点,绘制复杂图案困难
svg的描述和适用场景上文已说明。
canvas代替图片
场景:需要高性能的图片或动画
原理:适用html5的canvas元素绘制创建图片
优势:整个就是画2D图形时,页面渲染性能比较高,页面渲染性能受图形复杂度影响小,性能只受图形的分辨率的影响,画出来的图形可以直接保存为 .png 或者 .jpg的图形,适合于画光栅图像或者不规则图形
劣势:没有dom操作,必须依赖定时器,文字渲染性能差,不能添加描述(title属性什么的),兼容性限制
iconfont是一种web字体来代替图片的解决方案: 场景:代替页面上色彩单一的图片 优势:兼容性好,应用广,目前使用也很广泛 劣势:但是由于字体的颜色设置单一,只能用于代替颜色单一的图片,对于色彩复杂的图片,iconfont处理起来比较困难
响应式图片
场景:不同终端对同一个图片需求不一样,可以根据终端加载不同的图片来节省没必要的流量
原理:通过picture元素,picturefill或平台判断来为不同终端平台输出不同的图片
优势:减少没必要的图片加载,灵活控制,慢速用户加载小图片不至于加载失败,移动端没必要加载大尺寸图片等,可以通过不同方式兼容所有浏览器
劣势:无法避免图片的加载过程,图片本身没优化
图片压缩
场景:在不得不加载图片的前提下,要进一步提升优化效果,只能通过有损或无损压缩来减少图片的大小。
原理:对图片进行无损、有损压缩,转为压缩后图片来实现
优势:减少图片加载流量,效果比较明显
劣势:服务器和浏览器压力增大,而且服务器需要额外的服务支持
更好的图片格式
场景:之前说到webp、bpg、sharpP等新图片格式具有更好的压缩比,可以使用这类新型的图片来代替原始图片
原理:对图片格式转换,在画质可以接受的情况下达到更好的压缩比效果
优势:减少图片加载流量,效果比较明显
劣势:服务器和浏览器压力增大,而且服务器需要额外的服务支持,格式转换要考虑浏览器的兼容性
图片压缩方法补充
压缩图片方式比较多,这里不一一列出,例如下面的部分工具平台:
Kraken (Web)主页: https://kraken.io/
智图主页: http://zhitu.tencent.com/支持原图png转为jpeg和webp(目前不支持bpg),并提供各种压缩比压缩,目前在tx内部广泛使用。
目前bpg格式图片也有部分公司在试用。这方面也可以尝试下。
from fe-weekly-questions.
PP鸭效果不错,就是收费有点贵……
from fe-weekly-questions.
PP鸭效果不错,就是收费有点贵……
还收费,不好啊
from fe-weekly-questions.
@LuckyWinty
https://kraken.io/
这也是要收费的,tinypng也是,大的图片就不能用了。
腾讯的智图一直都是beta版本,还是win7的,下载了也不能用。
from fe-weekly-questions.
Related Issues (20)
- 如何优化SPA应用的首屏加载速度慢的问题? HOT 6
- Reflect 对象创建目的? HOT 1
- 说说闭包 HOT 2
- 说说事件委托 HOT 4
- 内部属性 [[Class]] 是什么? HOT 3
- 什么是堆?什么是栈?它们之间有什么区别和联系? HOT 1
- JavaScript 有几种类型的值?你能画一下他们的内存图吗? HOT 1
- undefined 与 undeclared 的区别?
- 说几条写 JavaScript 的基本规范? HOT 1
- isNaN 和 Number.isNaN 函数的区别? HOT 1
- 什么情况下会发生布尔值的隐式强制类型转换? HOT 2
- 实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后 退时正确响应。给出你的技术实现方案? HOT 1
- 如何封装一个 javascript 的类型判断函数? HOT 2
- 剩余参数和 arguments 对象的区别是什么? HOT 2
- 介绍下 BFC、IFC、GFC 和 FFC HOT 1
- 为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片? HOT 6
- babel 中的preset 和 plugin代表什么,有什么区别?
- vuex中直接修改state 与 commit来修改state的区别
- 请用 js 去除字符串空格? HOT 1
- 说说TS中type和interface的区别? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-weekly-questions.