web前端压缩图片方法——加快页面加载速度
来源:互联网 发布:单片机 cpu 编辑:程序博客网 时间:2024/05/16 23:37
对于web前端页面开发,图片是一个很重要的组成部分。为了达到图文并茂的效果,我们希望页面中能有更多的图片,但是从页面加载的速度讲,过多过大的图片都会拖慢加载速度。于是对于图片的压缩处理就显得特别重要。下面分享一下我目前使用的几个处理方法。
1.七牛服务器提供的压缩图片的方法
我们公司APP目前使用的图片和视频文件都存在七牛服务器上,作为目前国内知名的云存储服务商,七牛官方提供了很好的图片处理API。 一般来讲,用户看到的文字、图片等都是由运营上传的,如果运营直接在后台上传了一张很大的图片,那么前端页面在加载的时候就会较慢,有可能图片会有明显的加载过程,这个时候,就需要我们对图片进行处理了,比如我们公司的logo图标,地址是:点击打开链接。尺寸是1024*1024,大小是80.7kb,但是我只是需要在微信分享链接中使用这个图片,根本不需要这么大尺寸的图片,那么就很有必要压缩一下了,比如在这个图片的链接地址后面添加参数:?imageView2/2/w/300,就能够把这张图片压缩到300*300,大小为28.9kb。这样这张图片的加载速度就会加快很多。
2.使用图片压缩软件
软件地址:图片压缩工具。直接将图片上传就可以压缩图片,很适合运营用。
3.图片使用懒加载技术
可使用lazyload.js插件,对于DOM中本来就有的<img>标签,懒加载没有任何问题,但是在我做的一个项目中,项目中的图片是用underscore.js模板加载的,实际调试发现lazyload.js未实现图片懒加载,这个问题后续解决了再写上来。如果有童鞋知道怎么解决的,请不吝赐教。
阅读全文
1 0
- web前端压缩图片方法——加快页面加载速度
- web前端压缩图片方法——加快页面加载速度
- web前端优化(加快加载速度,由点滴做起)
- Javascript(加快脚本加载速度的方法:压缩脚本文件。)
- 如何加快页面加载速度?
- 如何加快页面加载速度?
- Web前端性能优化——如何提高页面加载速度
- Web前端性能优化——如何提高页面加载速度
- Web前端性能优化——如何提高页面加载速度
- Effective前端7:加快页面打开速度
- 如何加快HTML页面加载速度
- 如何加快HTML页面加载速度
- 如何加快HTML页面加载速度
- 如何加快web 页面的访问速度
- Web前端——图片压缩与合并
- 加快MyEclipse加载速度
- 提高Web端页面加载速度的6个方法
- web 页面加载速度优化
- UITableView与UIPageViewController的UIPanGestureRecognizer手势冲突解决办法
- 基本注解
- maven(五) 国内镜像(maven下载慢的解决方法)
- Foxmail之邮件存档
- 二叉树删除节点
- web前端压缩图片方法——加快页面加载速度
- 在507干活的第3天(下)
- 运动控制基本知识
- springboot集成hibernate-jpa方式
- 白话经典算法系列之六 快速排序 快速搞定
- Java基础(四)static与final
- RGB, YUV及相关标准
- hdu1176 免费馅饼 DP
- Android学习日记(yzy):Broadcast Receiver的注册和发送