免费刷金币,请点击这里
TE社区 > 前端技术
客服QQ:1206116161

前端的图片优化的6种方案

A dream 于 2016-05-09 23:22:08 创建话题
(3732)
(1)
举报



1、使用base64编码代替图片

场景:适用于图片大小小于2KB,页面上引用图片总数不多的情况 原理:将图片转换为base64编码字符串inline到页面或css中 优势:减少http的请求次数,并可以放到后台数据库中,只传输字符串,有较多的构建工具可以直接实现 劣势:这种方法仅限于图片总数较少,而且图片大小小于2KB的情况。否则图片字符串会变得很长很长


2、合并图片sprite(雪碧图)

场景:任何用到页面图片的场景 原理:将多个页面上用到的背景图片合并成一个大的图片在页面中引用 优势:可以有效的较少请求个数,而且,而不影响开发体验,使用构建插件可以做到对开发者透明。适用于页面图片多且丰富的场景。 劣势:生成的图片体积较大,减少请求个数同时也增加了图片大小,不合理拆分将不利于并行加载


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

css代替图片

场景:适用于移动端或较高级的浏览器,而且绘制的图案较为简单。 原理:css方式可以用来绘制相对简单的团来代替图片,一般使用before或者after伪元素来丰富图案的复杂度。 优势:具有实现简单,图片体积小的特点,可以实现简单的动态效果 劣势:也受限于css的兼容性特点,绘制复杂图案困难svg的描述和适用场景上文已说明。

canvas代替图片

场景:需要高性能的图片或动画 原理:适用html5的canvas元素绘制创建图片 优势:整个就是画2D图形时,页面渲染性能比较高,页面渲染性能受图形复杂度影响小,性能只受图形的分辨率的影响,画出来的图形可以直接保存为 .png 或者.jpg的图形,适合于画光栅图像或者不规则图形 劣势:没有dom操作,必须依赖定时器,文字渲染性能差,不能添加描述(title属性什么的),兼容性限制

iconfont是一种web字体来代替图片的解决方案

场景:代替页面上色彩单一的图片 

优势:兼容性好,应用广,目前使用也很广泛 

劣势:但是由于字体的颜色设置单一,只能用于代替颜色单一的图片,对于色彩复杂的图片,iconfont处理起来比较困难


4、响应式图片

场景:不同终端对同一个图片需求不一样,可以根据终端加载不同的图片来节省没必要的流量 原理:通过picture元素,picturefill或平台判断来为不同终端平台输出不同的图片 优势:减少没必要的图片加载,灵活控制,慢速用户加载小图片不至于加载失败,移动端没必要加载大尺寸图片等,可以通过不同方式兼容所有浏览器 劣势:无法避免图片的加载过程,图片本身没优化


5、图片压缩

场景:在不得不加载图片的前提下,要进一步提升优化效果,只能通过有损或无损压缩来减少图片的大小。

原理:对图片进行无损、有损压缩,转为压缩后图片来实现 优势:减少图片加载流量,效果比较明显 劣势:服务器和浏览器压力增大,而且服务器需要额外的服务支持


6、更好的图片格式

场景:之前说到webp、bpg、sharpP等新图片格式具有更好的压缩比,可以使用这类新型的图片来代替原始图片 原理:对图片格式转换,在画质可以接受的情况下达到更好的压缩比效果 优势:减少图片加载流量,效果比较明显 劣势:服务器和浏览器压力增大,而且服务器需要额外的服务支持,格式转换要考虑浏览器的兼容性


  • 呆到深处自然萌
    - 03月04日 (0)

    啦啦啦啦啦啦,我是卖报的小行家


扫码关注TE官方微博 扫码关注TE官方微博
mac系统中Safari浏览器网页怎么保存至备忘录Notes? AngularJS 中的Promise --- $q服务详解 通过修改Laravel Auth使用salt和password进行认证用户详解 Android实现简单实用的搜索框 在AngularJS中如何使用谷歌地图把当前位置显示出来 Spring Security 图片验证码功能的实例代码 javascript实现的动态文字变换 SQL Update多表联合更新的方法 ASP.NET MVC实现多个按钮提交的方法 jQuery实现一个简单的轮播图 jQuery实现点击按钮文字变成input框点击保存变成文字 vue-router路由简单案例介绍 .NET 缓存模块设计实践 python将人民币转换大写的脚本代码 关于 Laravel Redis 多个进程同时取队列问题详解 Linux 下java jps命令使用解析详解 基于循环神经网络(RNN)实现影评情感分类 jQuery无刷新上传之uploadify3.1简单使用 有潜在危险的 Request.Form 值避免方法 PHP图片等比例缩放生成缩略图函数分享 Angular2生命周期钩子函数的详细介绍 Android中自定义标题栏样式的两种方法 浅谈python中的面向对象和类的基本语法 苹果Mac OS X系统触控板移动速度怎么设置? php实现的二分查找算法示例 Bootstrap组合上、下拉框简单实现代码 jQuery使用DataTable实现删除数据后重新加载功能 在Android项目中使用AspectJ的方法 使用Vue.js创建一个时间跟踪的单页应用 Android Studio常用快捷键功能说明 Nmap网络安全扫描器说明(4) Python xlrd读取excel日期类型的2种方法 Python常见异常分类与处理方法 php中的比较运算符详解 Spring Cloud重试机制与各组件的重试总结 基于axios封装fetch方法及调用实例 深入理解javascript中return的作用 asp.net开发微信公众平台之验证消息的真实性 web的各种前端打印方法之jquery打印插件jqprint实现网页打印 zblog 文章评论数、浏览数出错的原因 javascript简单实现命名空间效果 php常用字符函数实例小结 JS target与currentTarget区别说明 在线破解各类加密密码地址( 干掉收费cmd5) Jquery+ajax请求data显示在GridView上(asp.net) php如何获取文件的扩展名 javascript基于定时器实现进度条功能实例 详解用webpack2.0构建vue2.0超详细精简版 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介 WPF集合控件实现分隔符(ItemsControl Separator) 详解免费开源的DotNet任务调度组件Quartz.NET(.NET组件介绍之五) js加密解密字符串可自定义密码因子 .NET下文本相似度算法余弦定理和SimHash浅析及应用实例分析 jQuery替换textarea中换行的方法 CSS解决未知高度垂直居中的问题 python字符串常用方法 js函数内变量的作用域分析 微信小程序 modal弹框组件详解 Android中微信抢红包助手的实现详解 搭建SSH时的思考和遇到的几个问题的解决方法 jquery中attr和prop的区别分析 简单谈谈js的数据类型 基于Bootstrap模态对话框只加载一次 remote 数据的解决方法 Android ScrollView实现下拉弹回动画效果 ASP脚本组件实现服务器重启 JQuery切换显示的效果实例代码 健壮的AJAX源码学习应用示例 javascript event 事件解析 在Python中使用判断语句和循环的教程 layer弹出层 iframe层去掉滚动条的实例代码 JavaScript与java语言有什么不同 DB2专家王云谈商业智能BI 解决Mac安装scrapy失败的问题 使用ASP.NET中关于代码分离的实例分享 JS触发服务器控件的单击事件(详解) 微信小程序 input输入及动态设置按钮的实现 PHP提示Cannot modify header information - headers already sent by解决方法 MSSQL优化之探索MSSQL执行计划(转) jquery实现在页面加载的时自动为日期插件添加当前日期 Javascript中的包装类型介绍 js判断背景图片是否加载成功使用img的width实现 r.js来合并压缩css文件的示例 springMVC使用jsp include嵌入页面的两种方法(推荐) jquery选择器使用详解 javascript中递归的两种写法 JS实现左右拖动改变内容显示区域大小的方法 AngularJS快速入门 CentOS7.2服务器上搭建Docker私有镜像仓库操作示例 JavaScript版的TwoQueues缓存模型 完美解决在ThinkPHP控制器中命名空间的问题 Notification消息通知 自定义消息通知内容布局 PHP根据IP地址获取所在城市具体实现 Python 爬虫的工具列表大全 PowerShell Try...Catch...Finally 实现方法 iOS app中无网络页面的添加方法详解 CSS鼠标点击改变图片透明度 JS鼠标3次点击事件实现代码及扩展思路 jQuery实现判断控件是否显示的方法 AngularJS中run方法的巧妙运用 nodejs事件的监听与触发的理解分析 jquery js 获取时间差、时间格式具体代码 VueJS组件之间通过props交互及验证的方式 JQuery EasyUI 数字格式化处理示例 springboot+jsonp解决前端跨域问题小结 Python 多进程和数据传递的理解 sqlserver中将varchar类型转换为int型再进行排序的方法 PHP常见数学函数及BC高精度数学函数用法示例 利用CSS、JavaScript及Ajax实现高效的图片预加载 DEDECMS实现自定义表单(模型)分步提交实现思路 JavaScript数组_动力节点Java学院整理 PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】 原创 Node.js和PHP根据ip获取地理位置的方法 JS组件Bootstrap实现弹出框和提示框效果代码 8种主流NoSQL数据库系统特性对比和最佳应用场景 WebStorm ES6 语法支持设置&babel使用及自动编译(详解) iOS图片拉伸技巧小结 jQuery添加删除DOM元素方法详解 Docker中镜像构建文件Dockerfile与相关命令的详细介绍 Windows系统下安装Mongodb 3.2.x的步骤详解 HTML5 JS压缩图片并获取图片BASE64编码上传 简单了解Python中的几种函数 jQuery中select与datalist制作下拉菜单时的区别浅析 Bootstrap CSS组件之大屏幕展播 基于jquery的9行js轻松实现tab控件示例 asp xml 缓存类 使用百度地图api实现根据地址查询经纬度 浅谈Spring Cloud Ribbon的原理 空格 在ie与在firefox下长度不一样问题 JavaScript中的继承方式详解 php广告加载类用法实例 JS远程获取网页源代码实例 浅谈mysql的索引设计原则以及常见索引的区别 Redis数据库的安装配置方法 Js-$.extend扩展方法使方法参数更灵活 MAC如何保存土豆网的视频找不到下载链接 SQL Server 2016正式版安装配置过程图文详解 flash和asp分页的一点心得与flash脚本 html、css 禁止文字自动换行属性word-break 利用Python开发实现简单的记事本 php构造函数的继承方法 多种方法解决min-width 不兼容ie6的问题 Jquery技巧(必须掌握) JavaScript cookie 跨域访问之广告推广 jquery获取文档高度和窗口高度汇总 ASP生成随机字符串(数字+大小写字母)的代码 angularjs中的单元测试实例 python3读取excel文件只提取某些行某些列的值方法 js实现对table动态添加、删除和更新的方法 window.parent与window.openner区别介绍 jquery默认校验规则整理 JavaScript数据结构和算法之二叉树详解 Linux引导时输入特殊信息的含义的方法 javascript实现表格增删改操作实例详解 animate动画示例(泪奔的小孩)及stop和delay的使用 Nginx从搭建到配置支持HTTPS的方法 Express.JS使用详解 写给初学asp.net的新人们 新手学习经验 JavaScript编程中的Promise使用大全 html5+javascript制作简易画板附图 linux下实现定时关机 Spring Cloud构建Eureka应用的方法 苹果OS X Yosemite 10.10.4第二个测试版发布 git多账号登录问题解析 PHP实现的猴王算法(猴子选大王)示例 jQuery Mobile页面跳转后未加载外部JS原因分析及解决 centos iso镜像文件安装教程 PHP+MySQL存储数据常见中文乱码问题小结 只需20行代码就可以写出CSS覆盖率测试脚本 Android 如何使用短信链接打开APP jQuery中delegate()方法的用法详解 Tensorflow实现AlexNet卷积神经网络及运算时间评测 JS中对Cookie的操作详解 Oracle创建带有参数的视图代码介绍 Python 正则表达式入门(初级篇) python实现树形打印目录结构 为什么要在引入的css或者js文件后面加参数的详细讲解 JS实现的幻灯片切换显示效果 详解.NET中的加密算法总结(自定义加密Helper类续) 浅谈js算法和流程控制 wordpress禁止复制内容的实现方法 python中利用zfill方法自动给数字前面补0 php实现往pdf中加数字签名操作示例【附源码下载】 ajax结合豆瓣搜索结果进行分页完整代码 Linux系统下NFS服务器常见的故障解决方法 SpringBoot添加自定义拦截器的实现代码 iOS 捕获程序崩溃日志 Lua中遍历文件操作代码实例 JavaScript模版引擎的基本实现方法浅析 jQuery实现注册会员时密码强度提示信息功能示例 实例详解JSON取值(key是中文或者数字)方式 SQL Server 2016正式版安装配置过程图文详解 MongoDB聚合功能浅析 python 中split 和 strip的实例详解 JS实现复制内容到剪贴板功能兼容所有浏览器(推荐) JavaScript中使用参数个数实现重载功能 android开发之Json文件的读写的示例代码 js中的时间转换—毫秒转换成日期时间的示例代码 Java 实现倒计时功能(由秒计算天、小时、分钟、秒) 用JavaScrip正则表达式验证form表单的方法 js_jq仿window文件夹框选操作插件
简洁响应式HTML5博客模板.zip 微信小程序源码-猫眼电影带后端 jQuery目标动态温度计.zip 葡萄酒高端主题CSS模板.zip jQuery网页顶部消息提示框插件.zip 【PHP源码】webim插件 for UCHOME_webim.zip js新闻列表拖拽翻页.zip jquery简单二级下拉菜单.zip 健康生活网站模板.zip jQuery+Html5实现唯美表白动画代码.zip 生态绿色CSS网页模板.zip 【ASP.NET源码】基于WINframe的新闻管理系统 v1.0.0_newsmanage.zip jq全屏大背景幻灯片.zip 3D餐厅菜单折叠jQuery特效.zip 微信小程序源码-小游戏 基于安卓webservice的天气预报widget HTML5 Canvas水波纹气泡特效.zip 微信小程序源码-剪刀石头布 html5鼠标点击液体波浪动画特效.zip 点击声呐传播动画HTML5特效.zip 变形金刚透明phpwind8.7模板.zip 简洁主页HTML模板下载.zip 带微信二维码的返回顶部代码.zip jQuery仿淘宝icon动画图标特效.zip 仿厦门无线城市手机wap门户网站模板.zip 【PHP源码】蓝鸟网站流量统计 v2.0 v2.0_lnstatv2.0.zip 非常大气功能全的网站后台模板AmaAdmin jQuery文件夹创建删除修改代码.zip HTML5手机端问卷答题测试代码.zip jQuery左右键上下文菜单代码.zip jQuery弹出社交分享按钮.zip Android xutils的数据库增删改查带数据库升级 【ASP.NET源码】eshop网上书店源码_eshop.zip CSS3实现兴趣图谱效果.zip spring加载restful(文档+程序源码) jQuery硬盘百分比进度条代码.zip LayerSlider带动画效果幻灯片.zip jQuery响应式多级下拉导航菜单特效.zip 2014麦包包ecshop模板.zip wordpress博客主题isis.zip CSS3 Animation进度条加载特效.zip 海边度假旅游网站模板.zip 原生js右下角浮动层效果.zip jquery+html5音乐播放器.zip Swing+sqlserver讯友桌面通讯录 【ASP.NET源码】杰普迅管理系统CMS v1.0 源码版_jpxuncms_src.zip 下拉条件多选插件jQuery X-Menu.zip jQuery单滚轮老虎机抽奖插件.zip 蓝色企业CSS网页模板.zip 仿淘宝首页jquery轮播焦点图.zip 微信小程序源码-爱跑腿外卖 HTML5重力下落积木游戏.zip JS实现单个图片选中美化框.zip 【ASP.NET源码】AspxOS建站系统_aspxos.zip jQuery输入数字放大镜效果代码.zip SSH框架编写的登录注册及人员的增删查询 【ASP.NET源码】X3BLOG 单用户版 1.0 build80802 编译版_x3blog_sgl-1.0.build80802-bin.zip 微信小程序源码-悦读神器 音乐css模板网页模板下载.zip jquery圆圈转动菜单特效.zip 纯CSS实现网站三级菜单特效.zip CSS3实现苹果Apple设备模型代码.zip jquery改变字体和背景颜色.zip 卡通儿童APP网站模板.zip 可扩展css3圆形搜索框.zip CSS3文本框动画输入标签效果.zip 微信小程序源码-豆瓣电影 漂亮博客CSS模板下载.zip jQuery鼠标双击图片加入小框代码.zip lightbox相册插件jquery-rebox.zip jquery div拖动排序效果代码.zip 基于jQuery和CSS3创建的日历.zip 爱岛新社区Discuz模版.zip jQuery多功能书本翻页特效.zip 微信小程序源码-番茄时钟 jQuery可定制画廊插件.zip 贞龙核心版电子商务系统模板标签 花纹婚纱相框模板下载.zip jQuery图像缩放工具插件Zoomer.zip android mycalender 自定义日历控件 易迅新品首发jQuery焦点图.zip redis3.0widows集群+spring整合jedis jQuery带微博按钮返回顶部效果.zip js图片层叠布局旋转木马特效.zip 联想jQuery大屏焦点图.zip 时尚设计CSS网页模板.zip 棕色复古html网页模板.zip 新年红色喜庆企业网站模板.zip jQuery五屏轮播手风琴切换代码.zip zoommap地图放大和交互jquery特效.zip html5时间轴设计工作记录样式.zip 【PHP源码】WEB2.0酷站模板导航小偷 v1.0_kzweb.zip 微信小程序 - 零食商城.zip 瑜伽休闲锻炼网站模板.zip 蓝色天空旅游业网站模板.zip 化妆品护肤品女性网站模版.zip 长按删除拖动 jQuery三维折叠面板展开收缩特效.zip CSS3 Animation进度条加载特效.zip 【PHP源码】Dolphin v5.4_dolphin54.zip J2ee SSH架构 网络论坛系统 jQuery网站头部大背景幻灯片.zip html5 svg秒表电子计时器.zip HTML5 SVG表单浮动标签特效.zip 【PHP源码】Phormer v3.31_phormer331.zip CSS3咖啡制作全过程动画.zip 绿色web2.0设计模板下载.zip css3仿window系统扫雷游戏代码.zip html5俄罗斯方块游戏代码.zip jquery延时载入动画焦点图.zip 仿163网盘无刷新文件上传 for Jsp jQuery半透明过渡切换手风琴.zip jquery图片文字一起滚动切换.zip 【ASP.NET源码】小牛博客(xiaoniuBlog) v0.1 测试版_xiaoniublog.zip UC官网jQuery幻灯片.zip jQuery实现牛逼的打飞机游戏.zip Android动画合集大全(上百种动画) SPA会所绿色清新网站模板.zip css图片编号排序.zip HTML5企业数据统计后台管理模板 iPhone通讯录首字母检索特效.zip HTML5柱状图表.zip 美食拼盘培训公司模板.zip 网上汽车车品网站模板.zip Metro风格jQuery导航菜单.zip 外贸企业HTML5整站模板.zip jQuery方格渐变遮罩特效.zip php+mysql开发WE密码管理系统 html5跟随鼠标3D波浪粒子特效.zip tourex 6.0 高级版 旅游管理系统 仅供研究学习 jQuery用户登录页面模板.zip HTML5柱状图表.zip js滚动产品图片代码.zip jquery角色左右选择框.zip 【ASP.NET源码】华友商贸仿阿里巴巴B2B电子商务系统_hyb2b.zip 微信小程序源码-便民+生活分类 mybatis(使用自动扫描mapper、注解方式)+struts+spring 弹性滚动对联广告代码.zip 微信小程序 - 轮播图变换.zip 床上用品html网站模板.zip 宽屏响应式企业官网模板.zip jQuery鼠标滑过展开qq客服.zip 【ASP.NET源码】中国站长CNZZ.CN下载管理系统2007_cpushdmsopen.zip 时尚优雅css网站模板.zip 途牛旅游网CSS3动画特效.zip jQuery文字上下滑动切换代码.zip 支付宝移动快捷支付SDK的安装与项目实战开发 jQuery仿智能电视幻灯片代码.zip 简单js日期三级联动下拉代码.zip jquery圆形旋转特效.zip 中国人民银行--WebLogic Server配置 HTML5实现web钢琴特效.zip jQuery flexslider焦点图.zip 园林绿化服务HTML5模板.zip jQuery图片弹出层切换代码.zip SpringMvc+Spring+Mybatis+Maven整合示例 【PHP源码】用LOGO 水印的图片上传程序_image_act.zip JAVA语言考试系统的设计与实现(论文+源代码+文献综述+外文翻译+开题报告) 蓝色自主招生教育网站模板.zip 半透明遮罩jQuery图片轮播.zip wordpress瀑布流图片主题.zip 绿色环保企业网站模板.zip jquery css3查看原图按钮收缩隐藏.zip PSD花纹背景素材下载.zip 【ASP.NET源码】C#开源网站购物交易系统 v1.0_ggshare.zip html5+css3点击眼睛玩游戏源码.zip jQuery分割线拖拽照片前后对比.zip 学生信息管理系统(JSP+Servlet+EasyUI)--入门项目 jquery贴片倒计时广告.zip 大气清爽社区网站模板.zip jQuery小盒子菜单效果.zip WalletFun海外支付SDK 秋天落叶jQuery特效.zip jquery+css3弹性动感下拉菜单.zip 微信小程序 - 51旅游.zip html5水平时间轴描述切换特效.zip 底部自动填充对齐jquery瀑布流.zip 使用myeclipse基于java开发的博客管理系统源代码 微信小程序源码-canvas涂鸦(含node后端) jQuery百度新闻标签云关键词代码.zip jQuery sudoSlider插件.zip jQuery仿百度图片浏览效果.zip 物流运输公司网站模板.zip 酒仙网jQ侧栏弹出导航.zip 微信小程序源码-用户反馈组件 快乐宠物信息网页模板.zip 微信小程序 - 发快递.zip 【ASP.NET源码】网站快车.NET网站管理系统(WEBOS) v1.0922_hiweb_net.zip 前端工程师应聘简历模板.zip jQuery支持删除重新选择表单代码.zip 带缩略图的JS图片轮换.zip jQuery带删除按钮拖动排序.zip jquery圆盘抽奖特效代码.zip 纯CSS3实现的3D丝带效果.zip 1号店2015最新ecshop模板.zip JSP+SERVLET+MYSQL实现的权限管理,学生宿舍管理系统 微信小程序源码-滴滴拉屎 jquery拼图相册展示.zip jQuery图片点击切换插件jCarousel.zip 【ASP.NET源码】小孔子文章管理系统 v2.0 Build20070601_xknews.zip
举报X