CSS Sprites图片切割术与图片优化

单身帅哥找朋友

单身帅哥找朋友

2016-02-19 19:49

今天图老师小编给大家精心推荐个CSS Sprites图片切割术与图片优化教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

  关于CSS Sprites技术的优化我们能做到多少,能减多少的请求数量。这并且不是单方面能做到的,一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法,这也是我在项目中经常衡量CSS Sprites图片与XHTML关系,如:《一张背景实现自适应九宫格》,以下总结了图片切割术与图象优化的一些方法。

  图片优化

  对于非动画的GIF更建议使用PNG8因为它同样能做到一样的效果,而且能为你节省10%-30%的文件体积。

  Photoshop相比起Fireworks,导出同等质量的PNG图片,体积会稍大。而Fireworks虽然做了相应压缩优化,但没有达到最优秀的压缩。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  我所知的设计软件,对于PNG图片的处理都没做到最优秀的压缩,图片体积还有一定的压缩空间。可以尝试使用下面介绍的”图像优化工具” 做无失真的压缩优化。

  图片体积及尺寸方面,建议体积保持在100K以内(较为符合国情最佳请求SIZE),size为800px(最佳尺寸)。(从某权威人事中得知,具体无从考证)

  CSS Sprites图片切割术

  CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位,这样能减少维护带来的不必要麻烦。

  不建议CSS Sprites图片中保持一定的间距,因为文件size增大而增加文件体积。

  CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数,因为少色数的图片文件体积会相对的小。

  size相同的CSS Sprites图片中留有较大空隙,某程度上多数情况会增大了体积,所以CSS Sprites的图片不要有空隙。
在size相同的CSS Sprites图片中,垂直排列的图片会比水平排列的文件体积要大。

  在CSS Sprites图片中,水平排列的图片会比垂直排列的文件体积要大。

  图片对等合并:应用CSS Sprites图片时,适当地把对等相同的图像合并,以节省空间及减少体积。

  区分开不需要合并的图像:如当前用户确定只显示一种状态或一个级别时,不必要把其他的级别或状态的图片合并。

  黄金切割位:在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon,因此不会受到其它CSS Sprites图片干预,也不需要预留一定的行宽。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

CSS Sprites图片切割术与图片优化

Web开发
CSS Sprites图片切割术与图片优化

CSS Sprites技术以及图片优化

Web开发
CSS Sprites技术以及图片优化

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS Sprites网页图片整合方法

Web开发
CSS Sprites网页图片整合方法

CSS Sprites优化网页代码的方法

Web开发
CSS Sprites优化网页代码的方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何使用CSS Sprites优化你的网站

Web开发
如何使用CSS Sprites优化你的网站

JavaScript教程:图片切割效果

Web开发
JavaScript教程:图片切割效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

关于注入(css/c.js)

关于注入(css/c.js)

MySQL中文参考手册-- 常用查询的例子

MySQL中文参考手册-- 常用查询的例子
下拉加载更多内容 ↓