简体   繁体   English

CSS精灵与内联/ JavaScript

[英]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. 现在,我正在使用CSS Sprite技术,它的效果很好,但是很难维护。

I'm thinking on making a big .js file with all images encoded as javascript variables. 我正在考虑制作一个大的.js文件,将所有图像编码为javascript变量。 Then display the images this way: 然后以这种方式显示图像:

images.js images.js

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

html code HTML代码

<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. 我知道.js文件会更大,但是非常易于维护,并且会被浏览器缓存。

It's a good or bad idea? 这个主意是好是坏? Is this cross-browser? 这是跨浏览器吗?

Stay with CSS sprites. 保持CSS精灵。 If your users have JavaScript disabled, they won't see the images. 如果您的用户禁用了JavaScript,他们将看不到图像。

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: 如果您决定坚持使用CSS Sprites (例如,因为您需要IE6 / 7支持,或者担心无JS回退),那么一些可能有助于维护的事情:

  • 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. 例如,将您所有的20x20徽章放置在同一个精灵中,所有30x15文件夹放在另一个精灵中。 (Yes, you will have more HTTP requests, but HTTP performance is one of many factors to consider.) This makes calculating CSS much simpler. (是的,您将有更多的HTTP请求,但是HTTP性能是要考虑的许多因素之一。)这使CSS 计算变得更加简单。 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. 例如,始终将新项目添加到底部,因此您无需为新图像上方的图像重新计算CSS。 (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. 将空白或灰色x或其他东西留在其旧位置。 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%2FrjgEIAAAzfve3o042t8GAQAI7c7ej 试想,你宁愿看到这一点:数据:图像/ 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%2FrjgEIAAAzfve3o042t8GAQAI7c7ej bhpvfHnR4YfBAAgnR%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 bhpvfHnR4YfBAAgnR%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%2Fp5rLgJAKiHbASdadgRaMglIuBOgFuwCAACJlENjIAAwFWpJy %2F0AANrFPgBWAACAA1gxBHPpjT9rhoHcLf8HkybqUw7LYjRMdk1GAAAO6tgrFgGpz%2F07o3EA8IQ0F85%2BAOpZARgl%2B9PaAAsAjblkCABaQxtgAQCAVIYPLP8LAN1nuQnANVkACEjDCYB9yrSTf9dkAQCAFEa7lv8FgBj6hgDANVkACGZ1fcOPDWCflI8AXJMFAAASGe0aAwEgDkUnAK7FAkBAXjsBmK4ApGsB7FosAACQLgAYAwEgDu2AAVyLBQAAAq8ADPQBEAAACMdOgAJAJD1DAJCctwAEAABSsAugABCNZScA1%2BJsLRmC%2Bd26cEbsJWsvn1o2CBza4IuyuP%2FrNEUAq%2Bsb7mNWAABIQRtgASCiviEAcA0WAPz4AMIp020F6BosAACQytAjAAEgIO%2BfArgGCwAB3TUEQHRlup0AXYMFAABSsROgABCR5SeAdHqGQABIRQcqIPbs3y6AAgAA8STcBdAk7JC0UDwk7YDJmVbAHFa1EdDOr7QBtgIAQLAAYAwEgLgsQQG49goAAXkTAAgrYRtg114BAIBUtAEWACLrGwIA114BIJ4bhgCIKt0TANdeAQCAZEa73oQWAOJSiALg2isABORVFCDm7D%2FtJkCuvQIAACkk3AYYAaAVLEMBNGx1faNnFASA1D9Cy1BASMOBMRAAAIgn3U6AJl4CQGv0DAFAYzx6rcGKIWAeR%2F%2Fqbw1C7if%2F8krxH185biAyN9z8sPj8n%2F9Xkr89eKAIUAAg3HLUkdffLIpjbh45Wz56tFg%2BccJAZG609UvXXOa7jhuCWlwNd9HZ%2FIWjDm04F7fTBYCEbYCvOvICAACpwoc2wAIA​​8XalKrc%2BcdShBYab11xzEQD8GBu0ddtRhza4fy%2FNJCDt5F8AEAAASMHyvwDAQ%2BHeSR3dVAQIbTC4%2Fp5rLgJAKiHbASdadgRaMglIuBOgFuwCAACJlENjIAAwFWpJy iMASG%2B48X7Er91z5AWAtom1JLXzmSMOkcPHQBGgAABAEuXOp%2Bn%2Btp0ABQAeuRTtC4%2BuX3bUIeUsPGYTIG2ABQAAkoUPOwEKADwSb1lqx6uAkFLKjYBcawUAfiNcY4ry5keOOqQ8B7c%2FTvN3007%2BNQESAABIQRtgAYDH9cPNPuwICEkNNz90rUUASG11fSNeANgWACDpObgTbyfAiNdaAQCAVhjtGgMBgCeFSqbaAUM6QdsAKwAUAASAVtAOGGKuAAyTPQPwCqAAABBbyjbAIzsBCgD8loC9ADwGgBSCtgG%2B5MgLAG11N1wAuO8xAEQzshOgAABAovCdsBV3wp0AEQBaqxfuInTNjoCQZBZ%2BK%2BQjgJ4jLwAAkIBdAAUAni7cKyqlHQEhzQrAlp0AEQBaY3V9I95bAJveAoAkASDRVsCJ2wBrBCQAAJAkeGgDLADwTP1QKwBbtx1xaFjQHgB9R14A8CNtVQCwIyA07n7CVwDTPQMQAAQAAFIZegQgACClWgWANAbX34v4tRUACgCtdyNcANhWBwBhzvd0OwHeNfoCAEDsm3DC%2Fht2AhQAeDY7AgKLvQlrA4wA0ErxOlXt2BEQQgQPuwAKAAAkvBEnagNsF0ABgOdYXd%2FohbsYXf%2FAgYcmz7ntePsARLy2CgAAtMLwgTEQAHiRUHUApRoAMPt3TRUAmAj1JoC3AKDB823743R%2FO10bYE2AFmDFEBB6NnX9ctjvPlxeKYavHPcjyO24bX6Y7m9rAywA8ELhlquqdsBLr30lu3%2F37v%2F%2B72F%2FpNW1fOXUsrOVHPQNQf08AliMq%2BECgHbA0P3zPF0bgBtGXwCAWi298aZBgAMa7WoEJADwIv1wM4NMdwRcOuYZOGRAEaAAIAC01pZHANDp2X%2FaTYC8BigAQM0nwNmvGQQ4gITbACMAZCXcctVILwBgQbQBFgBy%2BrHGW666f8%2BBhw4 iMASG%2B48X7Er91z5AWAtom1JLXzmSMOkcPHQBGgAABAEuXOp%20亿%2Btp0ABQAeuRTtC4%2BuX3bUIeUsPGYTIG2ABQAAkoUPOwEKADwSb1lqx6uAkFLKjYBcawUAfiNcY4ry5keOOqQ8B7c%2FTvN3007%2BNQESAABIQRtgAYDH9cPNPuwICEkNNz90rUUASG11fSNeANgWACDpObgTbyfAiNdaAQCAVhjtGgMBgCeFSqbaAUM6QdsAKwAUAASAVtAOGGKuAAyTPQPwCqAAABBbyjbAIzsBCgD8loC9ADwGgBSCtgG%2B5MgLAG11N1wAuO8xAEQzshOgAABAovCdsBV3wp0AEQBaqxfuInTNjoCQZBZ%2BK%2BQjgJ4jLwAAkIBdAAUAni7cKyqlHQEhzQrAlp0AEQBaY3V9I95bAJveAoAkASDRVsCJ2wBrBCQAAJAkeGgDLADwTP1QKwBbtx1xaFjQHgB9R14A8CNtVQCwIyA07n7CVwDTPQMQAAQAAFIZegQgACClWgWANAbX34v4tRUACgCtdyNcANhWBwBhzvd0OwHeNfoCAEDsm3DC%2Fht2AhQAeDY7AgKLvQlrA4wA0ErxOlXt2BEQQgQPuwAKAAAkvBEnagNsF0ABgOdYXd%2FohbsYXf%2FAgYcmz7ntePsARLy2CgAAtMLwgTEQAHiRUHUApRoAMPt3TRUAmAj1JoC3AKDB823743R%2FO10bYE2AFmDFEBB6NnX9ctjvPlxeKYavHPcjyO24bX6Y7m9rAywA8ELhlquqdsBLr30lu3%2F37v%2F%2B72F%2FpNW1fOXUsrOVHPQNQf08AliMq%2BECgHbA0P3zPF0bgBtGXwCAWi298aZBgAMa7WoEJADwIv1wM4NMdwRcOuYZOGRAEaAAIAC01pZHANDp2X%2FaTYC8BigAQM0nwNmvGQQ4gITbACMAZCXcctVILwBgQbQBFgBy%2BrHGW666f8%2BBhw4 bDoyBAAAdsvTWeYMAB2EnQAGAA%2BuFujZcu%2ByIA66lAgBksgLwktcA4SAGDxQBCgAcVLw6gAx3BdQICFxLBQDqFq4d8GjTmwDQVQnbAF81%2BgIALGYVIMNNjKDxgK8NsADAgYXcETDPAHDKrxXaq28IBIDcxOtdrR0wdDPcp538CwACACxoBeB1hYDwPJb%2FBQCk1ufPErLdEfBlv1ZoLzsBCgB5WV3fiBcAtj9x4KGLKwAJdwIM2VpdAICGVgC0A4bnh%2FuhMRAAmFWopSs7AgI16xkCASBXsZauMuwECLzYcKAIUACALp4EZz0CgOcp7QQoADCzS9G%2B8Oi6XQEB11ABAHJxzK6A8CxDOwEKAMws4I6A9%2FI8EewKCK6hAgA1CtfAorz5kaMOXTqn007%2BNQESAGCxll61IyA8jTbAAgDzibcjYKaPAGwJDK3UNwQCQJZW1zfiPQLY1AwIOnVOJ1wAiNhSXQCAplcA3vg9gwBPMdo1BgIA8wqVYMut23n%2Bw%2B0ICG2jAFAAEADyCgB2BIROrQAMkz0D8AqgAAANnAjaAcMzAoAxEACYV8BeAAoBgUPTBlgAyN7dcAHgvl0BoTMrAHYCFACg8yfDWx4DwG8FejsBCgDMrRfugnHNjoCAa6cAALl4yauAsJ9dAAUAmG0FwI6AwOF5DVAAyNvq%2BkYvXADQDhi6cS6nbQOsEZAAAA157ZQxgH20ARYAOLxQS1nlTp6vAdoREFqjbwgEgK4ItZSlERB05FxO9wxAABAAoMGT4XVFgLDf0CMAAQBpduaZQ46bAh077pcK7aAAsAErhqARN8IFgO3bWT5T%2F9I%2F%2FDzMMTp69Gjx5RMnnJ0t98X6300%2BSc7jdDsB3nXkrQAAkIidAAUADs%2BOgMBchhvvR%2FzaPUdeAOiKeB2tduwICFnP%2Fu0CKAAAkE6582mav2sXQAGAw4vYDnh0%2FQMHHmow3Lzmm bDoyBAAAdsvTWeYMAB2EnQAGAA%2BuFujZcu%2ByIA66lAgBksgLwktcA4SAGDxQBCgAcVLw6gAx3BdQICFxLBQDqFq4d8GjTmwDQVQnbAF81%2BgIALGYVIMNNjKDxgK8NsADAgYXcETDPAHDKrxXaq28IBIDcxOtdrR0wdDPcp538CwACACxoBeB1hYDwPJb%2FBQCk1ufPErLdEfBlv1ZoLzsBCgB5WV3fiBcAtj9x4KGLKwAJdwIM2VpdAICGVgC0A4bnh%2FuhMRAAmFWopSs7AgI16xkCASBXsZauMuwECLzYcKAIUACALp4EZz0CgOcp7QQoADCzS9G%2B8Oi6XQEB11ABAHJxzK6A8CxDOwEKAMws4I6A9%2FI8EewKCK6hAgA1CtfAorz5kaMOXTqn007%2BNQESAGCxll61IyA8jTbAAgDzibcjYKaPAGwJDK3UNwQCQJZW1zfiPQLY1AwIOnVOJ1wAiNhSXQCAplcA3vg9gwBPMdo1BgIA8wqVYMut23n%2BW%2B0ICG2jAFAAEADyCgB2BIROrQAMkz0D8AqgAAANnAjaAcMzAoAxEACYV8BeAAoBgUPTBlgAyN7dcAHgvl0BoTMrAHYCFACg8yfDWx4DwG8FejsBCgDMrRfugnHNjoCAa6cAALl4yauAsJ9dAAUAmG0FwI6AwOF5DVAAyNvq%2BkYvXADQDhi6cS6nbQOsEZAAAA157ZQxgH20ARYAOLxQS1nlTp6vAdoREFqjbwgEgK4ItZSlERB05FxO9wxAABAAoMGT4XVFgLDf0CMAAQBpduaZQ46bAh077pcK7aAAsAErhqARN8IFgO3bWT5T%2F9I%2F%2FDzMMTp69Gjx5RMnnJ0t98X6300%2BSc7jdDsB3nXkrQAAkIidAAUADs%2BOgMBchhvvR%2FzaPUdeAOiKeB2tduwICFnP%2Fu0CKAAAkE6582mav2sXQAGAw4vYDnh0%2FQMHHmow3Lzmm okAAEBDweOBMRAAYA6lGgA4tNH2LyN%2BbbsACgCd0wsVALwFAIc%2Fj7Y%2FTve307UB1gRIAAAgFW2ABQDq41VAYLab8OaHEb9235EXALrmarQvPNr0GAAOo9y5l%2B5vp2sDcMORFwAASBXgdzUCEgCoSz%2Fc7CXHHQGhRYK2AVYEKAAIANnbuu2oQ46z%2F7SbAHkNUAAAiC1ZG%2BCh5X8BgDqFW9Ya6QUAh6INMAJAN37U8Za17t9z4CHH4DEwBgIAAEkkbQNsJ0ABgNr1Ql3Arl12xGFOKdsAu0YKAAAENHigCFAAgMPSDhjmMtqyEyACQJdcCncR0w4Y5jt3Ym4FfNWRFwAASGToEYAAQO0C7gjoVUCY6yYcsAdAYSdAAaDDwjUDKm9%2B5KjDPBL10SjTTv4FAAEAgBTsAigAIN3WM5uwIyDMZXD9vYhf206AAkA3ra5vxAsA2wIAZLUCkHAnwJAt0wUAAB4F54TFs%2BXQ%2BAsALEqoJS47AsIc582tkG8A9Bx5AaDrYi1x6QQIWRkOFAEKAACkWQFI2Aa4tBOgAMDChKtyHV23KyDMdM7EbAN8yZEXALruriEA2kobYAEAACsATfIKoADQeb1oX7i85hEAzHTObH8c8WtrAiQAAJCC5X8BgMUKt8xV2hEQZrsRb34Y8Wv3HXkBoNNW1zfi7Qi4qRkQ5BCaU%2B4EGLFVugAAQCuMdo2BAMCihUq65dZtRxwOaLjxfsSvrQBQABAAuhkA7AgIWawADJM9A%2FAKoAAAEFu582nCAGD8BQAWLV4hoF0B4UCGmyF3AtQGOIEVQ5BEuHbA1X4AS%2FftDNiqG83ySjF85Xhnv9%2FSq18tjrz6Ow70LOepnQAFAKjb4J%2F%2BxiC0TFXwvXJqubPf70sX%2Ftvkk91NeNtOgDTDI4A0VLwCT78Jx2wD3HPkBYAoVLzCoi9ulv9nog2wAADQjYvba3kGgNGWnQARADp okAAEBDweOBMRAAYA6lGgA4tNH2LyN%2BbbsACgCd0wsVALwFAIc%2Fj7Y%2FTve307UB1gRIAAAgFW2ABQDq41VAYLab8OaHEb9235EXALrmarQvPNr0GAAOo9y5l%2B5vp2sDcMORFwAASBXgdzUCEgCoSz%2Fc7CXHHQGhRYK2AVYEKAAIANnbuu2oQ46z%2F7SbAHkNUAAAiC1ZG%2BCh5X8BgDqFW9Ya6QUAh6INMAJAN37U8Za17t9z4CHH4DEwBgIAAEkkbQNsJ0ABgNr1Ql3Arl12xGFOKdsAu0YKAAAENHigCFAAgMPSDhjmMtqyEyACQJdcCncR0w4Y5jt3Ym4FfNWRFwAASGToEYAAQO0C7gjoVUCY6yYcsAdAYSdAAaDDwjUDKm9%2B5KjDPBL10SjTTv4FAAEAgBTsAigAIN3WM5uwIyDMZXD9vYhf206AAkA3ra5vxAsA2wIAZLUCkHAnwJAt0wUAAB4F54TFs%2BXQ%2BAsALEqoJS47AsIc582tkG8A9Bx5AaDrYi1x6QQIWRkOFAEKAACkWQFI2Aa4tBOgAMDChKtyHV23KyDMdM7EbAN8yZEXALruriEA2kobYAEAACsATfIKoADQeb1oX7i85hEAzHTObH8c8WtrAiQAAJCC5X8BgMUKt8xV2hEQZrsRb34Y8Wv3HXkBoNNW1zfi7Qi4qRkQ5BCaU%2B4EGLFVugAAQCuMdo2BAMCihUq65dZtRxwOaLjxfsSvrQBQABAAuhkA7AgIWawADJM9A%2FAKoAAAEFu582nCAGD8BQAWLV4hoF0B4UCGmyF3AtQGOIEVQ5BEuHbA1X4AS%2FftDNiqG83ySjF85Xhnv9%2FSq18tjrz6Ow70LOepnQAFAKjb4J%2F%2BxiC0TFXwvXJqubPf70sX%2Ftvkk91NeNtOgDTDI4A0VLwCT78Jx2wD3HPkBYAoVLzCoi9ulv9nog2wAADQjYvba3kGgNGWnQARADp rdX2jZxSApwaAgFsBR2yRLgAALOritvqWQZjB8IExEABoiiUvWKClYy%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%2Fi17QQoAMQWsR1wuf2JA89ivCSkzbQCkHAnwPG1z2uAAgBksgKgHXD rdX2jZxSApwaAgFsBR2yRLgAALOritvqWQZjB8IExEABoiiUvWKClYy%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%2Fi17QQoAMQWsR1wuf2JA89ivCSkzbQCkHAnwPG1z2uAAgBksgKgHXD r5dgIqExYFFsO%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%2 r5dgIqExYFFsO%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%2 B3O6n2xK7TLcVoAAgAEBwx44XR85%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%2BdTs B3O6n2xK7TLcVoAAgAEBwx44XR85%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%2BdTs BttCSIWinWxfOhIzrR85%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%2F BttCSIWinWxfOhIzrR85%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%2F oGQIBgPmooI0%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%2FAIA oGQIBgPmooI0%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%2FAIA AAAuc5VfFe5%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%2FBU9s3wQAKCxMHDyidWB00ZloXqF4j0QAKCFgeD0E6sDHhccTr9QvAcCAGQYCKoQoJhwNor3QACAToWBk8XjrxpaHXhI8R4IABAqEJwrHm9GFMWdJ2b AAAuc5VfFe5%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%2FBU9s3wQAKCxMHDyidWB00ZloXqF4j0QAKCFgeD0E6sDHhccTr9QvAcCAGQYCKoQoJhwNor3QACAToWBk8XjrxpaHXhI8R4IABAqEJwrHm9GFMWdJ2b 5lvVBAIDQqwNrRXeLCScz%2FMKGOiAAAM8NBKeLvIsJ%2B8Xjr%2BiZ5YMAAMwRCKoQ0OZiwumGOor3QAAAFhQG2lJMqHgPBAAgYSBoqphQ8R4IAECLVwfWivqKCScz%2FELxHggAQFaB4HQxWzFhfzrLH9%2Fw3zWCIAAA3QgEVQjYX0x454lZft8oQQz%2FX4ABAK6DJElxTemaAAAAAElFTkSuQmCC 5lvVBAIDQqwNrRXeLCScz%2FMKGOiAAAM8NBKeLvIsJ%2B8Xjr%2BiZ5YMAAMwRCKoQ0OZiwumGOor3QAAAFhQG2lJMqHgPBAAgYSBoqphQ8R4IAECLVwfWivqKCScz%2FELxHggAQFaB4HQxWzFhfzrLH9%2Fw3zWCIAAA3QgEVQjYX0x454lZft8oQQz%2FX4ABAK6DJElxTemaAAAAAElFTkSuQmCC

or this: 或这个:

<img src="islifethissimple.png" />

Remember that: 请记住:

  • Javascript can be disabled. 可以禁用Javascript。
  • Data urls may reduce 2 requests per image, but they are lengthy. 数据网址可能会减少每个图片2个请求,但它们很长。
  • 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. 您需要一个完整的新数据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. 我会说这是一个坏主意,因为如果用户禁用了JavaScript,则所有图片都不会显示。 Yahoo! 雅虎! reckon that about 2% of their visitors don't use JavaScript (source) 估计约有2%的访客未使用JavaScript (来源)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM