18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

网站图片优化

2019-12-03 分享
图片优化:
 
不用图片,尽量用 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 等格式,非常适合用于网络等图片传输。
 
图片懒加载与预加载
图片懒加载的原理就是暂时不设置图片的 src 属性,而是将图片的 url 隐藏起来,比如先写在 data-src 里面,等某些事件触发的时候(比如滚动到底部,点击加载图片)再将图片真实的 url 放进 src 属性里面,从而实现图片的延迟加载
图片预加载,是指在一些需要展示大量图片的网站,实现图片的提前加载。从而提升用户体验。常用的方式有两种,一种是隐藏在 css 的 background 的 url 属性里面,一种是通过 javascript 的 Image 对象设置实例对象的 src 属性实现图片的预加载。相关代码如下:
为什么要将图片转为base64格式
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址;
 
 
提升性能: 网页上的每一个图片,都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,base64可以随着 HTML 的下载同时下载到本地.减少https请求。
 
 
加密: 让用户一眼看不出图片内容 , 只能看到编码。
 
 
方便引用: 在多个文件同时使用某些图片时, 可以把图片转为base64格式的文件, 把样式放在全局中, 比如common.css, 以后在用的时候就可以直接加类名, 二不需要多层找文件路径, 会提升效率
 
 
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图