All geek questions in one place

Css-sprites vs inline / javascript

I am making a website that displays a lot of small icons (stars, flags, folders ...)

Now I am using CSS sprite technique and it works great, but hard to work.

I am thinking of creating a large .js file with all images encoded as javascript variables. Then display the images as follows:

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 will be larger, but it is very easy to maintain and it will be cached by the browser.

Is this a good or bad idea? Is this cross browser?

+4
source share
4 answers

Stay with CSS sprites. If your users have JavaScript turned off, they will not see images.

+4
source

If you decide to stick with CSS sprites (because you need IE6 / 7 support, for example, or are concerned about the lack of a JS-JS backup), a few things that might help with maintenance:

  • Arrange sprites into separate images based on the shape . For example, put all your 20x20 icons in the same sprite, all your folders 30x15 in another sprite. (Yes, you will have more HTTP requests, but HTTP performance is one of many factors to consider.) This makes CSS calculation a lot easier. You can set sprites as separate columns, double columns (which are good for transfusion effects), or something that makes things cleaner. Working with a large irregular sprite is a pain!

  • Use a low effect template to add new images . Always add new elements to the bottom, for example, you don’t need to recount the CSS for the images over the new image. (It really makes sense if you organize the sprites in my first paragraph.)

  • If you are no longer going to use sprites, just skip them . Leave white spaces or gray x or something in their old place. Then, when you have time and a bunch of deleted images to clear, do them all at once. (Again, if you are crazy about performance, you might not like the idea of ​​leaving extra bytes in these files ...)

A few thoughts.

+2
source

Think about whether you’d better see it: data: images / 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% 2Ft 3ZCbDB1% 2FYdhBAADS% 2B4uiueX47xdpaw9AAADY09% 2B7MS9ab% 2Fz5oeEGAQBojx8Wi38U8D3DDAIA0D6LvEFXKwxe% 2BwMBAGihK8ViHgVU% 2F78XDS8IAEB7XVzATF3VPwgAQAbqvGH% 2FsLD0DwIAc6mWZJdq% 2FnzfsPIcV4p6qvX7fmsTZeLPRYdAAACYJXj2a1hJ0O4XBAAgI4ft2NfEa4UgAAAsQK% 2BY71FAFR4s% 2FYMAAGTs% 2B8Xsy% 2FiW% 2FkEAADI366OAd% 2k% 2BgAAAZO6gN3U7% 2FYEAAHTMQZb1v1dY% 2BgcBAOiUO8Xz9wrojT8% 2FMkwgAADd86Pi6a% 2F2WfoHAQDouKc9CqijaRAgAAAt1i8ef8e% 2FWhH4oWEBAQDovv1d% 2Fr5nOKA% 2BK4YAaLnqxn% 2B6sNMfCABAKFfc% 2FKF% 2BHgEAgAAAAAgAAIAAAAAIAACAAAAACAAAgAAAALTHkiHIzrnx5% 2BSC% 2FR% 2F7Rf0brZze% 2ByxCtVFMigYxJ% 2FeOw6JcKdLsdb% 2FIY5XqOzVx3szy3RY5xm2wiGsIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQWkuG4GBuXTizNv7PmpEAaLXe6vpGzzC82IohOLDq5v% 2BOYQBofwgwBC92xBD4QQG4VgsAAIAAwD53DAGAa3VXKAKcwa0LZ0qjANBeq% 2Bsb7mtWAAAAAaAelpYAXKMFgICuGAIA12gBAAAQAALoGwIA12gBIJ4bhgDANVoAAAAEgAAUmAC4RgsAAXnFBMA1WgAAAPKkZeKMtAMGaCdtgK0AAAACAAABeP4vACxczxAAtI43AAQAAEAAqJ9lJgDXZgEgoKuGAMC1WQAAAASAAPqGAMC1WQDwIwPAtVkAAAAEgC7 yrimAa3P29E2eg% 2F0AANrFPgBWAACAA1gxBHPpjT9rhoHcLf8Hky bqUw7LYjRMdk1GAAAO6tgrFgGpz% 2F07o3EA8IQ0F85% 2BAOpZARgl% 2B9PaAAsAjblkCABaQxtgAQCAVIYPLP8LAN1nuQnANVkACEjDCYB9yrSTf9dkAQCAFEa7lv8FgBj6hgDANVkACGZ1fcOPDWCflI8AXJMFAAASGe0aAwEgDkUnAK7FAkBAXjsBmK4ApGsB7FosAACQLgAYAwEgDu2AAVyLBQAAAq8ADPQBEAAACMdOgAJAJD1DAJCctwAEAABSsAugABCNZScA1% 2BJsLRmC% 2Bd26cEbsJWsvn1o2CBza4IuyuP% 2FrNEUAq% 2Bsb7mNWAABIQRtgASCiviEAcA0WAPz4AMIp020F6BosAACQytAjAAEgIO% 2BfArgGCwAB3TUEQHRlup0AXYMFAABSsROgABCR5SeAdHqGQABIRQcqIPbs3y6AAgAA8STcBdAk7JC0UDwk7YDJmVbAHFa1EdDOr7QBtgIAQLAAYAwEgLgsQQG49goAAXkTAAgrYRtg114BAIBUtAEWACLrGwIA114BIJ4bhgCIKt0TANdeAQCAZEa73oQWAOJSiALg2isABORVFCDm7D% 2FtJkCuvQIAACkk3AYYAaAVLEMBNGx1faNnFASA1D9Cy1BASMOBMRAAAIgn3U6AJl4CQGv0DAFAYzx6rcGKIWAeR% 2F% 2Fqbw1C7if% 2F8krxH185biAyN9z8sPj8n% 2F9Xkr89eKAIUAAg3HLUkdffLIpjbh45Wz56tFg% 2BccJAZG609UvXXOa7jhuCWlwNd9HZ% 2FIWjDm04F7fTBYCEbYCvOvICAACpwoc2wAIA8XalKrc% 2BcdShBYab11xzEQD8GBu0ddtRhza4fy% 2FNJCDt5F8AEAAASMHyvwDAQ% 2BHeSR3dVAQIbTC4% 2Fp5rLgJAKiHbAS dadgRaMglIuBOgFuwCAACJlENjIAAwFWpJyiMASG% 2B48X7Er91z5AWAtom1JLXzmSMOkcPHQB GgAABAEuXOp% 2Bn% 2Btp0ABQAeuRTtC4% 2BuX3bUIeUsPGYTIG2ABQAAkoUPOwEKADwSb1lqx6uAkFLKjYBcawUAfiNcY4ry5keOOqQ8B7c% 2FTvN3007% 2BNQESAABIQRtgAYDH9cPNPuwICEkNNz90rUUASG11fSNeANgWACDpObgTbyfAiNdaAQCAVhjtGgMBgCeFSqbaAUM6QdsAKwAUAASAVtAOGGKuAAyTPQPwCqAAABBbyjbAIzsBCgD8loC9ADwGgBSCtgG% 2B5MgLAG11N1wAuO8xAEQzshOgAABAovCdsBV3wp0AEQBaqxfuInTNjoCQZBZ% 2BK% 2BQjgJ4jLwAAkIBdAAUAni7cKyqlHQEhzQrAlp0AEQBaY3V9I95bAJveAoAkASDRVsCJ2wBrBCQAAJAkeGgDLADwTP1QKwBbtx1xaFjQHgB9R14A8CNtVQCwIyA07n7CVwDTPQMQAAQAAFIZegQgACClWgWANAbX34v4tRUACgCtdyNcANhWBwBhzvd0OwHeNfoCAEDsm3DC% 2Fht2AhQAeDY7AgKLvQlrA4wA0ErxOlXt2BEQQgQPuwAKAAAkvBEnagNsF0ABgOdYXd% 2FohbsYXf% 2FAgYcmz7ntePsARLy2CgAAtMLwgTEQAHiRUHUApRoAMPt3TRUAmAj1JoC3AKDB823743R% 2FO10bYE2AFmDFEBB6NnX9ctjvPlxeKYavHPcjyO24bX6Y7m9rAywA8ELhlquqdsBLr30lu3% 2F37v% 2F% 2B72F% 2FpNW1fOXUsrOVHPQNQf08AliMq% 2BECgHbA0P3zPF0bgBtGXwCAWi298aZBgAMa7WoEJADwIv1wM4NMdwRcOuYZOGRAEaAAIAC01pZHANDp2X% 2FaTYC8BigAQM0n wNmvGQQ4gITbACMAZCXcctVILwBgQbQBFgBy% 2BrHGW666f8% 2BBhw4bDoyBAAAdsvTWeYMAB2EnQAGAA% 2BuFujZcu% 2B yIA66lAgBksgLwktcA4SAGDxQBCgAcVLw6gAx3BdQICFxLBQDqFq4d8GjTmwDQVQnbAF81% 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% 2BAsALEqoJS47AsIc582tkG8A9Bx5AaDrYi1x 6QQIWRkOFAEKAACkWQFI2Aa4tBOgAMDChKtyHV23KyDMdM7EbAN8yZEXALruriEA2kobYAEAACsATfIKoADQeb1oX7i85hEAzHTObH8c8WtrAiQAAJCC5X8BgMUKt8xV2hEQZrsRb34Y8Wv3HXkBoNNW1zfi7Qi4qRkQ5BCaU% 2B4EGLFVugAAQCuMdo2BAMCihUq65dZtRxwOaLjxfsSvrQBQABAAuhkA7AgIWawADJM9A% 2FAKoAAAEFu582nCAGD8BQAWLV4hoF0B4UCGmyF3AtQGOIEVQ5BEuHbA1X4AS% 2FftDNiqG83ySjF85Xhnv9% 2FSq18tjrz6Ow70LOepnQAFAKjb4J% 2F% 2BxiC0TFX wvXJqubPf70sX% 2Ftvkk91NeNtOgDTDI4A0VLwCT78Jx2wD3HPkBYAoVLzCoi9ulv9nog2wAADQjYvba3kGgNGWnQARADprdX2jZxSApwaAgFsBR2yRLgAALOritvqWQZjB8IExEABoiiUvWKClYy% 2FndxOO2QOg79cqAERjyQt43P10W2eX6bYCFAAEAIB6rJz9hkGY0dBOgAIAUi% 2BQxuD6exG% 2FttVQASCcG4YAFuSll43BjMp0OwHeNfoCAEAtll% 2FP8w2AciddDYCdAAUAmtM3BMBjN% 2BFbId8C6DnyAoAAANRzYdMGeLbgYRdAAQCgExc2bYBnYhdAAYBmqXwFHg8AMdsA9xx5ASDaj14nQFiQpVe% 2FahBmoA2wAADQjQtbhjUAEWf% 2FhZboAkBgPUMAVMrtjyN% 2BbY9CBQCAeuTaAyClwQNvAQgANM3yF9Rs6diXs% 2Fx3Dzc% 2FjHi4% 2Bn6xAkBUVw0BUEnZBTDdRoBaoqe0Ygho9Af3n79bLL3xZnb% 2F7sE% 2F% 2FU1R3vyFA5iB5TNfNwgzGu16BCAA0LR% 2BuG987Hhx5Oz57P7ZS% 2BN% 2Ft0skizTceD% 2Fi11YEmJBHAAJAs7ZuO% 2Bos OKzZCXCm2X% 2FaTYDUQQkA0PIT5ezXDEImll% 2F% 2F% 2FSz % 2F3eXOp2n% 2B7tDalgCAFYAmZhueo8NTDTfj7QSoDbAAENb4xx8uABT37znwLJQ2wDMGj4ExEACAZ99U3jpvEHK5qGkDPOMf95sRAEglVBXs6NplRxyeELQNcM% 2BRFwCiUwWbwwrAS8cNQga0AZ6dNsACAPC8AJBh86KQxynTNsCjLTsBIgBEdCnaFx5d9xgAHjsnYm4FrBW6AACZzC5f% 2B4pBaPsFbdUjgFkNPQIQAEgm3jLYTp6vAi69dsqvte3HKNMugBF7ABR2AhQAiNcLu7z5kaMO% 2ByXqj1GmnfwLAAIAZDK7fF0hYNutnP2GQZiBXQAFANIKl4LLrU% 2FyDAA2mWFBBtffi% 2Fi17QQoAMQWsR1wuf2JA89ivCSkzbQCkHAnwPG1z2uAAgBksgKgHXDr5dgIqExYFFsO% 2FWYEAFILtQpgR0DYdz7cCvkGQM% 2BRFwAIGACKnc8cceq% 2FmGW4CVBqw4EiQAEAePHJctYjgFYfn9fyDAAp2wCXdgIUAEguXDWsdsCwdy7EbAN8yZEXAHjoriHIxDG7Arb2YqYN8My0ARYAgIOeMHYFbK1c% 2BzQEXQHwCqAAwJ5etC9cXvMIACbnwvbHEb% 2B2JkACAGQ2y3zVjoBtpQ3wbCz% 2FIwC0Q7jlsDLbHQEFAGq% 2BEW9% 2BGPFr9x15AYBi0hIz3o6Am5oBQcownHInwIgt0AUAyNzSG79nEFpq% ​​2BczXDcIMRrvGQACgLUI9Bii3buf5D7cjIDUabrwf8WsrABQAiHxS5LolMO1kq% 2BY5VgCGyZ4BeAVQAIAMTxjtgFtp% 2BfXfzzMI73yaMAD43QgAtEU% 2F2hcu7QpIcMPNkDsBagMsAPCEG% 2BECwH27AlKPpVe% 2FahBmXQGwE6AAYAhgxpPmLY8BWndMMt0KOGUbYDsBIgC0R7xeANoBE1zQNs A9R74dVgxBa6iMzSU1% 2F9F% 2Fejh7E2BaMfNfPvv1YuXctw3GDLQBRgCAOSyPA8DyNARc% 2FtkkCIyuX1bU2NRFa3yzXxnf9JfPfKNYfj3vLYBHW3YCJJ0lQ9Aety6cCRXLq2fpR% 2F% 2FH33bnC% 2B18VgzHgaCcBoIMeh28fGq5% 2FYFrfJN % 2FeNP% 2FRue6% 2FX36X% 2F8g2QrAzq% 2FSFAGsrm% 2B471gBgI45dvzhysDe6kC1IlAFgYcrBB9MAgIHCIZ7y% 2FpHxzf9apavyc8iAoAxGABompp SUL1t2% 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% 2F OqCYMP1xULw3s9GuMUAAyE1VPXvSMLT0RqSYsNFZ% 2FmRpv7rpW9bPiQJAAYBDnDxrhiEDignrnbEq3qt3PIfaACMAQDOrA4oJZ7a% 2FCY9l% 2FboDgDFAAMhN3xB05AKsM% 2BFveVS8d% 2BXfvZPfXR4BCADM6YYh6OjqQMBiwmoZfzLLr17PU7zXbABNtxOgluYCAPDMG2OHiwmnHfcU7yX% 2BjdkJEAEgO5bPosm8mFDxHk% 2FoGQIBgPmooI0% 2Bc2t5MeH0nXzFe% 2B2lDTACAH RAG4oJFe9hEtMNWjS22K0LZ6omQL82EhzoZJ6xmPCgrYD3F% 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% 2 FkK95DAADo% 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% 2BoXgPAQAUExJCr1C8hwAAL1wdWCsUE5K36Tv5ivcQAGDOQKCYkBwo3kMAgAW GAcWEtG2WX93w37WsjwAAzQaC04ViQprTf2KWr3gPAQBaEgj2rw4oJqQO% 2B3fQM8tHAIBMVgfWCsWEzEbxHgIAdCwQKCbkaRTvIQBAoDCgmDC2yQy% 2FULyHAADhA8HpQjFhl% 2FULxXsgAMABAsH% 2B1QHFhHl6d98sv284QACAeVYH1grFhG03Ld77sQ11QACARQQCxYTtcKd4% 2FBU9s3wQAKCxMHDyidWB00ZloXqF4j0QAKCFgeD0E6sDHhccTr9QvAcCAGQYCKoQoJhwNor3QACAToWBk8XjrxpaHXhI8R4IABAqEJwrHm9GFMWdJ2b5lvVBAIDQqwNrRXeLCScz% 2FMKGOiAAAM8NBKeL vIsJ% 2B8Xjr% 2BiZ5YMAAMwRCKoQ0OZiwumGOor3QAAAFhQG2lJMqHgPBAAgYSBoqphQ8R4IAECLVwfWivqKCScz% 2FELxHggAQFaB4HQxWzFhfzrLH9% 2Fw3zWCIAAA3QgEVQjYX0x454lZft8oQQz% 2FX4ABAK6DJElxTemaAAAAAElFTkSuQmCC

or that:

 <img src="islifethissimple.png" />

Remember, that:

  • Javascript may be disabled.
  • Data URLs can reduce 2 image requests, but they are long.
  • The images of the data URLs are not cached , so the user will request a full page for each visit (completely right?)
  • Need to make a slight image change? You will need a complete new data url. In image sprite, all your images are used in one file and can be easily edited.
+1
source

I would say that this is a bad idea, since none of your images will appear if the user has disabled JavaScript. Yahoo! that about 2% of visitors do not use JavaScript (source)

0
source

Source: https://habr.com/ru/post/1339877/

More articles:


All Articles