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

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

A dream 于 2016-05-09 23:22:08 创建话题
(3745)
(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官方微博
初识angular框架后的所思所想 nodejs URL模块操作URL相关方法介绍 JavaScript中 this 指向问题深度解析 微信公众平台开发之获得ACCESSTOKEN .Net代码解析 Python中用Ctrl+C终止多线程程序的问题解决 用类的继承关系(重写父类的方法)实现简易后台代码模板 javascript div 弹出可拖动窗口 ASP编程入门进阶(十八):FSO组件之文件操作(中) 详解Python编程中time模块的使用 Nagios服务端check_nt 检查命令介绍 互联网科技大佬推荐的12本必读书籍 javascript根据时间生成m位随机数最大13位 Angular获取手机验证码实现移动端登录注册功能 Javascript操作cookie的函数代码 JavaScript与DOM组合动态创建表格实例 使用ASP.NET模板生成HTML静态页面的五种方案 asp.net编程实现删除文件夹及文件夹下文件的方法 数据库中union 与union all 的区别 Javascript将JSON日期格式化 javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字 Js动态添加复选框Checkbox的实例方法 什么是HTML_动力节点Java学院整理 分享ES6的7个实用技巧 jquery ajax属性async(同步异步)示例 Mysql的基础使用之MariaDB安装方法详解 JavaScript的Ext JS框架中的GridPanel组件使用指南 php 文件上传实例代码 JQuery中$.each 和$(selector).each()的区别详解 成为好程序员必须避免的5个坏习惯 ajax+asp无限级分类树型结构的代码 详解SSH如何配置key免密码登录 JavaScript实现网站访问次数统计代码 Linux下如何对ISO文件编辑的方法示例 js canvas仿支付宝芝麻信用分仪表盘 Python实现基于KNN算法的笔迹识别功能详解 python 随机数使用方法,推导以及字符串,双色球小程序实例 JavaScript开发人员的10个关键习惯小结 centos yum 安装 mongodb 以及php扩展 js实现鼠标滚轮控制图片缩放效果的方法 深入掌握include_once与require_once的区别 jQuery语法总结和注意事项小结 underscore之Collections_动力节点Java学院整理 vue.js实现含搜索的多种复选框(附源码) Asp.net请求处理之管道处理介绍 阿里云部署Ubuntu 1.4 Flask + WSGI + Nginx 详解 iOS App开发中UITextField组件的常用属性小结 css类选择器的使用方法详解 tomcat 3.1在RedHat下的安装 页面按钮禁用与解除禁用的方法 jQuery实现悬浮在右上角的网页客服效果代码 PHP中shuffle数组值随便排序函数用法 JS刷新当前页面的几种方法总结 AngularJs Injecting Services Into Controllers详解 鼠标选择动态改变网页背景颜色的JS代码 编程语言中十六进制的正则匹配 javascript字母大小写转换的4个函数详解 JS判断数组中是否有重复值得三种实用方法 阿里云 Centos7.3安装mysql5.7.18 rpm安装教程 百度工程师讲PHP函数的实现原理及性能分析(二) asp 存贮过程 (SQL版asp调用存储过程) css中让元素隐藏的多种方法 Python编程之变量赋值操作实例分析 SQL Server数据汇总五招轻松搞定 js 高效去除数组重复元素示例代码 bootstrap fileinput 插件使用项目总结(经验) AngularJS实现的锚点楼层跳转功能示例 zTree实现节点修改的实时刷新功能 Python语言生成水仙花数代码示例 通过案例分析MySQL中令人头疼的Aborted告警 linux Shell学习笔记第三天 在Linux系统下用命令行工具管理虚拟机环境的方法 php strrpos()与strripos()函数 mybatis映射XML文件详解及实例 jqGrid读取选择的多行的某个属性代码 dedecms中tags页面显示错位的解决方法 用Python制作在地图上模拟瘟疫扩散的Gif图 python分布式环境下的限流器的示例 ASP 代码出现80040e14错误的解决方法 JS+CSS实现简单滑动门(滑动菜单)效果 MYSQL注入获取web路径的几个方法 在VMware下快速克隆多个Linux环境的方法教程 详解Asp.net Core 使用Redis存储Session php安全之直接用$获取值而不$_GET 字符转义 JavaScript数组对象实现增加一个返回随机元素的方法 linux shell命令行选项与参数用法详解 jQuery EasyUI之验证框validatebox实例详解 灵活应用js调试技巧解决样式问题的步骤分享 JS 清除字符串数组中,重复元素的实现方法 Python执行时间的计算方法小结 mongodb 3.2.5安装详细过程 SQL中字符串中包含字符的判断方法 SWT(JFace) 打印功能 javascript实现避免页面按钮重复提交 linux系统怎么下载安装阿里旺旺? Redis教程之代理ip池设计方法详解 玩转markdown 分享几个需要用到的工具 javascript编写简易计算器 js调用图片隐藏&显示实现代码 Redis的Python客户端redis-py安装使用说明文档 手把手教你在.NET中创建Web服务实现方法 JS实现简单的右下角弹出提示窗口完整实例 js键盘事件的keyCode 详解Angular-cli生成组件修改css成less或sass的实例 理解jQuery stop()方法 div+CSS网页布局的意义与副作用原因小结第1_2页 win2000服务器在IIS中使用SSL配置HTTPS网站 jQuery ajax的功能实现方法详解 Ajax请求中async false_true的作用分析 关于webpack代码拆分的解析 jquery学习笔记二 实现可编辑的表格 Node.js 条形码识别程序构建思路详解 Jquery中巧用Ajax的beforeSend方法 HTML5实现留言和回复页面样式 让alert不出现弹窗的两种方法 Android实现支付宝AR扫描动画效果 AngularJS入门教程之服务(Service) python中matplotlib的颜色及线条控制的示例 收集asp的常用函数 分享9点个人认为比较重要的javascript 编程技巧 js显示文本框提示文字的方法 Linux系统上安装MRTG来监控网络流量 Vue v2.5 调整和更新不完全问题 探究JavaScript中的五种事件处理程序方式 Python3如何解决字符编码问题详解 WordPress主题中添加文章列表页页码导航的PHP代码实例 使用原生js+canvas实现模拟心电图的实例 全面解析Bootstrap中scrollspy(滚动监听)的使用方法 浅谈PHP中如何实现Hook机制 浅谈使用splice函数对数组中的元素进行删除时的注意事项 半个小时学json(json传递示例) mysql 5.5 安装配置图文教程 在css3中background-clip属性与background-origin属性的用法介绍 ext for eclipse插件安装方法 phpcms v9后台添加文章时选择相关文章可调用其它模型信息的方法 jquery 利用show和hidden实现级联菜单示例代码 跟老齐学Python之传说中的函数编写条规 9个JavaScript评级_投票插件 jQuery异步提交表单实例 浅谈angularJS的$watch失效问题的解决方案 原生Js页面滚动延迟加载图片实现原理及过程 jquery中获取元素里某一特定子元素的代码 asp.net获取HTML表单File中的路径的方法 MAC用户如何通过MAC管理自己的通讯录 百度Hi Csrf蠕虫攻击 Angular 中 select指令用法详解 在Debian系统下配置LNMP的教程 php实现比较两个文件夹异同的方法 oracle联机数据库备份详解 Ruby多线程编程初步入门 Jquery EasyUI $.Parser 简单介绍JavaScript的变量和数据类型 Vue.js第一天学习笔记(数据的双向绑定、常用指令) 谈谈XCode9的新变化 基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码 IOS CocoaPods详解之进阶篇 jquery实现垂直和水平菜单导航栏 vue router 跳转后回到顶部的实例 php nginx 实时输出的简单实现方法 php 强制下载文件实现代码 CentOS安装mysql5.7 及简单配置教程详解 js实现window.open不被拦截的解决方法汇总 SQL获取第一条记录的方法(sqlserver、oracle、mysql数据库) Javascript访问器属性实例分析 JS正则表达式获取字符串中特定字符的方法 Vue中如何实现proxy代理 jQuery对象和Javascript对象之间转换的实例代码 pandas系列之DataFrame 行列数据筛选实例 利用javascript实现一些常用软件的下载导航 Java获取彩色图像中的主色彩的实例代码 使用sendmail配置企业简易邮件系统 使用JS实现图片展示瀑布流效果(简单实例) 用CSS3实现背景渐变的方法 JQuery中clone方法复制节点 javascript中CheckBox全选终极方案 苹果Mac安装字体的方法 asp.net Cookie操作类 简单谈谈PowerShell 4.0中的新命令 Python实现堆排序的方法详解 如何判断电脑是否沦为“肉鸡”? vue实现简单loading进度条 android自定义View实现跑马灯效果 SQLite3 API 编程手册 微软正在成为Linux基金会白金会员 RxJava+Retrofit+Mvp实现购物车 Laravel学习教程之model validation的使用示例 JS常用正则表达式总结【经典】 iOS8调用相机报警告Snapshotting a view的解决方法 wxPython事件驱动实例详解 python基础教程之类class定义使用方法 Js组件的一些写法 Jquery数独游戏解析(一)-页面布局 Baidu Musicbox 用到的ajax代码 分享下Asp.Net面试题目及答案集合 浅谈django开发者模式中的autoreload是如何实现的 JavaScript实现的双向跨域插件分享 Python使用内置json模块解析json格式数据的方法 jquery+json实现分页效果 JQuery实现动态操作表格 jQuery实现每隔一段时间自动更换样式的方法分析 Centos7开机启动自己的脚本的方法
【PHP源码】phpBB v3.04 中文版_phpbb3.0.4_zh_phpbbchina.zip jQuery播放器在线音乐电台代码.zip CSS3鼠标经过开花动画特效.zip 动物园网站模板.zip jQuery阅读时间插件ReadingTime.zip 可自由变换布局排版的jquery特效.zip 常涛 Wireshark 视频教程 SSH配置详解 自己精心整理,绝对是你想要的 3D图片快速旋转链接.zip HTML5二维码在线生成代码.zip 潮流前线官网网站模板.zip jquery鼠标拖动焦点图.zip 【PHP源码】8nm网站内容管理系统1.01_8nm_wcm1.01.zip 实用的jquery星星评分效果代码.zip 旅游服务CSS网页模板.zip jquery新浪微博表情插件.zip jQuery+CSS3实现3D全屏图片切换动画.zip 好孩子满屏jQ焦点图.zip 浅蓝色会议专题网站模板.zip jquery带进度条提示焦点图.zip 蓝色404网站错误页面模板.zip jQuery目标动态温度计.zip Discuz! x2.5时尚生活模板.zip 简单js日期三级联动下拉代码.zip jquery网站左侧弹出导航菜单.zip jquery边缘滑出菜单.zip 从手机拍照或上传相册图片到网站php源代码(直接使用).zip psd花边透明边框素材.zip css3网页加载后图片翻转效果代码.zip 宽屏扁平化建站公司模板.zip 帝国cms蓝色商城模板.zip 弹性滚动对联广告代码.zip Android 开发的QQ程序源代码 jQuery网站图片切换插件responsiveslides.zip 178图库jQuery相册代码.zip jQuery仿iPhone用户登录框显示效果.zip 财富·雪山和院html5响应式音乐触屏版手机wap企业网站模板.zip bootstrup3全屏切换幻灯片代码.zip jquery带暂停播放和时间轴幻灯片.zip 多款不同样式jQuery日历插件.zip 微信小程序源码-乐租租房工具 CSS3 Animation进度条加载特效.zip Struts2,Spring3,hibernate 3 bbs源码 Discuz! x2.5简约模板.zip jQuery+CSS3垂直菜单效果.zip jQuery水平滚动条图片切换.zip jquery文字输入特效.zip jquery移至顶部底部按钮特效.zip jQuery多个选项卡tab切换代码.zip 学校教育CSS3绿色模板.zip 网页左侧浮动jQuery客服.zip 扁平化设计创业公司网站模板.zip HTML5交互式文件夹预览查看代码.zip css3垂直图标菜单.zip Spring Quartz定时作业 jQuery带音效旋转式切换幻灯片.zip 超大箭头jQ宽屏幻灯片.zip 微信小程序源码-智能机器人 OPPO官方商城jquery焦点图.zip jQuery可拖拽3D万花筒旋转特效.zip jQuery类似播放器图片切换特效.zip 仿九块邮触屏版淘宝客单页手机wap购物网站模板.zip jQuery滑动解锁插件.zip 【ASP.NET源码】ASP闹钟程序_time2.zip CSS3侧边栏卡片式菜单导航.zip spring3、struts2、mybatis结合的一个简单web实现 基于Java的Hessian实现 jquery仿淘宝SKU选择商品属性代码.zip js手写输入在线搜索.zip 【PHP源码】PHPBlast Fourms v3.3.0 BIG5_phpblast33_big5.zip 一个方法实现图片选择 基于spring-MVC的在线测试系统(客观题) 多种过渡动画jQuery焦点图.zip 6.cn首页banner可关闭广告.zip 微信小程序源码-家居电商 天气预报APP官网模板.zip Wordpress单页企业主题.zip jQuery带标题的鼠标滑过切换焦点图.zip jQuery样式切换器插件switcher.zip mysql 特级课视频教程 2.92G 【PHP源码】渝海URL编码转换工具 v1.1_yh_url_encode.zip 微信小程序源码-wx-bbs微赞社区 潜水体育运动网站模板.zip 高仿阿里云管理控制台模板 媒体网络CSS网页模板.zip jQuery按F5刷新随机标签云代码.zip 2017 spring data jpa+spring4.2+springmvc+hibernate4.3 maven环境intellij idea增删改查实例 科蚁网手机网站模版demosdfl01.zip INSPINIA 基于Bootstrap的后台主题UI框架 中文汉化 模板 jquery鼠标键盘按键满屏切换特效.zip 【PHP源码】IceBB v1.0 Rc 10_icebb.zip 胶原蛋白排行榜DEDE专题淘宝客模板(完美SEO设计).zip jquery马赛克幻灯片切换特效.zip ssh2天下淘网站源码(完整运行版) jquery搜索条件滑动条.zip jQuery图片洗牌式旋转切换特效.zip jQuery可编辑任务的日历插件.zip 鞋子销售商城网站模板.zip jQuery动态生成订单进度步骤代码.zip Bootstrap页面文字搜索代码.zip N多32赞HTML5响应式手机网站模板源码 大号箭头样式HTML模板.zip jquery鼠标滑动按钮图片切换.zip 【ASP.NET源码】JumbotCms 3.2 bulid 090628 程序包_jumbotcms(utf8_3.2.0628).zip CSS3动态背景登录框代码.zip 【ASP.NET源码】小牛博客(xiaoniuBlog) v0.1 测试版_xiaoniublog.zip lightbox相册插件jquery-rebox.zip 纯CSS3实现纸飞机动画特效.zip CSS3竖直图标导航菜单代码.zip 汽车品牌4S店网站模板.zip css3透明幻灯片切换.zip jquery图片鼠标拖动效果代码.zip css3渐变头部导航.zip 【PHP源码】MP3 Web Player v1.6_player.zip phpwind8.7 Win8风格.zip 微信小程序源码-在线小说(含后端) jQuery缩略图悬停滑动预览.zip 【PHP源码】盈诺礼品论坛系统_ynlpbbs.zip Wordpress SlashBlog.zip 纯css3实现骰子3D翻转特效.zip HTML5+CSS3大风车旋转动画.zip UI Design网站设计公司模板.zip 家具床沙发橱柜公司模板.zip 【PHP源码】腾讯留言板 v1.3_book.zip BUI强大的bootstrap后台开发框架,UI 样例丰富 jQuery带标题描述背景幻灯片代码.zip 微信小程序源码-其他带后端多个源码 win8风格的日期时间选择控件.zip 微信小程序源码-酒类企业展示 jQuery移动端触屏滑动日期控件.zip 木纹背景wordpress主题.zip jQ带日期区间的日期选择插件.zip jquery鼠标悬浮高亮开关灯.zip 商业地产服务公司网站模板.zip 【ASP.NET源码】NetFocus最新版源代码_netfocus.zip Discuz! x2简约黑风格模板.zip 微信小程序源码-构架师技能图谱 web系统界面模板(非常漂亮) 网页右侧QQ悬浮滚动在线客服.zip css3圆形修边tab标签.zip Flash+xml网站顶部banner焦点图.zip 高端酒店装修网站模板.zip 左侧固定单栏html5模板.zip jQuery全页面横向定位滚屏.zip 【ASP.NET源码】拓文ASP.NET网站内容管理系统 v5.3.1_topwincms_v5.3.1.zip jquery带箭头滑动标签.zip Android 获取当前网速质量调整网络请求 旅行社旅游公司网站模板.zip tensorflow-gpu-1.4.0rc1 linux版本 python27和python35 jquery带箭头滑动标签.zip jDropDown下拉菜单.zip win8九宫格布局鼠标悬停滑出文字.zip 【PHP源码】XOOPS v2.26 简体中文版_xoops226cn.zip html5 canvas孙悟空卡通特效.zip 【ASP.NET源码】网文快捕 v1.0.15(含源码)_esst_cn_webcatcher.zip 飞机货物托运网站模板.zip Android仿写字板功能 jQuery滚到底部滑出提示层.zip 漂亮西餐美食企业官网模板.zip jquery侧边划出导航菜单.zip google plus删除效果jQuery.zip 纯css3动感导航栏代码.zip 棕色室内建筑设计网站模板.zip 带箭头jQuery无缝循环滑动.zip jquery叠加效果自动滚动切换特效.zip 宠物商店系统SSM jQuery+html5响应式页面滚屏代码.zip 【PHP源码】phpShop 0.8.1_phpshop-0.8.1.zip HTML5响应式全屏宽度幻灯片特效.zip 【PHP源码】WEB代理聚合 v1.10_gom6_proxy-1.1.zip jQuery+CSS3模拟印钞效果.zip 精确到毫秒jQuery倒计时代码.zip 羊毛线生产制造公司模板.zip 汽车维修服务有限公司模板.zip android listView实现地区城市选择视图 jQuery返回顶部滑动跳转效果.zip css3下载按钮效果.zip jQuery带步骤找回密码表单代码.zip jQuery UI 3D立体滑块特效.zip 左右布局滑动切换Tab选项卡.zip 医疗器械公司网站模板.zip J2EE spring mvc mybatis bootstrap HTML5 后台框架 jQuery个人名片样式代码.zip 【PHP源码】思维CMSware会员通行证系统(CWPS) v1.6 GBK简体中文版(PHP4) Build071203_cwps_1.6_gbk_php4.zip 吴超Hadoop初级、中级、高级视频教程全套 地铁上的人影HTML5模板.zip Swing+sqlserver讯友桌面通讯录 旅游景点线路bootstrap模板.zip HTML5创意圣诞节主题模板.zip 时尚街拍搭配商城HTML5模板.zip CSS3动画内容标签切换.zip jQuery Banner图片旋转切换代码.zip jQuery方形格子抽奖代码下载.zip jQuery响应式动画片头效果.zip 环信Android SDK Demo 微信小程序 - 阿姨帮.zip 蓝色斜纹导航博客模板.zip jquery坐标图片框裁剪.zip jquery点击弹出大图切换代码.zip JS实现文字上下滑动导航.zip
举报X