That adds up to a total of 14.38KB to load the three images. Let’s look at some numbers on an actual example: Image
Wouldn’t larger images take longer to load? It may seem counterintuitive to cram smaller images into a larger image. This reduces the overhead of having to fetch multiple images. The sprite was the big combined graphic.ĬSS Sprites is pretty much the exact same theory: get the image once, and shift it around and only display parts of it. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. To summarize: the term “sprites” comes from a technique in computer graphics, most often used in video games. Sprite may seem like a bit of a misnomer considering that you’re creating a large image as opposed to working with many small ones, but the history of sprites, dating back to 1975, should help clear things up. In short: CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance. Spoiler alert: they aren’t fairies that write your stylesheets for you. The most recent revision was done by Flip Stewart in January 2015. This article has been revised and re-written several times since its very first publication in 2007, to keep the information current.
0 kommentar(er)
