「前台 Zero系列」PS切图-图片合并与优化(背景图的用)

  • 时间:2018-07-03 21:22 作者:青岛中新 来源:青岛中新 阅读:155
  • 扫一扫,手机访问
摘要:图片合并方案 - sprite拼图把设计稿里的一个个小图标拼合到一个图片里,用时引入这张图片。好处:减少网络请求,提升网页加载速度;推荐:《 谈谈CSS sprite(CSS精灵)》大小与质量(平衡和取舍 - 反比)压缩:无损Minimage(对图片大小影响不显著);有损TinyPng(一个在线网站

图片合并方案 - sprite拼图

把设计稿里的一个个小图标拼合到一个图片里,用时引入这张图片。

好处:减少网络请求,提升网页加载速度;

推荐:《 谈谈CSS sprite(CSS精灵)》

  • 大小与质量(平衡和取舍 - 反比)

压缩:无损Minimage(对图片大小影响不显著);有损TinyPng(一个在线网站)

  • 合并(排列 / 分类)

准则:图片之间必需保留空隙(考虑到图片的容错性和可维护性)

  • 图片排列方式:横向排列 & 纵向排列

分类合并:

把同属于一个板块的图片进行合并;

把大小相近的图片进行合并;

把色彩相近的图片进行合并;

综合以上方式进行合并;

推荐(合并):

只本页使用到的图片合并(后面使用不到的就不需要加载了);

有状态的图标合并(有交换状态,如点击前图片,点击后图标,CSS设置只是X轴变化)。


图片兼容方案

  • IE6不支持PNG24半透明

存两份,高级浏览器 sprite.png 24;IE6存sprite_ie.png 8(带背景切的)。

  • CSS3 & 切图(圆角、阴影等情况)

高级浏览器使用CSS3解决,低级浏览器使用切图解决或者优雅降级(即,不显示)。


「前台 Zero系列」PS切图-图片合并与优化(背景图的用)

青岛中新(83837777.com)

  • 全部评论(0)
最新发布的资讯信息
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
【系统环境|服务器应用】一个很多人都会答错的java基础题(2019-06-11 06:33)
【系统环境|服务器应用】深入了解枚举类型(2019-06-11 06:33)
手机二维码手机访问领取大礼包
返回顶部