资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS图片优化的相关建议有哪些-创新互联

CSS图片优化的相关建议有哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

公司主营业务:成都网站建设、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出珠山免费做网站回馈大家。

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,其他什么都不用选,直接点击“导出”按钮选择路径就可以了。

看完上述内容,你们掌握CSS图片优化的相关建议有哪些的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


新闻名称:CSS图片优化的相关建议有哪些-创新互联
当前链接:http://cdkjz.cn/article/diipgi.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220