源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] CSS图片优化的一些相关建议

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2015-7-12 17:32:56 | 显示全部楼层 |阅读模式
这篇文章主要介绍了CSS图片优化的一些相关建议,主要针对Sprites图片整合技术来作简单介绍,需要的朋友可以参考下

  CSS图片优化就是尽量压缩图片的大小,加快页面加载速度,这对于大型网站是很有用的。不要小看它,它可以大大提高网页加载速度。通常大家用到的方法就是css sprites。

  CSS Sprites(图片整合技术) 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。想必很多人已经在用这个技术,我给大家简单介绍一下,总结一下我使用css sprite时的一些技巧。
  CSS Sprites实现方法:

  首先将小图片整合到一张大的图片上,然后根据具体图标在大图上的位置,给背景定位。
  CSS Sprites技术要点总结:

  1. 小图片整合时,按照从上到下的顺序,而不要一个图片挨着一个图片从左到右排列。这样排列background-position的值一目了然,写css时方便许多。同时也是为了后期维护着想。想象一下,如果后期维护时,改动其中某个图片的尺寸,那么周围的所有元素的background-position就会随之改变,这将会是一件很头疼的事情。

  2. 小图片整合时尽量靠最左边或者最右边。这两个位置很灵活,非常适合摆放文本前的icon,再写样式时不会受到其它CSS Sprites图片干预。综合第1点,我们可以沿着最左边和最右边的两侧开始由上至下整合图片。

  3. 不建议在不同小图片上下留间隔。因为这样会导致图片size增大从而增加文件的大小。这些间隔是没有必要存在的。

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

  当我们把所有小图片都整合到一张大图中后,就要开始考虑图片优化的问题。你可以看一下现在图片的文件大小。是不是有些不尽人意呢,没关系,下面的步骤可以解决它。

  因为一般整合出的大图背景基本上都是全透明的,所以我们会存为png格式。大家可能会说gif比png文件大小要小,我们不是要优化吗,为什么不是gif?因为gif图片在处理圆角等曲线、或斜线的地方会出现很多锯齿,这是我们不希望看到的。而且可能会丢失一些接近于白色的小图片像素。况且我们还能找到比gif更小尺寸的格式,那就是我今天要介绍的PNG8格式。

 对于非动画的GIF更建议都使用PNG8因为它能做到跟原png图片一样的效果,而且能为你节省10%-30%的文件大小,甚至比gif图片还节省。
  如何将图片转成png8格式

  1. 图片准备:无论你是用什么绘图软件绘的图,只要按常规操作保存为png格式就可以了。photoshop中没有转png8的操作,所以我们需要求助于fireworks。

  2. 在fireworks中打开整合好的大图。

  3. 选择 文件—图像预览。

  4.在“格式”下拉框中选择PNG8,其他什么都不用选,直接点击“导出”按钮选择路径就可以了。

  很简单吧~赶快看看你的png8图片的大小吧,和之前的图片对比一下。你会有惊喜的!~~在看看图片质量,简直是perfect~~

回复

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-14 11:34:49 | 显示全部楼层
那三门,你们谁寂寞才快乐撒
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-9-27 22:12:13 | 显示全部楼层
好东西可以可以可以可以
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-25 04:38:39 | 显示全部楼层
很好,谢谢分享
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

499

积分

中级会员

Rank: 3Rank: 3

积分
499
发表于 2023-5-30 20:46:27 | 显示全部楼层
而快乐你们快乐马年快乐
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2023-6-24 03:38:08 | 显示全部楼层
你们谁看了弄洒了可能
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-7-16 11:32:48 | 显示全部楼层
看看怎么样再说
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-8-25 13:41:14 | 显示全部楼层
hi哦和烦恼农家女
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

303

积分

中级会员

Rank: 3Rank: 3

积分
303
发表于 2023-12-8 16:16:22 | 显示全部楼层
的谁vdvdsvdsvdsdsv
回复 支持 反对

使用道具 举报

14

主题

1万

回帖

75

积分

注册会员

Rank: 2

积分
75
发表于 2024-3-18 17:10:44 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 02:47 , Processed in 0.104953 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表