嘿！设计师前端们说的“雪碧图”是什么？
通常来说，完成设计稿后设计师会使⽤设计软件中的切图插件来进⾏切图。⽤ps设计有切图神器cutterman，⽽设计新秀sketch也有许多不同的切图插件，它们可以很⽅便地导出图⽚，甚⾄能同时导出⼀倍图和⼆倍图，这可以满⾜我们绝⼤多数的需求。
ps切图软件有哪些常规切图
但是，当图⽚很多时，这种⽅式不仅会伤害设计师的双⼿，也会因为⼤量的资源请求导致⽹页打开速度下降。这时候，雪碧图的优势就体现出来了，雪碧图本质上就是将众多图⽚拼贴为⼀张作为背景图⽚引⽤。
在详细介绍雪碧图之前，先说说背景图⽚的概念。前端在构建⽹页结构时，会使⽤很多的块元素堆叠嵌套，⽐如⼤标题< h1 >、段落< p >、图⽚< img >等，图⽚标签< img >就是将图⽚引⽤进来直接显⽰，⽽背景图⽚则是给< h1 >等元素的背景设置为图⽚。就好⽐给电脑设置背景图⽚，你可以控制它是⾃适应还是原始⼤⼩，重复或者不重复，同样地在⽹页中每个块元素的背景图⽚，可以控制它的适应⽅式、是否重复以及显⽰位置等。
背景图⽚
当我们给⼀个元素设置固定⼤⼩，让它的背景图⽚位置进⾏变化，就好像显⽰出了不同的图⽚，这就是雪碧图的原理，有点类似ps⾥的创建剪切蒙版。下图左边就是⽹易云⾳乐的⼀张雪碧图，右侧就是⽤剪切蒙版演⽰的雪碧图原理。
原理对⽐⽰意
⼀般来说，在某⼀模块（⽐如⼀个播放器）需要的图⽚很多⽽每张图⽚⼜不是很⼤时，可以考虑切成雪碧图交给前端。但⽬前很多前端构建⼯具⾥⾯有雪碧图合并功能，所以如果前端使⽤了构建⼯具可以把合并的功能交给前端。
雪碧图还有⼀个妙⽤，那就是替代gif。设计师都知道，透明背景的gif动图在导出时回带有⽑边，在颜⾊反差很⼤的背景⾊上更明显。因此，可以考虑将多帧图⽚横向排列，以雪碧图的形式每隔固定时间改变背景图⽚的位置，因为本质上还是png图⽚，所以⽑边的情况就可以解决了。可以参考我之前的⽂章：透明背景gif图的锯齿是个什么⿁？ 。
那么问题来了，为什么叫“雪碧图”呢？叫“可乐图”、“芬达图”、“王⽼吉图”不⾏吗？这个，我也不知道。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。