A. 嘿！设计师 | 前端们说的“雪碧图”是什么
通常来说，完成设计稿后设计师会使用设计软件中的切图插件来进行切图。用ps设计有切图神器cutterman，而设计新秀sketch也有许多不同的切图插件，它们可以很方便地导出图片，甚至能同时导出一倍图和二倍图，这可以满足我们绝大多数的需求。
但是，当图片很多时，这种方式不仅会伤害设计师的双手，也会因为大量的资源请求导致网页打开速度下降。这时候，雪碧图的优势就体现出来了，雪碧图本质上就是将众多图片拼贴为一张作为背景图片引用。
在详细介绍雪碧图之前，先说说背景图片的概念。前端在构建网页结构时，会使用很多的块元素堆叠嵌套，比如大标题< h1 >、段落< p >、图片< img >等，图片标签< img >就是将图片引用进来直接显示，而背景图片则是给< h1 >等元素的背景设置为图片。就好比给电脑设置背景图片，你可以控制它是自适应还是原始大小，重复或者不重复，同样地在网页中每个块元素的背景图片，可以控制它的适应方式、是否重复以及显示位置等。
当我们给一个元素设置固定大小，让它的背景图片位置进行变化，就好像显示出了不同的图片，这就是雪碧图的原理，有点类似ps里的创建剪切蒙版。下图左边就是网易云音乐的一张雪碧图，右侧就是用剪切蒙版演示的雪碧图原理。
一般来说，在某一模块（比如一个播放器）需要的图片很多而每张图片又不是很大时，可以考虑切成雪碧图交给前端。但目前很多前端构建工具里面有雪碧图合并功能，所以如果前端使用了构建工具可以把合并的功能交给前端。
雪碧图还有一个妙用，那就是替代gif。设计师都知道，透明背景的gif动图在导出时回带有毛边，在颜色反差很大的背景色上更明显。因此，可以考虑将多帧图片横向排列，以雪碧图的形式每隔固定时间改变背景图片的位置，因为本质上还是png图片，所以毛边的情况就可以解决了。可以参考我之前的文章： 透明背景gif图的锯齿是个什么鬼？ 。
那么问题来了，为什么叫“雪碧图”呢？叫“可乐图”、“芬达图”、“王老吉图”不行吗？这个，我也不知道。
B. 阔充箰妯℃澘阔充箰鑳屾櫙鏂滃睆镐庝箞寮勭殑
1. 瑕佸湪阔充箰妯℃澘涓娣诲姞阔充箰鑳屾櫙骞朵娇鍏跺憟鐜版枩灞忔晥鏋滐纴鎭ㄥ彲浠ユ寜镦т互涓嬫ラよ繘琛屾搷浣滐细
瑙ｉ喷锛氶煶涔愭ā𨱒块氩父鏄鎸囩敤浜庡埗浣滈煶涔愯嗛戞垨阔充箰鐩稿叧鍐呭圭殑妯℃澘銆傚皢阔充箰鑳屾櫙璁剧疆涓烘枩灞忓彲浠ュ炲姞瑙呜夋晥鏋滃拰鍒涙剰鍏幂礌銆
浠ヤ笅鏄瀹炵幇阔充箰鑳屾櫙鏂滃睆鏁堜妇寰℃灉镄勪竴鑸姝ラわ细
1. 瀵煎叆阔充箰鑳屾櫙锛氶栧厛锛屽皢鎭ㄦ兂瑕佷綔涓洪煶涔愯儗鏅镄勮嗛戞垨锲剧墖瀵煎叆鍒伴煶涔愭ā𨱒跨紪杈戣蒋浠舵垨宸ュ叿涓銆傜‘淇濇偍阃夋嫨镄勯煶涔愯儗鏅涓庢ā𨱒跨殑灏哄稿拰镙煎纺瑕佹眰鐩稿尮閰嶃
1. 璋冩暣鐢婚溃瑙掑害锛氩湪缂栬緫杞浠朵腑锛屾垒鍒拌嗛戞垨锲剧墖镄勬棆杞鎴栬浆鎹㈤夐”銆傞氩父锛岃繖浜涢夐”浣崭簬缂栬緫宸ュ叿镙忔垨凿滃崟涓銆傞夋嫨镞嬭浆鎴栬浆鎹㈠姛鑳斤纴骞惰剧疆镓闇镄勬枩灞忚掑害銆傛偍鍙浠ヨ緭鍏ュ叿浣撶殑瑙掑害鍊硷纴鎴栬呴氲繃𨰾栧姩璋冭妭婊戝潡𨱒ュ疄鐜版枩灞忔晥鏋溿
1. 璋冩暣鐢婚溃浣岖疆锛氩綋灏嗛煶涔愯儗鏅镞嬭浆涓烘枩灞忓悗锛岄氩父浼氩嚭鐜伴粦杈规垨鐢婚溃瓒呭嚭妯℃澘锣冨洿镄勬儏鍐点傚湪缂栬緫杞浠朵腑锛屾煡镓剧敾闱浣岖疆鎴栬佸壀阃夐”锛屽皢鐢婚溃璋冩暣鍒伴傚悎妯℃澘镄勪綅缃锛屽苟纭淇濈敾闱㈠～婊℃暣涓妯℃澘鍖哄烟銆
1. 娣诲姞鍏朵粬鍏幂礌锛氭牴鎹闇瑕侊纴鎭ㄥ彲浠ュ湪鏂滃睆闄绛旂跨殑阔充箰鑳屾櫙涓婃坊锷犲叾浠栧厓绱狅纴濡傛枃链銆佸姩鐢绘晥鏋溿佸浘镀忕瓑銆傝繖灏嗗炲姞阔充箰妯℃澘镄勫垱镒忓拰瑙呜夊惛寮曞姏銆
1. 棰勮埚拰瀵煎嚭锛氩湪瀹屾垚阔充箰鑳屾櫙镄勬枩灞忚剧疆钖庯纴棰勮堟暣涓阔充箰妯℃澘锛岀‘淇濇晥鏋灭﹀悎棰勬湡銆傛渶钖庯纴瀵煎嚭鎭ㄧ殑阔充箰妯℃澘锛屼互渚垮湪闇瑕佹椂杩涜屽垎浜鎴栦娇鐢ㄣ
𨰾揿𪾢鍐呭癸细鍏蜂綋镄勬ラゅ拰镎崭綔鍙鑳藉洜浣跨敤镄勯煶涔愭ā𨱒跨紪杈戣蒋浠舵垨宸ュ叿钥屾湁镓宸寮伞傝峰弬钥冩偍镓浣跨敤杞浠剁殑鐢ㄦ埛镓嫔唽銆佸畼鏂规枃妗ｆ垨鍦ㄧ嚎鏁欑▼锛屼简瑙ｆ洿璇︾粏镄勬搷浣沧寚鍗楀拰鐗瑰畾杞浠剁殑锷熻兘銆
镐荤粨锛氲佸湪阔充箰妯℃澘涓瀹炵幇阔充箰鑳屾櫙镄勬枩灞忔晥鏋滐纴鎭ㄥ彲浠ュ煎叆阔充箰鑳屾櫙锛岃皟鏁寸敾闱㈣掑害鍜屼綅缃锛屾坊锷犺姦瀛濆叾浠栧厓绱狅纴骞舵渶缁堥勮埚拰瀵煎嚭阔充箰妯℃澘銆傜‘淇濆弬钥冩墍浣跨敤杞浠剁殑鎸囧崡鍜屾暀绋嬶纴浠ヨ幏鍙栨洿鍏蜂綋镄勬搷浣沧ラゅ拰鎶宸с
C. 鐩存挱闂磋儗鏅锲剧墖绱犳潗-濡备綍璁剧疆鐩存挱鍦烘櫙锛
鎶栭煶镞犱汉阔充箰鐩存挱闂寸礌𨱒愯儗鏅鍝閲屾湁鎶栭煶镞犱汉阔充箰鐩存挱闂寸礌𨱒愯儗鏅濡备笅銆
1銆佹姈阔崇礌𨱒愬簱:镓揿紑鎶栭煶APP,鍦ㄩ栭〉涓嬫柟凿滃崟镙忎腑镣瑰嚮钬沧垜钬,杩涘叆涓浜轰富椤靛悗,镣瑰嚮鍙充笂瑙掔殑钬滀笁镣光濆浘镙,阃夋嫨钬滃垱浣滀腑蹇冣濋夐”,铹跺悗阃夋嫨钬滈煶涔愮礌𨱒愬簱钬濇垨钬滆嗛戠礌𨱒愬簱钬濋夐”,鍙浠ユ祻瑙埚苟涓嬭浇钖勭嶉煶涔愬拰瑙嗛戠礌𨱒愩
2銆佺涓夋柟绱犳潗缃戠珯:鍦ㄧ绣缁滀笂鎼灭储鎶栭煶阔充箰绱犳潗銆佹姈阔崇洿鎾闂磋儗鏅绱犳潗绛夊叧阌璇,鍙浠ユ垒鍒板緢澶氭彁渚涘厤璐规垨浠樿垂绱犳潗涓嬭浇镄勭绣绔,渚嫔傜礌𨱒愪腑锲姐佸崈锲剧绣绛夈
3銆佽嚜宸卞埗浣:濡傛灉𨱍宠佹洿锷犱釜镐у寲镄勭洿鎾闂磋儗鏅绱犳潗,鍙浠ヨ嚜宸卞埗浣,渚嫔傛媿鎽勮嚜宸卞枩娆㈢殑椋庢櫙銆佷汉鐗╃瓑,鎴栬呬娇鐢ㄥ悇绉嶅浘鐗囥佽嗛戠紪杈戣蒋浠惰繘琛屽垱浣滃拰缂栬緫銆
鐩存挱镞跺备綍璁剧疆铏氭嫙鑳屾櫙锛涓.镓揿紑鎾锷╂坠镄勪富鐣岄溃鏄杩欐牱镄勫傚浘镓绀,涓昏佺敱鐢婚溃鍜屾带鍒跺彴鏋勬垚杩欓噷璇︾粏浠嬬粛铏氭嫙鑳屾櫙镄勪娇鐢ㄦ柟娉曘傞栧厛镓揿紑鎽勫儚澶,镣瑰嚮鎺у埗鍙扮殑鎽勫儚澶,濡备笅锲炬墍绀轰綅缃
2
浜.镓揿紑鎽勫儚澶村悗,鍙鍦ㄥ垏鎹㈡惮镀忓ご閲岄夋嫨镊宸遍渶瑕佺敤鍒扮殑鎽勫儚澶,鐢婚溃鍒呜鲸鐜囬粯璁ゆ帹钻愬氨濂,涓绘挱涔熷彲浠ユ牴鎹瀹为檯闇瑕侀夋嫨
3
涓.璁剧疆铏氭嫙鑳屾櫙
濡备綍璁剧疆鐩存挱鍦烘櫙锛杩欎釜闂棰树富瑕佹湁涓変釜杩熸暎闂,鎴戝敖閲忛兘浜堜互瑙ｇ噧钖绛斻
棣栧厛,鐩存挱镞剁殑鍦虹毊镞﹀傛櫙镐庝箞璁剧疆銆
鐩存挱鍦烘櫙镄勮剧疆鐩稿圭亩鍗,涓鑸鏄灏嗗仛濂界殑绱犳潗(阃氩父鏄锲剧墖,涔熷彲浠ユ槸gif銆佽嗛戠瓑)阃愪竴娣诲姞鍒扮洿鎾宸ュ叿涓铹跺悗璋冩暣濂戒綅缃鍗冲彲銆
鍒嗗埆娣诲姞浜嗘眰绀肩墿镄勬寕浠躲丅GM鎸备欢銆佷汉鐗╀粙缁岖殑钖岖墝浠ュ强涓嬮洦镄勭伅鍏夊姩鏁堛
涓婂浘杩欑岖粍钖堜竴璧风殑绱犳潗鎴戜滑绉颁箣涓轰富棰,鍙浠ユ牴鎹娓告垙銆佺洿鎾椋庢牸銆佸晢涓氩箍锻婅繘琛屼笉钖岄庢牸镄勮捐″拰鎼閰嶃傚綋铹,闄や简镊宸辩粍钖埚栦篃鍙浠ラ氲繃浣跨敤ps绛夊伐鍏峰皢钖勭被鍏幂礌𨰾煎悎鎴愪竴涓锲剧墖,杩欑嶆垜浠鍙锅氩満鏅妯℃澘鎴栬呯洿鎾鑳屾櫙,濡备笅锲:
鍏舵,鍒朵綔鎴栬剧疆鐩存挱鍦烘櫙妯℃澘镞跺簲璇ユ敞镒忓摢浜涢梾棰樸
鍒朵綔鍦烘櫙妯℃澘搴旇ユ敞镒忚繖鍑犵偣:
1.娓告垙绫诲瀷
涓嶅悓镄勬父鎴忔牴鎹鍏舵父鎴忛庢牸镄勪笉钖,绱犳潗鍜屼富棰樼殑椋庢牸涔熸湁镓涓嶅悓銆傚傚悆楦℃父鎴忓氨涓嶅簲链夊ぇ闱㈢Н镄勫浘鐗囧圭敾闱㈤伄鎸,钥屾坠娓稿洜鍏剁敾闱㈠皬鍙浠ュ姞钖勭嶈姳鍝ㄧ殑杈规嗐傚彟澶栨敞镒忕礌𨱒愮殑棰滆壊镞涓嶈佹憾鍏ユ父鎴忎篃涓嶈佸お椴滆垱鎶㈢溂鐞冦
2.绱犳潗镄勫ぇ灏
阃氩父𨱒ヨ寸洿鎾镄勫垎杈ㄧ巼鏄1920*1080,闾ｄ箞鍦ㄥ埗浣灭洿鎾妯℃澘镞跺氨涓嶈兘阃夋嫨澶灏忕殑锲剧墖瀵艰嚧鐪嬩笉娓呫
3.绱犳潗镄勪綅缃
绱犳潗鎽嗘斁镄勪綅缃涔熷彇鍐充簬娓告垙镄勭敾闱㈠拰绱犳潗镄勯滆壊銆佸ぇ灏忋傚敖閲忛伩鍏崭笂杩扮殑闂棰樸
链钖,鍝閲屾湁鍏嶈垂鍦烘櫙妯℃澘绱犳潗涓嬭浇銆
杩欎釜鐪嬩綘镄勮佹眰,濡傛灉浣犵啛缁冩帉鎻ps绛夊埗锲炬妧链涓鑸杩欑嶅氨鏄铡诲悇澶у浘鐗囩礌𨱒愮绣绔欐垒镊宸卞枩娆㈢殑绱犳潗铹跺悗镊宸辨嫾钖埚仛銆
濡傛灉浣犱笉浼氩埗浣滃満鏅妯℃澘绱犳潗,鍙堜笉𨱍宠姳阍变拱镄勮瘽,鍙浠ュ幓杩欎釜缃戝潃涓嬭浇:鐩存挱妯℃澘鍏嶈垂涓嬭浇,杩欎釜鏄姝ゅ埢涓绘挱锷╂坠瀹樼绣鏀惧嚭镄勫厤璐逛富棰樻ā𨱒,绉岖被姣旇缉澶,涓斿厤璐广
D. 璺鐗逛粫瀵艰埅涓浣撴満阔充箰鑳屾櫙锲炬庝箞璁剧疆
1銆侀栧厛闇瑕佷竴涓猽鐩桡纴鍦╱鐩橀噷闱㈡彁鍓崭笅杞藉ソ澹佺焊銆
2銆佸叾娆★纴鎻掑叆u鐩桡纴镣瑰嚮涓鎺ч儜绾冲瀷灞忚寗鐬庡箷涓镄勫浘鐗囧枈鐚滐纴镓惧埌浣犲瓨鏀惧浘鐗囩殑鏂囦欢锛岀偣鍑诲浘鐗囥
3銆佹渶钖庡啀娆＄偣鍑诲浘鐗囷纴瑁佸壀澶у皬锛岀偣鍑荤‘瀹氩嵆鍙銆傝矾鐗逛粫鏄𨱍犲窞甯傚嚡瓒婄数瀛愭湁闄愬叕鍙告枣涓嬩竴娆捐嚜甯﹂煶涔恏ifi妯″潡镄勬苯杞﹀奖阔冲艰埅浜у搧锛岄厤濂楃郴缁熶负Android绯荤粺銆