欢迎光临
我们一直在努力

前端PS技术 | 雪碧图

前面的话

前面已经介绍过,描述性图片最终要合并为雪碧图。本文是photoshop巧用系列第五篇——雪碧图

定义

css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点:

  【1】减少http请求次数

  【2】减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度)

凡事都不完美,实现优点的同时也带来了缺点,即提高了网页的开发和维护成本。

应用场景

前面提到过,并不是所有的图片都可以用来制作雪碧图,只有描述性图片才适合

  【1】对于img标签设置的内容性图片,是不能合并到雪碧图的,如果合并这些图片会影响页面可读性,语义化降低且可调整的范围小

  【2】对于横向和纵向都平铺的图片,也不能合并到雪碧图中。如果是横向平铺,只能将所有横向平铺的图合并成一张大图,只能竖直排列,不能水平排列;如果是纵向平铺,只能将所有纵向平铺的图合并成一张大图,只能水平排列,不能竖直排列

合并

雪碧图的制作实际上就是零星小图合并成一张大图,但小图合并需要遵循以下规则:

  【1】图片在合并之前必须保留空隙

  1、如果是小图标,留的空隙可适当小一些,一般20像素左右

  2、如果是大图标,要留的空隙就要大一点,因为大图标在调整的时候,影响到的空间也会比较大

   【2】图片排列方式有横向和纵向

   【3】合并分类的原则

有三种合并分类的原则,分别是基于模块、基于大小和基于色彩

    a、把同属一个模块的图片进行合并

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

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

   【4】合并推荐

在实际的雪碧图制作中,一般采用两种方法:一种是只本页用到的图片合并;另一种是有状态的图标合并

赞(1) 打赏
未经允许不得转载:散人研 » 前端PS技术 | 雪碧图
分享到: 更多 (0)

评论 抢沙发

2 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏