What idea of ​​the image is coping, how to approach it?

Question

How do you approach using image sprites in css?

Should I take all the images on my website and combine them into one image sprite? Is this really helpful?

How difficult is it to maintain these images and subsequently change them?

Answer 1

Should I take all the images on my site and combine them into one image sprite?

Of course not. You take it too literally.

I find that sprites are best used for groups of similar images. Examples include:

• All states of the graphic button
• Icon States
• All permutations of the background (unless it is required to split into two parts)

Is this really helpful?

If you have a lot of them on a busy site, very much. It saves a request for each image, saving user time and your server with a number of parallel connections.

How difficult is it to maintain these images and subsequently change them?

If you used them logically, pretty simple. If you need to add another navigation element, you will open your sprite sprite and expand it. For things like navigation, it can actually be easier to maintain because you have comparisons right next to you in the same document.

Edit, having seen one of the most extreme examples , I will add that I never went this far because:

• It is 60k to download. Not huge, but slow connections, which are 60K, which must be loaded before anything shows. If all of your visual assets are tied, this can lead to longer loading times.

• Your CSS becomes meaningless mish-mash from the background-position commands. If you want to make changes, you need to go back to the sprite and measure everything. Again and again and again.

• God will have mercy on your soul if you need to increase something in the upper left corner of the sprite. Perhaps you just added a new sprite below the current ones.

• And this can lead to bloating. Indeed, simply downloading all of these images can be downloaded with a variety of materials that some users will never be able to see. Downloading unused data is probably worse than connecting overhead (given how easily static content can be served by several low-cost servers or CDNs)

Other examples are much simpler and more useful (IMO).

Answer 2

Sprites are a great way to reduce graphics loading time (sometimes) and always a way to reduce server requests. Generally speaking, they can take some serious planning, since you do not just want to throw a bunch of images on the canvas and export as jpeg. I would suggest you study some of the sprites that are currently used by large companies such as Amazon. Get an idea of ​​how they compose their elements and what types of images they even consider for use in sprites.

You will also want to evaluate your site and be sure whether you can successfully implement them or not. If you did not plan to use them for starters, a lot of tracking and updating may be required to prepare them.

• Amazon sprite
• Ebay sprite
• Current.com Sprite (Whoa)
• Google

Answer 3

Sprites work well when you have an element with at least one fixed size (width or height), and you want it to have a different background image in different circumstances.

When Ive tried this, Ive found that sprite image files are generally smaller than the total size of the individual image files from which they are made, so you can get bandwidth savings, as well as two other benefits:

• fewer HTTP requests
• there is no delay waiting for another image to load when the state of the image changes on hover

It depends on the content of the images.

Personally, I would not put unrelated images together in the same sprite image, since I think this makes maintenance too unobvious. In addition, as mentioned in To cope or not cope , really large sprites can use quite a lot of browser memory. (It depends on the context.)

Answer 4

The idea is to avoid unnecessary HTTP requests. This is especially true if you have many small icons (for example, for a WYSIWYG editor such as the one used on this site). If you have twenty 16x16 pixel icons, this will not mean more bandwidth, but when you load the page it will still mean twenty additional requests.

Other sprite candidates are button states and all that is purely decorative, but part of the layout.

If you use flipping through background images, you will also find that you need to preload the flipping state image (either using JS or silly hard coding), or you will encounter some delay because the browser requests a previously unused image. Sprites can make this easier.

Things you probably shouldn't do sprites are images that aren't just graphic elements (like graphics, illustrations, avatars, announcements) or that will change a lot (like avatars or announcements).

It is not possible to change sprites, but depending on how much you put on the location of the sprite sheet, it can be very difficult to do. Nothing made you make the sprite sheet ultra-condensed, but it’s obviously better for the file size if there are no extra spaces in it (see Google).

Please note that additional requests may not be a problem for you if you have a relatively low traffic site (which almost everyone has, unless you are Google or Amazon). However, Sprites can improve the performance of mobile devices, as this means less chance of errors and therefore lower latency.