Home > Developer > Web Develop
Presumably everyone knows the Web page loading process, from the start of the request, to the loading page, start parsing and display the Web page, encountered the picture will send a request to the server, load the picture. If there is a lot of pictures, there will be a lot of HTTP requests, which can affect the loading speed of the page. So now there's a way to merge multiple images together so that when you open a page, you can load multiple images with just one HTTP request, and then display them correctly by setting the background offset of the picture. Now we can convert the image to Base64 encoding, and then directly in the HTML page or CSS, so that when loading the page or CSS can be loaded directly into the past, this also eliminates the setting of the image background offset caused by the browser compatibility issues.
First, display base64 encoded pictures in the webpage .1. Display Base64 encoded images in the IMG tag in HTML
Let's look at how to display a picture:
<img src="data:image/gif;base64,r0lgodlhdwapakecaaaazmzm///// waaacwaaaaadwapaaaciispeqhsrz5modrlln48cxf8m2iq3ymmkqvlrtw4ml Wwach+ h09wdgltaxplzcbiesbvbgvhzcbtbwfydfnhdmvyiqaaow==" alt="Base64 encoded image" width= "height="
Display as:
2. Embed base64 encoded images into CSS
The implementation in CSS is as follows:
. main { width:600px; height:300px; Background-image:url (data:image/gif;base64, R0LGODLHCAAIAJEAAONP6ETK5O7M8AAAACH5BAEAAAIALAAAAAAIAAGAAAINJAMJH2Q6DNXOVSQMLQA7);}Here's how to convert a picture into a Base64 string in C #, because it's relatively simple, here are just some of the main implementation methods, you can draw their own interface, made a tool. Here I create a new console project. Write the following code:
usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSystem.IO;namespaceconvertimgtobase64{classProgram {Static voidMain (string[] args) {FileInfo file=NewFileInfo ("1.png"); varstream =file. OpenRead (); byte[] buffer =New byte[File. Length]; //read picture byte streamStream. Read (Buffer,0, Convert.ToInt32 (file. Length)); //Save the Base64 string to the Base64.txt fileStreamWriter SW =NewStreamWriter ("Base64.txt",false, Encoding.UTF8); //Convert a byte stream into a base64 stringSW. Write (convert.tobase64string (buffer)); Sw. Close (); Console.WriteLine ("Convert successful!"); Console.read (); } }}
Then we open the Base64.txt file and say that the code inside is copied to the IMG tag, the code is as follows:
<! DOCTYPE html>"UTF-8">. main {width:200px; height:100px; Background-image:url (data:image/gif;base64,r0lgodlhcaaiajeaaonp6etk5o7m8aaaach5baeaaaialaaaaaaiaagaaainjamjh2q6dnxovsqmlqa7);}</style><body><divclass="Main"></div>"Data:image/gif;base64, Ivborw0kggoaaaansuheugaaamsaaaazcaiaaaaqb01aaaaacxbiwxmaaa7eaaaoxagvkw4baaanc0leqvr42u2bcvrtvxrhoxpqjgdm6jjatjtdzlo7jkurv q2tti44xvxqqecrfaugyhvcqehedrvrkolkgvz9c/si+74l7iraaogwheas2roy5735wrmplfba1om4jzn/885nxt7l5vt+93+/mzy0/ Gikndloxumltonuskonu0nxvsolqu9pbovmjljdozg9sklytjldi42esnmk5ukqvkctvhkpstkang1hgs1chzwmyoyuhmjagsi0eiabjt0ryxdiecdhcn7vyk 6nl8fcvdfupwfvlbbute7vlnzvtggts+p6fundzkfv91uex9hu0kpnd8a8qquzv+c/ r4iwr9ht3itmwegr6pkpv5cmu5modsbklkekz4cilf1htxbgj3rwvx6txrk8u4wwh+ afk3qvlikjnfxaqjd9kkc9wdxo7ezze0vjgclrifo2ryrzzgs/il4xvajv6ndnydohll2ywkcizrztc0qouwvn4snl8mquv10o5i3xev/egw+ e2x2esrnv1w3ulsvc9ee5n1nypjhnfnwwx20pdgkd56iyfohupbekdowynp1mgbcdbocih/mrlhhnjvfbw+ wcuae8lnnd48jefpmlpzzatctmsfg9zkamsmghnmz70eenmem7ras0y625rnesdjn5hb9zdxmysgmlej9cxyz5xsfruioxglqrcfiq3qtob/ lf50e7jb8+jlhul6qgkcholkak5tzoczmklwtfluieb+/hu1xg69tl3lvwngxm3exhh2uhyzzahs4t22c0npxigwqfs7kmbowrntp9vyxvc3+ Zmokvyrrokldsovjymncwv1v+7vbrcwno2anbubkckuiruzfiwcdrh5zxbqqsnmtntsnttp08ku0ra7t/p3jvvycxpnnk1hziphzpf7mongtbrmhbw9jnoefxcofojo8nnon2efnphm69t+d1lw0vjn9gik4joxesx5uzq386f1te6x8jjs/ ghwxguglv90aqvk5awjzbysjpgd7svog4lst/lphelbsrcmmkyfjzw2xclozmh7azb/m5exyd7dyy8reml2c7tovfmrkzylssgb6v94/ iuapsbp7kywg92rhc9m/hfjpvarbkwfc9hawbmr0vpxuyjvmpe/ultxnzk/ui/up8t39zwkqjpuq+rppngp6e7/ hmccofpjc37pqlczxj4wx2msnpgf6fwvbg+adyfxwtc2oc4wppxveef8rjo6wrp4/e1kohsfyicvajs/tpxyrxaezo+ z5aiigkx6gyeiidyrusfpbpk30wi6bg51kp7vxyz49n/g1bbeyyjq+zc4brfhip3x/n9m84y4bgipm8ikd8kajvrm7qk01pfs+ nsab3exrjwitqdh6p1g2owhhgt14tk1na215l7+uostmpjj0cmq5hyavojpkneak7b5wx0emqtjt2solk+ hs2tyevihhel3f708x0jv1m2pu8lkzsitszng6wizdlj/kdw96eexrvdwpbc+cfdrmtvn9kto0fous7bjanopyyxb294kzgj9p+glcq+cl/ 2ikghcklk56q12psk4gw6obo4ormjkig+/vrodyghlnedznhd4ial6kcabwwnyohe4zxolr3ai8wm0ld9qkroygbg+ 02ppuvlwwcd8cpb6fndjvsgizdhe8yhajiqaqmtigijqhfjb/ kyycvmfhbekstpfkfeobpbifkiuioqcc8wqccgi7vzgz6is6tida31iks7yxjqmtdgscrls3cisy9yhjwyjc4al5odylpmgxnfprs2/ K9wvfp1yve/omf5i7/8hdh9+jtt923yvltnzthf6siu0bizihiohgzly+2rovydiboktcacgozkprhfisnmvqzvgbekkzlddl+i3rfkkyuq9dtiqycbwbsret6vrwfiik59mw1n++ poxw4fvsuv8slv2swniktwtce8lrqgmprfgzzk8tkidd8sjcxo0rtmpsvczdtgi8gdimm3ku3xwltfyewg/fjtll8fwgal2wm+sbxl+ euli4dwyshshfjewbbblc0tlskioquc1wqgaw8bervzpdj23vfzv2tptlc9s67szaqbe+fa2gudlzi3z3aa4ryakhem57+ q0jgeb9ymiyidkeilmzce/lnwhpwc5eqmfmndlifphpilpfb5wd9i7u7hdo1fuuawvp08nfn/umq8qfp/ zdsntaeq0vm3pvyg0903mo8eow8f4kvyywkoz4omtic7unhx/0d+k6ldq6e+wt01tlc3cf2ejjudpfdexwrw+ udthqrqazmbrvlp6cj3avwkszj4vhzyjxy+ P629wliolpj3bdfjsoghzbqrqaqsjrm4gqbzr08zueh9sidv7ownsbru84s7de3mcjgvgm8wr53kjmzoogrnobxceoofwud1mceavuycaypwcq8dcbry3ykxf jhgbxvgocwwkrldisa24u4hmz66jqgfzsej4fdunicx67fhrecevrene/ cppia5m4ezfqgor1crdkjxz3uupdy5kyoywhqlq5hqekm1nhdjicxcylwxpsbmlmsfvq7xsp8jhqgz2fvseyudc+ buh7ch02pqhefqmupc1jtjdlmklmudsxyaztcb9veplghoisyx3w0hjwonanyablkyodbxgl9jjfuw8y40+ q87o5uo0v444npqji96wyqhsaubq/6zvypqfqy4dxzqrnfthvi+rj7sqfkg/nzp8rw+vsnrbyemq5h+vz5h+p7gdalxlnmw5x/wn/j4oqr305/ Lyngjhvdssiybr2wfaymqceryfhebwxru6ewrk0wmvmoijui18wju2bhbhl49/h9o4/s3njq7z+oxtfskuycoakftgnyxngp9i7u2bb/bgq2yzlccsp/q5gcqcqyzeso4azjqa3cqqlzc0lx4guvg1qhecmg+plgfmxck2hspa/ciqjjr5tkb01hrh8r8a66fihdxy1/bmyvyx6gczzm8+ xf4chte9mtmsfjvzbom9ldatwj5symu4/za2qbmyxprdrpznezfruwekiyc9cyu0el2snu6ry+lj50dnts0/ Dfcycwjwsnyj5um9awgzfngewn7uzddazylcznl4c5oqasv2rqydj7rbaquzijvc2cyvl5wr8pu86a4oz89of2mdo4jknogumhj16nrpxs5wgmcnpes4ridcr sjpsakf8akjwxp0uytnkuijwbx75hmeedtkgjex0/insecgjmxzhstcp/ rflyixtnootfv1n8xbzcasetqvulfqjctq3yaiaarjzffywvt8hwaqjipxvmuerwo/5cuxvl2ucbbr7/xvzjg4cmeje/tci+ mq8ejmyltavjdnrgxi0sea1tmjg36a5l8+kk/dcenchd24jy2wifa6lxuhjgjjwytjkostwswsd+f4tp2nhoxa5xedqk6+mtwbanhswkto/ wtajitfxnjgx8rybpkqgjppmubqblscu53ugyu+kaztswuhv9ogneb6ikisrd5agkpgr1zc+ ajmmvurredv3tigw2j0kxsrrvh5hclmedlrpzlj29i4pqhjruz/qprk+gv/5n4r+lxbdob7mn9ublzie/ rfiweexcoham7vfag4saf7vaqkan4c8qkrxc3lqvfjaey+vgawuol92cs6yd2zojrre8qec960gcfinshagsx/asyxhr2/eiw3em+ jlp5erjkgx7apcy+s3ujyzy4qmcu+be4iqxp4lft+gp3hict5hwbksew2nyw3ryxa3diqhz6lofftr+scpiy/qwecemz8w++ Hioydo7b6f5fefzwwdot8lcd+mthjmwrpakh1uyfdmhdpcit3zsab0vlpzagvudi6hjjhdw9iak2ox6/zxt0q05xukbaj+u+t1renewmjfh5ciofmlkfyog+ xlllwj9uiam8gpbjypt2fgjqkdzy6h4wvxh5fq2ei9vtfb5drnpotmka1mgtix6ngugkk4bmszjfswlovrfksahdo8ugqn8dk9e517cwh/ 86aokznfnezaplaw4ns6faauoppdmgcgpr94jssa/rvrhyz2uvg7j+5mb+ s1wd1o1bybvnqs8tiiimpokaocq2shdkbxpezhqfqz5bmbn3i0wj7be20ifvebgbwvcm702+h8ovhwb+ t5re3vwisiegfnvqmclj7hlk5chfvdzgf7jv/mhooiqcrkcmhrob1m6n3xr7ssfhnggyszuueltv25lzwapi6xkv82mmki9in/ Ggnsrvicaju8zmdiamwg2n9zgl5hw9jnu3knljevp7szz+vjc0w/uvugs9sudhd2dekaptwvpdn1dht2dhxogcntr3tulyrp1e512wav0up5nx +pjcvzt9jbgpzyw65t+0wwrtncd5i8fvbj94txulshj7jz8p1gln20mntbnn0ov8zfvk7zogf7qea73hwfk1uesfagpxtbtk9rrc7zfl1/mpp/ /+wasv4gwdllxegnuqntof+duhy00mkwffyykbg1hgr0wvmiujjo6e+r/bnh8b5zgmxc4fz5etbtuhowaioy/vydvzdjfe/ 0aaaaasuvork5cyii="alt="BASE64 encoded Image"/> </body>View CodeShow results
SummaryWe can see that a small picture above, converted to Base64 string, will become a long string of strings, if we will all the images are converted, although the page will be opened slightly faster, but the code will become bloated, difficult to maintain. So, we can convert some very small images into Base64 encoding, embedded in CSS files, such as small icons.
Cloud drizzling
QQ Exchange Group: 243633526
Blog Address: http://www.cnblogs.com/yunfeifei/
Disclaimer: The original text of this blog only represents my work in a certain time to summarize the views or conclusions, and my unit does not have a direct interest in the relationship. Non-commercial, unauthorized, post please keep the status quo, reprint must retain this paragraph statement, and in the article page obvious location to the original connection.
If you feel that my blog is helpful to everyone, please recommend supporting one, give me the motivation to write.
Analysis of BASE64 encoded images to optimize page loading speed
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
