你不知道的网站图片存储格式-base64
最近在前端模仿163网易登录界面的时候惊奇的发现：大家先自己想想，这个图片应该怎么设置，很多人就是img就搞定了，后者一个a标签，或者background等等，但是我打开开发者工具后我发现是这样的：
我也没太在意，不就是一张网图吗，放到网站服务器上，然后get下来不就好了。但是事情好像不是那么简单。我给大家看看那个资源：
data:image/png;base64,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
是这么一大堆东西，这，我真的不懂。不懂不怕呀，我可以百度，我在百度上看到的是这样婶的：
不懂，还是不懂，我又去看了阮一峰老师的 Base64笔记
这下才明白，是为了节省服务器资源，一次请求服务器就需要一个GET/POST请求，我放在本地不香吗，又不费我的服务器。传输效率又快，还能加密（虽然不怎么管用）。
所以一定要有一种探索的精神，对新鲜的事物有好奇。
绛旓細data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAR4AAAA+CAMAAADKzIRmAAAAsVBMVEVHcEw3NzfPAyaJiYk2NjbPBCZlZWWhXGM3Nzc3Nzc2NjY2NjY2NjY4ODiJiYk2NjY7OzvPBCc2NjaKioo3Nzc2NjaKioo6Ojo2NjY3NzeMjIyIiIjVECw3NzfPBCY4ODjQAyfPBCY3NzfSCCrPAyaJiYmKiorQBCeJiYnQBSfPAyaIiIiJiYmJiYnRBSjPAyfPBCa...
绛旓細浜斻丣PEG鏂囦欢鏍煎紡 JPEG鏄疛oint Photographic EXPerts Group(鑱斿悎鍥惧儚涓撳缁)鐨勭缉鍐,鏂囦欢鍚庤緧鍚嶄负".jpg"鎴".jpeg",鏄渶甯哥敤鐨勫浘鍍忔枃浠舵牸寮,鐢变竴涓蒋浠跺紑鍙戣仈鍚堜細缁勭粐鍒跺畾,鏄竴绉嶆湁鎹熷帇缂╂牸寮,鑳藉灏嗗浘鍍忓帇缂╁湪寰堝皬鐨勫偍瀛绌洪棿,鍥惧儚涓噸澶嶆垨涓嶉噸瑕佺殑璧勬枡浼氳涓㈠け,鍥犳瀹规槗閫犳垚鍥惧儚鏁版嵁鐨勬崯浼ゃ傚挨鍏舵槸浣跨敤杩囬珮鐨勫帇缂╂瘮渚...
绛旓細1銆乥mp BMP鏍煎紡鐨勫浘鍍忥紝鏈甯歌鐨勬槸缃戠珯娉ㄥ唽椤甸潰鎴栫櫥褰曢〉闈腑鐨勨滈獙璇佺爜鈥濓紝鍏跺疄瀹冧竴鑸氨鏄綉绔欑▼搴忚嚜鍔ㄧ敓鎴愮殑bmp鏍煎紡灏鍥剧墖銆侭MP鏂囦欢閫氬父鏄笉鍘嬬缉鐨勶紝鎵浠ュ畠浠氬父姣斿悓涓骞呭浘鍍忕殑鍘嬬缉鍥惧儚鏂囦欢鏍煎紡瑕佸ぇ寰堝銆備緥濡傦紝涓涓800脳600鐨24浣嶅嚑涔庡崰鎹1.4MB绌洪棿銆傚洜姝ゅ畠浠氬父涓嶉傚悎鍦ㄥ洜鐗圭綉鎴栬呭叾浠栦綆閫熸垨鑰呮湁瀹归噺...
绛旓細B 1銆丟IF瑙ｇ爜杈冨揩锛屽洜涓洪噰鐢ㄩ殧琛瀛樻斁鐨凣IF鍥惧儚锛屽湪杈硅В鐮佽竟鏄剧ず鐨勬椂鍊欏彲鍒嗘垚鍥涢亶鎵弿銆傜涓閬嶆壂鎻忚櫧鐒跺彧鏄剧ず浜嗘暣涓浘鍍忕殑鍏垎涔嬩竴锛岀浜岄亶鐨勬壂鎻忓悗涔熷彧鏄剧ず浜1/4锛屼絾杩欏凡缁忔妸鏁村箙鍥惧儚鐨勬璨屾樉绀哄嚭鏉ヤ簡銆傚湪鏄剧ずGIF鍥惧儚鏃讹紝闅旇瀛樻斁鐨勫浘鍍忎細缁欐偍鎰熻鍒板畠鐨勬樉绀洪熷害浼间箮瑕佹瘮鍏朵粬鍥惧儚蹇竴浜涳紝杩欐槸闅旇...
绛旓細b锛孊MP鏍煎紡鐨勫唴瀛樺緢澶 涓嶈繃鐜板湪鐨勫浘鐗杩樹細鍔犱笂PNG鏍煎紡鐨勶紝鐩稿鍐呭瓨鏇村皬浜嗐侸PEG2000浣滀负JPEG鐨勫崌绾х増锛屽叾鍘嬬缉鐜囨瘮JPEG楂樼害30%宸﹀彸锛屽悓鏃舵敮鎸佹湁鎹熷拰鏃犳崯鍘嬬缉銆侸PEG2000鏍煎紡鏈変竴涓瀬鍏堕噸瑕佺殑鐗瑰緛鍦ㄤ簬瀹冭兘瀹炵幇娓愯繘浼犺緭锛屽嵆鍏堜紶杈撳浘鍍忕殑杞粨锛岀劧鍚庨愭浼犺緭鏁版嵁锛屼笉鏂彁楂樺浘鍍忚川閲忥紝璁╁浘鍍忕敱鏈﹁儳鍒版竻鏅版樉绀恒侸PEG...
绛旓細涓銆缃戠珯涓鐨勫浘鐗涓绘祦璺熼潪涓绘祦鍥惧儚鏍煎紡濡備笅锛氫富娴鍥剧墖鏍煎紡锛1銆丣PEG2000鏍煎紡 2銆乀IFF鏍煎紡 3銆丳SD鏍煎紡 4銆丼WF鏍煎紡 5銆丼VG鏍煎紡 鍏跺畠闈炰富娴佸浘鍍忔牸寮忥細1銆丳CX鏍煎紡 2銆丏XF鏍煎紡 3銆乄MF鏍煎紡 4銆丒MF鏍煎紡 5銆丩IC锛團LI/FLC锛夋牸寮 6銆丒PS鏍煎紡 7銆乀GA鏍煎紡 浜屻丳NG鏍煎紡鍥剧墖鐗圭偣濡備笅锛1銆佷娇鐢ㄥ僵鑹叉煡鎵捐〃鎴栬...
绛旓細BMP鏄竴绉嶄笌纭欢璁惧鏃犲叧鐨勫浘鍍忔枃浠舵牸寮忥紝浣跨敤闈炲父骞裤傚畠閲囩敤浣嶆槧灏瀛樺偍鏍煎紡锛岄櫎浜嗗浘鍍忔繁搴﹀彲閫変互澶栵紝涓嶉噰鐢ㄥ叾浠栦换浣曞帇缂╋紝鍥犳锛孊MP鏂囦欢鎵鍗犵敤鐨勭┖闂村緢澶с5銆乄ebp鏍煎紡 WebP鏄疓oogle鏂版帹鍑虹殑褰卞儚鎶鏈紝瀹冨彲璁缃戦〉鍥妗ｆ湁鏁堣繘琛屽帇缂╋紝鍚屾椂鍙堜笉褰卞搷鍥剧墖鏍煎紡鍏煎涓庡疄闄呮竻鏅板害锛岃繘鑰岃鏁翠綋缃戦〉涓嬭浇閫熷害鍔犲揩銆6銆...
绛旓細璇鏍煎紡鏈夊帇缂╁拰闈炲帇缂╀簩绉嶅舰寮,鍏朵腑鍘嬬缉鍙噰鐢↙ZW鏃犳崯鍘嬬缉鏂规瀛樺偍銆備笉杩,鐢变簬TIFF鏍煎紡缁撴瀯杈冧负澶嶆潅,鍏煎鎬ц緝宸,鍥犳鏈夋椂浣犵殑杞欢鍙兘涓嶈兘姝ｇ‘璇嗗埆TIFF鏂囦欢(鐜板湪缁濆ぇ閮ㄥ垎杞欢閮藉凡瑙ｅ喅浜嗚繖涓棶棰)銆傜洰鍓嶅湪Mac鍜孭C鏈轰笂绉绘TIFF鏂囦欢涔熷崄鍒嗕究鎹,鍥犺孴IFF鐜板湪涔熸槸寰満涓婁娇鐢ㄦ渶骞挎硾鐨勫浘鍍忔枃浠舵牸寮忎箣涓銆傚叚銆丳SD鏍煎紡 杩欐槸钁楀悕...
绛旓細甯歌鐨勫浘鍍忓悗缂鍚嶆湁BMP銆丣PG銆丣PEG銆丳NG銆丟IF銆丳DF绛夈1銆丅MP BMP鏄笌纭欢璁惧鏃犲叧鐨勫浘鍍忔枃浠舵牸寮忥紝浣跨敤闈炲父骞挎硾銆傞噰鐢ㄤ綅缃槧灏瀛樺偍鏍煎紡锛岄櫎浜嗗浘鍍忔繁搴﹀彲閫夊锛屼笉閲囩敤鍏朵粬鍘嬬缉锛孊MP鏂囦欢鎵鍗犵殑绌洪棿寰堝ぇ銆侭MP鏂囦欢鍥剧墖娣卞害鍙塴bit銆4bit銆8bit鍜24bit銆侭MP鏂囦欢瀛樺偍鏁版嵁鏃讹紝鍥剧墖鐨勬壂鎻忔柟寮忔槸浠庡乏鍒板彸銆佷粠涓...
绛旓細PNG鍙互浠ヤ换浣曢鑹叉繁搴瀛樺偍鍥惧儚锛屼篃鏀寔楂樼骇鍒殑鏃犳崯鑰楀帇缂┿佹敮鎸佷冀鐜涙牎姝ｏ紝鏀寔浜ら敊锛屽彈鏈鏂癢eb娴忚鍣ㄧ殑鏀寔锛岃兘澶熸彁渚涢暱搴︽瘮GIF灏30%鐨勬棤鎹熷帇缂╁浘鍍忔枃浠讹紝鏈楂樻敮鎸48浣嶇湡褰╄壊鍥惧儚浠ュ強16浣嶇伆搴﹀浘鍍忥紝娓愯繎鏄剧ず鍜屾祦寮忚鍐欙紝娣卞湷缃戠珯璁捐涓嶈冻鐨勬槸杈冩棫鐨勬祻瑙堝櫒鍜岀▼搴忓彲鑳戒笉鏀寔PNG鏂囦欢銆4銆丣PEG鍥剧墖鏍煎紡锛屾槸...
