css-sprites vs inline/javascript

I'm doing a website which displays lots of little icons (stars, flags, folders...)

Now I'm using the CSS sprite technique and it works great but it's hard to mantain.

I'm thinking on making a big .js file with all images encoded as javascript variables. Then display 开发者_开发技巧the images this way:

images.js

var myimage1 = 'data:image/png;base64,iVBORw0KGgoAAAANS...';
var myimage2 = 'data:image/png;base64,cB324CD64aB3Cme23...';

html code

<script type=text/javascript src=images.js></script>
....
<img src="javascript:myimage1">
<img src="javascript:myimage2">

I know that the .js file would be bigger but it's very easy to maintain and it will be cached by the browser.

It's a good or bad idea? Is this cross-browser?

Stay with CSS sprites. If your users have JavaScript disabled, they won't see the images.

If you decide to stick with CSS sprites (because you require IE6/7 support, for instance, or are concerned about no-JS fallback), a few things that might help with maintenance:

• Organize sprites into separate images based on shape. For instance, put all of your 20x20 badges in the same sprite, all your 30x15 folders in another sprite. (Yes, you will have more HTTP requests, but HTTP performance is one of many factors to consider.) This makes calculating CSS much simpler. You can set the sprites up as single columns, double columns (which is nice for roll-over effects) or whatever keeps things cleanest. Dealing with a large, irregular sprite is a pain!

• Have a low-impact pattern for adding new imagery. Always add new items to the bottom, for instance, so you don't need to recalculate CSS for imagery above the new image. (This really only makes sense if you organize sprites per my first point.)

• If you are no longer going to use sprites, just blank them out. Leave white spaces or gray x's or something in their old spot. Then when you have time and a bunch of removed images to clean out, do them all at once. (Again, if you're crazy concerned about performance, you might not like the idea of leaving any spare bytes in these files...)

Just a few thoughts.

Just think, would you rather see this: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAIRRJREFUeNrs3U%2BMHNd9J%2FAaznANcSmTkHSgnZHCQ0QqOZFG7EtgZxAjlwWI6BRgb84e9rILOL5sDjmIPiywe7IDJMckvgXJScYAuQSOm174IgEieRI51qHJoSUCO2OTonYocbq7tqs5TQ9p%2Fpnuqa5Xr36fD9AQfPGwX3VVfd%2BrX%2F1eUZCbn44%2F5YI%2BFxfw7724wH%2FvT1vwb8jhc7El4%2FTr8ed0w%2BfL2w2M71pLzofS5ZFZHDEEQENOjj8%2FaPjv%2FaNhBwEASO%2FtvU8T3tkLAYAAALTADxq4MZ8bf%2F7SUIMAALTH6QZuzj8wzCAAAO3zTrG4gsDvFLMV5oEAANCgRRToNV1oCAIAwIyqWXrdBYFN1BeAAABQwypAXTfsKlB8x5CCAAC0X3Xzf6fG2T8gAACZqN4IONeC%2Fw8QAAAadpjZe52rCCAAADRorZi%2FN0CddQQgAAA0bJ7WvVVweNvQgQAA5Gued%2Fht9gMCANAB3ykO3sXvYtH89sIgAAAsyEFWAaob%2F3cNFQgAQHec25vdP4%2FCPxAAgA76bvHs5f2q6G%2FNEIEAAHTPswoCbfYDAgDQcU%2Bb6f9lofAPBACg8%2Fa%2F5lfd%2BHX8g5qsGAL2%2Bd2i%2Fmerv2tYOYTqpn9x7%2BOdfyC0n44%2Fpc%2Fk89NEx2Btwd9rLdH3utjiY93mf9tai8YYDswjACAHlv5BAAAABAAAQAAAAAQAAEAAAAAEAAAQAAAAAQAAEAAAAAEAABAAAJ6rn%2FBv3xl%2FrjgEIAAAzfve3o042t8GAQAI7c7ejbhpvfHnR4YfBAAgnR%2Ft3ZCbDB1%2FYdhBAADS%2B4uiueX47xdpaw9AAADY09%2B7MS9ab%2Fz5oeEGAQBojx8Wi38U8D3DDAIA0D6LvEFXKwxe%2BwMBAGihK8ViHgVU%2F78XDS8IAEB7XVzATF3VPwgAQAbqvGH%2FsLD0DwIAc6mWZJdq%2FnzfsPIcV4p6qvX7fmsTZeLPRYdAAACYJXj2a1hJ0O4XBAAgI4ft2NfEa4UgAAAsQK%2BY71FAFR4s%2FYMAAGTs%2B8Xsy%2FiW%2FkEAADI366OAd%2Fc%2BgAAAZO6gN3U7%2FYEAAHTMQZb1v1dY%2BgcBAOiUO8Xz9wrojT8%2FMkwgAADd86Pi6a%2F2WfoHAQDouKc9CqijaRAgAAAt1i8ef8e%2FWhH4oWEBAQDovv1d%2Fr5nOKA%2BK4YAaLnqxn%2B6sNMfCABAKFfc%2FKF%2BHgEAgAAAAAgAAIAAAAAIAACAAAAACAAAgAAAALTHkiHIzrnx5%2BSC%2Fr%2F7Rf0brZze%2ByxCtVFMigYxJ%2FeOw6JcKdLsdb%2FIY5XqOzVx3szy3RY5xm2wiGsIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQWkuG4GBuXTizNv7PmpEAaLXe6vpGzzC82IohOLDq5v%2BOYQBofwgwBC92xBD4QQG4VgsAAIAAwD53DAGAa3VXKAKcwa0LZ0qjANBeq%2Bsb7mtWAAAAAaAelpYAXKMFgICuGAIA12gBAAAQAALoGwIA12gBIJ4bhgDANVoAAAAEgAAUmAC4RgsAAXnFBMA1WgAAAPKkZeKMtAMGaCdtgK0AAAACAAABeP4vACxczxAAtI43AAQAAEAAqJ9lJgDXZgEgoKuGAMC1WQAAAASAAPqGAMC1WQDwIwPAtVkAAAAEgC7yrimAa3P29E2eg%2F0AANrFPgBWAACAA1gxBHPpjT9rhoHcLf8HkybqUw7LYjRMdk1GAAAO6tgrFgGpz%2F07o3EA8IQ0F85%2BAOpZARgl%2B9PaAAsAjblkCABaQxtgAQCAVIYPLP8LAN1nuQnANVkACEjDCYB9yrSTf9dkAQCAFEa7lv8FgBj6hgDANVkACGZ1fcOPDWCflI8AXJMFAAASGe0aAwEgDkUnAK7FAkBAXjsBmK4ApGsB7FosAACQLgAYAwEgDu2AAVyLBQAAAq8ADPQBEAAACMdOgAJAJD1DAJCctwAEAABSsAugABCNZScA1%2BJsLRmC%2Bd26cEbsJWsvn1o2CBza4IuyuP%2FrNEUAq%2Bsb7mNWAABIQRtgASCiviEAcA0WAPz4AMIp020F6BosAACQytAjAAEgIO%2BfArgGCwAB3TUEQHRlup0AXYMFAABSsROgABCR5SeAdHqGQABIRQcqIPbs3y6AAgAA8STcBdAk7JC0UDwk7YDJmVbAHFa1EdDOr7QBtgIAQLAAYAwEgLgsQQG49goAAXkTAAgrYRtg114BAIBUtAEWACLrGwIA114BIJ4bhgCIKt0TANdeAQCAZEa73oQWAOJSiALg2isABORVFCDm7D%2FtJkCuvQIAACkk3AYYAaAVLEMBNGx1faNnFASA1D9Cy1BASMOBMRAAAIgn3U6AJl4CQGv0DAFAYzx6rcGKIWAeR%2F%2Fqbw1C7if%2F8krxH185biAyN9z8sPj8n%2F9Xkr89eKAIUAAg3HLUkdffLIpjbh45Wz56tFg%2BccJAZG609UvXXOa7jhuCWlwNd9HZ%2FIWjDm04F7fTBYCEbYCvOvICAACpwoc2wAIA8XalKrc%2BcdShBYab11xzEQD8GBu0ddtRhza4fy%2FNJCDt5F8AEAAASMHyvwDAQ%2BHeSR3dVAQIbTC4%2Fp5rLgJAKiHbASdadgRaMglIuBOgFuwCAACJlENjIAAwFWpJyiMASG%2B48X7Er91z5AWAtom1JLXzmSMOkcPHQBGgAABAEuXOp%2Bn%2Btp0ABQAeuRTtC4%2BuX3bUIeUsPGYTIG2ABQAAkoUPOwEKADwSb1lqx6uAkFLKjYBcawUAfiNcY4ry5keOOqQ8B7c%2FTvN3007%2BNQESAABIQRtgAYDH9cPNPuwICEkNNz90rUUASG11fSNeANgWACDpObgTbyfAiNdaAQCAVhjtGgMBgCeFSqbaAUM6QdsAKwAUAASAVtAOGGKuAAyTPQPwCqAAABBbyjbAIzsBCgD8loC9ADwGgBSCtgG%2B5MgLAG11N1wAuO8xAEQzshOgAABAovCdsBV3wp0AEQBaqxfuInTNjoCQZBZ%2BK%2BQjgJ4jLwAAkIBdAAUAni7cKyqlHQEhzQrAlp0AEQBaY3V9I95bAJveAoAkASDRVsCJ2wBrBCQAAJAkeGgDLADwTP1QKwBbtx1xaFjQHgB9R14A8CNtVQCwIyA07n7CVwDTPQMQAAQAAFIZegQgACClWgWANAbX34v4tRUACgCtdyNcANhWBwBhzvd0OwHeNfoCAEDsm3DC%2Fht2AhQAeDY7AgKLvQlrA4wA0ErxOlXt2BEQQgQPuwAKAAAkvBEnagNsF0ABgOdYXd%2FohbsYXf%2FAgYcmz7ntePsARLy2CgAAtMLwgTEQAHiRUHUApRoAMPt3TRUAmAj1JoC3AKDB823743R%2FO10bYE2AFmDFEBB6NnX9ctjvPlxeKYavHPcjyO24bX6Y7m9rAywA8ELhlquqdsBLr30lu3%2F37v%2F%2B72F%2FpNW1fOXUsrOVHPQNQf08AliMq%2BECgHbA0P3zPF0bgBtGXwCAWi298aZBgAMa7WoEJADwIv1wM4NMdwRcOuYZOGRAEaAAIAC01pZHANDp2X%2FaTYC8BigAQM0nwNmvGQQ4gITbACMAZCXcctVILwBgQbQBFgBy%2BrHGW666f8%2BBhw4bDoyBAAAdsvTWeYMAB2EnQAGAA%2BuFujZcu%2ByIA66lAgBksgLwktcA4SAGDxQBCgAcVLw6gAx3BdQICFxLBQDqFq4d8GjTmwDQVQnbAF81%2BgIALGYVIMNNjKDxgK8NsADAgYXcETDPAHDKrxXaq28IBIDcxOtdrR0wdDPcp538CwACACxoBeB1hYDwPJb%2FBQCk1ufPErLdEfBlv1ZoLzsBCgB5WV3fiBcAtj9x4KGLKwAJdwIM2VpdAICGVgC0A4bnh%2FuhMRAAmFWopSs7AgI16xkCASBXsZauMuwECLzYcKAIUACALp4EZz0CgOcp7QQoADCzS9G%2B8Oi6XQEB11ABAHJxzK6A8CxDOwEKAMws4I6A9%2FI8EewKCK6hAgA1CtfAorz5kaMOXTqn007%2BNQESAGCxll61IyA8jTbAAgDzibcjYKaPAGwJDK3UNwQCQJZW1zfiPQLY1AwIOnVOJ1wAiNhSXQCAplcA3vg9gwBPMdo1BgIA8wqVYMut23n%2Bw%2B0ICG2jAFAAEADyCgB2BIROrQAMkz0D8AqgAAANnAjaAcMzAoAxEACYV8BeAAoBgUPTBlgAyN7dcAHgvl0BoTMrAHYCFACg8yfDWx4DwG8FejsBCgDMrRfugnHNjoCAa6cAALl4yauAsJ9dAAUAmG0FwI6AwOF5DVAAyNvq%2BkYvXADQDhi6cS6nbQOsEZAAAA157ZQxgH20ARYAOLxQS1nlTp6vAdoREFqjbwgEgK4ItZSlERB05FxO9wxAABAAoMGT4XVFgLDf0CMAAQBpduaZQ46bAh077pcK7aAAsAErhqARN8IFgO3bWT5T%2F9I%2F%2FDzMMTp69Gjx5RMnnJ0t98X6300%2BSc7jdDsB3nXkrQAAkIidAAUADs%2BOgMBchhvvR%2FzaPUdeAOiKeB2tduwICFnP%2Fu0CKAAAkE6582mav2sXQAGAw4vYDnh0%2FQMHHmow3LzmmokAAEBDweOBMRAAYA6lGgA4tNH2LyN%2BbbsACgCd0wsVALwFAIc%2Fj7Y%2FTve307UB1gRIAAAgFW2ABQDq41VAYLab8OaHEb9235EXALrmarQvPNr0GAAOo9y5l%2B5vp2sDcMORFwAASBXgdzUCEgCoSz%2Fc7CXHHQGhRYK2AVYEKAAIANnbuu2oQ46z%2F7SbAHkNUAAAiC1ZG%2BCh5X8BgDqFW9Ya6QUAh6INMAJAN37U8Za17t9z4CHH4DEwBgIAAEkkbQNsJ0ABgNr1Ql3Arl12xGFOKdsAu0YKAAAENHigCFAAgMPSDhjmMtqyEyACQJdcCncR0w4Y5jt3Ym4FfNWRFwAASGToEYAAQO0C7gjoVUCY6yYcsAdAYSdAAaDDwjUDKm9%2B5KjDPBL10SjTTv4FAAEAgBTsAigAIN3WM5uwIyDMZXD9vYhf206AAkA3ra5vxAsA2wIAZLUCkHAnwJAt0wUAAB4F54TFs%2BXQ%2BAsALEqoJS47AsIc582tkG8A9Bx5AaDrYi1x6QQIWRkOFAEKAACkWQFI2Aa4tBOgAMDChKtyHV23KyDMdM7EbAN8yZEXALruriEA2kobYAEAACsATfIKoADQeb1oX7i85hEAzHTObH8c8WtrAiQAAJCC5X8BgMUKt8xV2hEQZrsRb34Y8Wv3HXkBoNNW1zfi7Qi4qRkQ5BCaU%2B4EGLFVugAAQCuMdo2BAMCihUq65dZtRxwOaLjxfsSvrQBQABAAuhkA7AgIWawADJM9A%2FAKoAAAEFu582nCAGD8BQAWLV4hoF0B4UCGmyF3AtQGOIEVQ5BEuHbA1X4AS%2FftDNiqG83ySjF85Xhnv9%2FSq18tjrz6Ow70LOepnQAFAKjb4J%2F%2BxiC0TFXwvXJqubPf70sX%2Ftvkk91NeNtOgDTDI4A0VLwCT78Jx2wD3HPkBYAoVLzCoi9ulv9nog2wAADQjYvba3kGgNGWnQARADprdX2jZxSApwaAgFsBR2yRLgAALOritvqWQZjB8IExEABoiiUvWKClYy%2FndxOO2QOg79cqAERjyQt43P10W2eX6bYCFAAEAIB6rJz9hkGY0dBOgAIAUi%2BQxuD6exG%2FttVQASCcG4YAFuSll43BjMp0OwHeNfoCAEAtll%2FP8w2AciddDYCdAAUAmtM3BMBjN%2BFbId8C6DnyAoAAANRzYdMGeLbgYRdAAQCgExc2bYBnYhdAAYBmqXwFHg8AMdsA9xx5ASDaj14nQFiQpVe%2FahBmoA2wAADQjQtbhjUAEWf%2FhZboAkBgPUMAVMrtjyN%2BbY9CBQCAeuTaAyClwQNvAQgANM3yF9Rs6diXs%2Fx3Dzc%2FjHi4%2Bn6xAkBUVw0BUEnZBTDdRoBaoqe0Ygho9Af3n79bLL3xZnb%2F7sE%2F%2FU1R3vyFA5iB5TNfNwgzGu16BCAA0LR%2BuG987Hhx5Oz57P7ZS%2BN%2Ft0skizTceD%2Fi11YEmJBHAAJAs7ZuO%2BosOKzZCXCm2X%2FaTYDUQQkA0PIT5ezXDEImll%2F%2F%2FSz%2F3eXOp2n%2B7tDalgCAFYAmZhueo8NTDTfj7QSoDbAAENb4xx8uABT37znwLJQ2wDMGj4ExEACAZ99U3jpvEHK5qGkDPOMf95sRAEglVBXs6NplRxyeELQNcM%2BRFwCiUwWbwwrAS8cNQga0AZ6dNsACAPC8AJBh86KQxynTNsCjLTsBIgBEdCnaFx5d9xgAHjsnYm4FrBW6AACZzC5f%2B4pBaPsFbdUjgFkNPQIQAEgm3jLYTp6vAi69dsqvte3HKNMugBF7ABR2AhQAiNcLu7z5kaMO%2ByXqj1GmnfwLAAIAZDK7fF0hYNutnP2GQZiBXQAFANIKl4LLrU%2FyDAA2mWFBBtffi%2Fi17QQoAMQWsR1wuf2JA89ivCSkzbQCkHAnwPG1z2uAAgBksgKgHXDr5dgIqExYFFsO%2FWYEAFILtQpgR0DYdz7cCvkGQM%2BRFwAIGACKnc8cceq%2FmGW4CVBqw4EiQAEAePHJctYjgFYfn9fyDAAp2wCXdgIUAEguXDWsdsCwdy7EbAN8yZEXAHjoriHIxDG7Arb2YqYN8My0ARYAgIOeMHYFbK1c%2BzQEXQHwCqAAwJ5etC9cXvMIACbnwvbHEb%2B2JkACAGQ2y3zVjoBtpQ3wbCz%2FIwC0Q7jlsDLbHQEFAGq%2BEW9%2BGPFr9x15AYBi0hIz3o6Am5oBQcownHInwIgt0AUAyNzSG79nEFpq%2BczXDcIMRrvGQACgLUI9Bii3buf5D7cjIDUabrwf8WsrABQAiHxS5LolMO1kq%2BY5VgCGyZ4BeAVQAIAMTxjtgFtp%2BfXfzzMI73yaMAD43QgAtEU%2F2hcu7QpIcMPNkDsBagMsAPCEG%2BECwH27AlKPpVe%2FahBmXQGwE6AAYAhgxpPmLY8BWndMMt0KOGUbYDsBIgC0R7xeANoBE1zQNsA9R74dVgxBa6iMzSU1%2F9F%2Fejh7E2BaMfNfPvv1YuXctw3GDLQBRgCAOSyPA8DyNARc%2FtkkCIyuX1bU2NRFa3yzXxnf9JfPfKNYfj3vLYBHW3YCJJ0lQ9Aety6cCRXLq2fpR%2F%2FH33bnC%2B18VgzHgaCcBoIMeh28fGq5%2FYFrfJN%2FeNP%2FRue6%2FX36X%2F8g2QrAzq%2FSFAGsrm%2B471gBgI45dvzhysDe6kC1IlAFgYcrBB9MAgIHCIZ7y%2FpHxzf9apavyc8iAoAxQABom2pp7GSUL1t2%2FIa49MabxXL1%2BdM%2Fn%2FzvyarAOAxMVgk8LvjNOI1v8NWNfnLDH9%2F4c63on%2FkmHLMHQN8vXgDg6ao3AdbCBIBgN8FJF8HxZ%2FnP%2FstkNaBaFRh98H%2ByeVxQ64Vnbzm%2FWtrP%2FTn%2B3O6n2xK7TLcVoAAgAEBwx44XR85%2Fa%2FKZXJDHAWDyuGASCLr3uKC6yVez%2FGnxnmX9xKsPdgJEAGidcNWx1Y1v6bWvhD%2Fw1RgsV5%2F99QOXH4aBHF83rG7wk8K9qlI%2F0LL%2BLAbX34v4te0EKADwDFfHn7dDBYDt2wLA026g0%2FqBYt%2Fjgpa%2Fblgt66%2Bc%2B5NOvJ7X%2BfMu3U6Ad42%2BAAAc1DMeF0wLClM9Lpgu6x89%2F%2B3OvZ7XyE14J10NgJ0AEQDapx%2FuIljNZm2xO9vqwN7jgup1w5Xirx9%2F3bAKBAvyqOte9Sz%2F3Lc9xz%2FsTfhWyLcAeo68AIAA8JB34w8fCJ7yuuHog58d%2BnHB9PW8lb1Wu57jdyR42AUQAQC6qXrd8Mh0VWXG7oRd7rrXuhtxojbAdgFEAGincBWyVXHbpNCNxXiyO2FVP1C9XbDXnfDIq6881lvfsn6Dv%2F3tePsArK5v9Bx5AYCnnxx3bl04YyBYmEn9wJ%2F%2B%2BeRz9OjR4viJEwYlGG2AmTpiCADM%2FhtgF0ABgBfohboQZtjkBg6r3P444tfWBEgAACCVwQNvASAAtFW8ZTKvAhLMcPPDiF%2B778gLADzf1WhfeLRpa1xiSdkFMN1GgMUNR14AACBV4N71CAABoK1C7ggIkQw33o%2F4tRUBCgA4SZ6wddtRhyZm%2F2k3AfIaoAAAEFu582mavzu0%2FI8A0Gb9cLOSm4oAiWW4GW8nQG2ABQBefJKECwDF%2FXsOPDQRPAbGAAEAIImkbYDtBIgA0HqhCgG1AyaSoG2Ae468AMDBqJYFaqcNMAIAQCKjLTsBIgDwbJfCXRSvewxAkN96zK2ArzryAgAAiQw9AkAAoHV2vApIkJtwwB4AhZ0ABQAOrBftC5c3P3LUiSFR34sy7eRfABAAAEjBLoAIAHkIVzGrHTARlDv3isH19yJ%2BdTsBttCSIWinWxfOhIzrR85%2Fqzjy1vniyNnzxdIbb%2FohLNDRo0eLEydOGIgFq7b%2B3b38k%2FF%2F30v6%2FH%2F3fll8fjdNK8DV9Q33mhZaMQS0aiXg8s8mn0k6fe0rkyBw5GvfHP%2F3a0Vx7LgBov2%2F4e1fFoMrPxnP9N%2Bf3PTLlhS4lkPHBgEgF%2F3x53TkASi3PimG1efn%2F%2FowELzxZrFcrRCc%2F6bVAdrzOx3f4Ksb%2Fe74pj8c3%2FSDvuf%2FPJb%2FBQAEgENeaG%2F%2BohhUtQI%2F%2FvvJakC1KvBwdeD8ZLUAmlIt5Vez%2FGp5P5dn%2BsNBsqeKugAKAFCjnc8ef1zwxpsPHxdU9QPnv2V8qFU1q69m94PxTL%2B68ZcZ9q0o7QSIAJCNatlszTAcfHVgWH3%2B7V8m%2F3saBBQTMveMuSXFex1wyRAIAMzmriE4xIzt2uVH2wxPiwmXxqGgqiFQTMizZvnT4r3qv50LNNoAIwAQbnVgr5iw%2BPm%2FFoPifz4qJlzae92QoL8LxXtNUQMgADCj3vjzjmFYwIX%2FUTFhoZgwmByL9zrAWwACALTQk8WE1eOC899UTNgR0%2BK9ySy%2FRe%2FkNx58LP8jAMALVgeqxwX%2F9i%2BKCTO2vwmP4r1W6BuCdtKescWitgNu7cnSsWLCrrQCrm7y1c2%2Bq8V7tYSiL8ri%2Fq%2B1AcYKAMy%2FOqCYMP1xULw3s9GuMUAAyE1VPXvSMLT0RqSYsNFZ%2FmRpv7rpW9bPiQJAAYBDnDxrhiEDignrnbEq3qt3PIfaACMAQDOrA4oJZ7a%2FCY9l%2FboDgDFAAMhN3xB05AKsM%2BFveVS8d%2BXfvZPfXR4BCADM6YYh6OjqQMBiwmoZfzLLr17PU7zXbABNtxOgluYCAPDMG2OHiwmnHfcU7yX%2BjdkJEAEgO5bPosm8mFDxHk%2FoGQIBgPmooI0%2Bc2t5MeH0nXzFe%2B2lDTACAHRAG4oJFe9hEtMNWjS22K0LZ6omQL82EhzoZJ6xmPCgrYD3F%2B9V%2F7Wsn98KwM6vtAFGAMgxBFi%2FY3YHKCZ8XgCoivd2L%2F%2FEhjod8OCzsvjiMwGA3%2BYRAHTRjMWE1bP7%2FbvomeVTg74hEAA4nF6hHTCH9LRiwvIP%2FrD4%2FKWB4r2uH%2Fsy2SKiACAAAG1TFRI%2BqD6nlg1Gxw3tBMgzHDEEraeKFsiRPiYCAId01RAA8yqH2gAjAACEYydABIB89Q0BkCGPAAQABAAgyex%2FkLSNiPolAQCAFOwCiACQN8toQHZW1zd6RkEA4HAnkWU0YC7DB8YAAQCA5pi4CADUxGMAwDULAUCaBnixwQObiSIAANCcviEQAKjHJUMAHFT1%2Fv%2BDnTJlG%2BAbjkL72Q0QIHPVjr%2FDB2Ux%2BLyc%2FFf7XwSA7lADADymutFXr%2FntfjG%2B4e%2B27lm%2FIkABACcTUIdqVj%2BZ5X%2FxcJbf8i5%2FJi0CAADzmt7sq6V9y%2FoIADH1DQEEmOUPxjf7B8WjZ%2FkZs2qZgSVDkIdbF854oZfavXxq2SAkVBXvTW%2F2XSreW13fcG%2BxAgDAfi0v3kMAoIWqJbVzhgHyklnxXh16jroAQL1U1UIGpu%2FkK95DAADo%2Biy%2FO8V7JisCAC1UPQJYMwzQjln%2B9GZfLe0HWNafxVVDIABQr7uGANKZ3uyrmb7iPQQAgI6qnt1PC%2FeCFO%2FVpW8I8mA3wHz0DAEszmRZf3zD%2F%2BLeqPh%2F%2F3c4%2BXzx6Wiy1O%2FmLwBYAQDo0ixf8R4CABlQWQuHveEP972ip3hvUbQBzoR2jRnRDpi6RWgFrHivWdoAWwEASDbL37%2BLHiAAdEF%2F%2FDltGOA3pp33ps%2Fxdd5LyvK%2FAIAAAAuc5VfFe5%2BPZ%2FoPFO%2B1jFolAQCgxhu%2B4j0QAKwAQAyK97J0yRAIACzGDUNAl2f5ivegOV7XyMytC2feHv%2Fnj4uHGwOdMyIcRsrXABXvdUZvb%2Bb%2F7ur6hiJAAYCGwsDpvSDwZ3v%2FPWlUaHMAmBbv7Y5n%2Bpb1s9Xfu%2Bn%2FuPrv%2BKav8E8AoAWBoFoReHsvEFgdIHkAmBbvTZf2Fe9l6c4Ts%2Fy%2BIREAaHcYOPnE6sBpo0ITAeDRc3zFezm7Mp3lj2%2F4PcMhAJD%2F6kAVBP54b5UAagkA0w11FO9lP8t%2Fd98s37K%2BAECHA4FiQuYKAIr3OmMywy8ePsdXvCcAEDQMnC4UEwoAL5rlK97LXX%2FfLF%2FxHgIATw0E02LC6QoBwQKA4r1OULyHAMChwoBiwiABYH8THsv62VK8hwDAwgLB6X2rA4oJM%2FelLx959CyfLPWfmOVb1kcAoLFAsH91QDEhLN5khl8o3kMAoGWrA2v7VgcUE0I9s%2FxJ8d74hv%2Bu4UAAIIdAoJgQZnfniVl%2B35AgAJBzGFBMCM92Zd8Nv2c4EADociA4XSgmJK5%2BoXgPAQAUExJCr1C8hwAAL1wdWCsUE5K36Tv5ivcQAGDOQKCYkBwo3kMAgAWGAcWEtG2WX93w37WsjwAAzQaC04ViQprTf2KWr3gPAQBaEgj2rw4oJqQO%2B3fQM8tHAIBMVgfWCsWEzEbxHgIAdCwQKCbkaRTvIQBAoDCgmDC2yQy%2FULyHAADhA8HpQjFhl%2FULxXsgAMABAsH%2B1QHFhHl6d98sv284QACAeVYH1grFhG03Ld77sQ11QACARQQCxYTtcKd4%2FBU9s3wQAKCxMHDyidWB00ZloXqF4j0QAKCFgeD0E6sDHhccTr9QvAcCAGQYCKoQoJhwNor3QACAToWBk8XjrxpaHXhI8R4IABAqEJwrHm9GFMWdJ2b5lvVBAIDQqwNrRXeLCScz%2FMKGOiAAAM8NBKeLvIsJ%2B8Xjr%2BiZ5YMAAMwRCKoQ0OZiwumGOor3QAAAFhQG2lJMqHgPBAAgYSBoqphQ8R4IAECLVwfWivqKCScz%2FELxHggAQFaB4HQxWzFhfzrLH9%2Fw3zWCIAAA3QgEVQjYX0x454lZft8oQQz%2FX4ABAK6DJElxTemaAAAAAElFTkSuQmCC

or this:

<img src="islifethissimple.png" />

Remember that:

• Javascript can be disabled.
• Data urls may reduce 2 requests per image, but they are lengthy.
• Data url images are not cached so the user would be requesting the full page each visit (entirely true?)
• Need to make one small change in the image? You'll need a complete new data url. In an image sprite, all your images are used in one file and can be easily edited.

I would say that it's a bad idea as none of your images would show up if the user has JavaScript disabled. Yahoo! reckon that about 2% of their visitors don't use JavaScript (source)