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

  • 时间:2018-07-03 21:22 作者:青岛中新 来源:青岛中新 阅读:86
  • 扫一扫,手机访问
摘要:图片合并方案 - 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)
最新发布的资讯信息
【系统环境|服务器应用】JavaScript是如何工作的:渲染引擎和优化其性能的技巧(2019-01-14 22:40)
【系统环境|服务器应用】EXCEL | VBA实例操作(2019-01-14 22:40)
【系统环境|服务器应用】PHP 底层的运行机制与原理(2019-01-14 22:40)
【系统环境|服务器应用】MacPro (Retina,13inch,Mid2014)128G换500G三星960 EVO NVMe SSD的经历总结(2019-01-14 22:40)
【系统环境|服务器应用】Redis的OBJECT命令(译文)(2019-01-14 22:39)
【系统环境|服务器应用】mysql 对 Emoji表情支持(2019-01-14 22:39)
【系统环境|服务器应用】两种创立DBConnection1以调用JDBC API的方式(2019-01-14 22:39)
【系统环境|服务器应用】AWT/Swing中的Repaint, paint, update(2019-01-14 22:39)
【系统环境|服务器应用】Keras命名体识别(NER)实战---自然语言解决技术(1)(2019-01-14 22:39)
【系统环境|服务器应用】Android P新添加检测项 应用热修复受重大影响(2019-01-14 22:38)
手机二维码手机访问领取大礼包
返回顶部