性能工具带：SpriteMe

As I mentioned in a prior post, there are a lot of really good tools available to developers to aid in making performance optimization quick and easy. I’ve decided to highlight some of my favorite tools that I’ve come across and thought I’d kick things off with Steve Souders excellent SpriteMe bookmarklet.

正如我在之前的文章中提到的，开发人员可以使用很多非常好的工具来帮助快速而轻松地进行性能优化。 我决定重点介绍我遇到的一些我最喜欢的工具，并认为我可以使用Steve Souders出色的SpriteMe小书签来开始工作。

Having a lot of images in a page can be very costly. Each image requires an HTTP request, and each HTTP request comes with plenty of overhead. I’ve seen pages with 20+ icons, each requiring their own request - that’s a serious hinderance to performance.

页面中包含大量图像可能会非常昂贵。 每个图像都需要一个HTTP请求，并且每个HTTP请求都带有大量开销 。 我看过带有20多个图标的页面，每个图标都有自己的要求-这严重影响了性能。

A way of combatting the issue is to use sprites. For the uninitiated, an image sprite is simply one big image that includes many smaller images. This allows you to make one HTTP request, and using CSS, still make use of a variety of different images. If you plan ahead and do this while initially building the site, it’s rather simple to do. How do you quickly implement this strategy in an existing site though?

解决该问题的一种方法是使用精灵。 对于初学者来说，图像精灵只是一个大图像，其中包括许多较小的图像。 这使您可以发出一个HTTP请求，并且使用CSS仍可以使用各种不同的图像。 如果您事先计划并在最初构建站点时执行此操作，则操作非常简单。 但是，您如何在现有站点中快速实施此策略？

That’s where SpriteMe comes in. Steve Souders wrote a handy bookmarklet that looks through the images on a given page and identifies those that could potentially be combined into a sprite. At that point, it gives you a simple drag and drop interface with which you can add or remove items from a sprite. Once you’ve determined which images you’d like to combine, you can click “make sprite” and the bookmarklet will automatically create the image sprite for you, inject it into the page, and show you the CSS you’ll need to add.

这就是SpriteMe的用武之地。Steve Souders编写了一个方便的书签，可以浏览给定页面上的图像，并识别可以组合为sprite的图像。 到那时，它为您提供了一个简单的拖放界面，您可以使用该界面添加或删除精灵中的项目。 确定要合并的图像后，您可以单击“制作精灵”，书签小程序将自动为您创建图像精灵，将其注入页面中，并向您显示需要添加CSS 。

From there it’s as simple as downloading the image and copying the CSS the tool provides into your stylesheet (I believe the ability to export the CSS is being worked on). On one recent project, I used SpriteMe to create a sprite from ~25 images that were being used in the site’s navigation in about 15 minutes of work. The only additional step I took was to run the generated sprite through OptiPng to shave some filesize off (I’ll talk about OptiPng in another post).

从那里下载图像就简单了，然后将工具提供CSS复制到样式表中(我认为正在处理导出CSS的功能)。 在最近的一个项目中，我使用SpriteMe从约25分钟的工作中从约25张图像中创建了一个精灵，这些图片已在网站导航中使用。 我唯一采取的唯一步骤是通过OptiPng运行生成的Sprite，以减少一些文件大小(我将在另一篇文章中讨论OptiPng)。

So what are the downsides? Not too much. I’d love to see it do some optimization on the sprites it produces - in the example I gave above, OptiPng shaved ~40% off the file size off. I’d also be willing to bet that the tool produces a bit more whitespace than is optimal or necessary in it’s sprites resulting in more memory usage. To be fair, I haven’t tried to remove some of that excess whitespace to determine how big of a deal it really is.

那有什么缺点呢？ 不会太多 我很乐意看到它对它生成的精灵进行了一些优化-在上面给出的示例中，OptiPng将文件大小减少了约40％。 我也愿意打赌，该工具产生的空白比它的sprite中最优或必需的要多，从而导致更多的内存使用 。 公平地说，我没有尝试删除一些多余的空格来确定它的实际价值。

All things considered, these are minor issues. I can easily run an image optimization tool on the produced sprite to fix that up, and it’s not like there’s THAT much whitespace - just probably a bit more than needed. These are, in my opinion, minor tradeoffs for the incredible convenience this tool provides.

考虑所有因素，这些都是次要问题。 我可以轻松地在生成的Sprite上运行图像优化工具来解决该问题，这不像有那么多的空格-可能只是所需的空白。 我认为，这些折衷只是为了使该工具提供令人难以置信的便利而进行的较小折衷。

翻译自: https://timkadlec.com/2010/03/performance-toolbelt-spriteme/