我可以将图像捆绑到一个文件中作为网页吗? [英] Can I bundle images into one file for a web page?

问题描述

我有一个包含约70张图像的网页.我正在寻找一种将这些图像捆绑到资源文件中的方法.这不是为了提高客户端的性能，因为缓存等将解决此问题.通过我们的cms在服务器端进行资产管理更多-我希望能够将单个资源部署到cms中，而不必创建70个单独的资源.

I have a web page with around 70 images. I am looking for a way to bundle these images into a resource file. This isn't to improve client side performance as caching etc will take care of this. It's more for asset management on the sever side via our cms - I'd like to be able to deploy a single resource into the cms rather than having to create 70 individual resources.

有没有可以让我捆绑图像的JavaScript库?

Are there JavaScript libraries that will let me bundle images?

推荐答案

使用 Image Sprites 很容易做到这一点，并且您无需使用JavaScript. Sprite是一个单个图像文件，在其中的特定位置放置有图像集合.建议您在其中包含图像的情况下使用透明的 PNG 图像.

It is easy to do that using Image Sprites and you need not use JavaScript. A Sprite is a single image file with a collection of images positioned in it at specific locations. I recommend to use a transparent PNG image with your images in it.

在下面，您可以看到Google，Windows Live和Facebook使用的透明PNG精灵.

Below you can see transparent PNG sprites used by Google, Windows Live and Facebook.

一旦将精灵加载到网页中，由于浏览器通常会缓存图像以提高页面加载速度，因此很容易在其他页面中显示图像.您可以通过使用CSS定义特定图片在Sprite中的特定位置来显示特定图片，例如；

Once the sprite is loaded in web page, it is easy to display images in another page since the browser normally caches images to improve page loading speed. You can display specific image in a sprite by defining it's specific location in the sprite using CSS, like;

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

最后， Spritebox 是创建自己的自定义图像的便捷工具精灵.

Finally, Spritebox is a handy tool to create your own custom image sprites.

这篇关于我可以将图像捆绑到一个文件中作为网页吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！