- 不用图片,尽量用css3代替。 比如说要实现修饰效果,如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中都可以用CSS达成。
- 使用矢量图SVG替代位图。对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!
- 使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。基本上,内容图片多为照片之类的,适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。GIF基本上除了GIF动画外不要使用。且动画的话,也更建议用video元素和视频格式,或用SVG动画取代。
- 按照HTTP协议设置合理的缓存。
- 使用字体图标webfont、CSS Sprites等。
- 用CSS或JavaScript实现预加载。
- WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩,动态、静态图片,压缩比率优于GIF、JPEG、JPEG2000、PG等格式,非常适合用于网络等图片传输。
笔记 前端需要了解的优化图像的方法
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
理解SVG座标系统和变换: transform属性
auragreen
2020-07-07 11:52:01
svg转成jpg/png图片,svg含跨域图片
web_xiaolei
2020-07-07 04:13:51
Vue:ElementUI怎么引入外部svg图标
xuxuan1997
2020-07-05 17:19:23
js 利用canvas标签画一个存储按钮(附加svg动态按钮)
csmzl
2020-07-05 10:25:46
thymeleaf使用自定义组件
熊二吃屁
2020-07-05 08:20:13
svg path的A指令
cswolf
2020-07-05 04:28:45
d3.js 生成 svg tree 树形结构图
冷色系微风爱丶
2020-07-04 23:41:09
Android vector标签 PathData 画图超详解(转载)
沉璧浮光
2020-07-04 11:32:20
VectorDrawable 怎么玩(转载)
沉璧浮光
2020-07-04 11:32:20
Android 5.0学习之AnimatedVectorDrawable(转载)
沉璧浮光
2020-07-04 11:32:20
svg中path标签的用法(转载)
沉璧浮光
2020-07-04 11:32:20
vue+svg实现动态圆形进度条
冬天爱吃冰淇淋
2020-07-03 02:21:34