![]() ![]() ![]() We might then want to use a class to nudge the image and reveal another part of it altogether. Here, the content-box of the should be 100px wide and 100px tall, but because the image extends beyond those boundaries, it’s automatically cropped for us with object-fit: none. Then we’ll crop the image so that only the first icon is visible on screen: img Sprite image cropped to reveal the world icon For example, let’s say we want the image below to be added to our HTML page like a regular ol’ image: Sprite Sprites aren’t limited to background-image, as with the object-fit and object-position properties we can nudge an inline image around its content-box to act just like a sprite. Here’s some code that demonstrates the concept. You set the same background-image on several CSS classes and set the background position and dimensions of the individual classes to display a single portion of the sprite. Here’s an example sprite, with three different countries flags combined into a single image: Thus, sprites are important for the same reasons that minifying and concatinating CSS and JavaScript are important. Browsers limit the number of concurrent requests a site can make and HTTP requests require a bit of handshaking. While the total image size (sometimes) goes up with sprites, several images are loaded with a single HTTP request. This isn’t a big difference, but there needs to be a good reason to accept this larger file… and there is! Please do not use it for illegal purposes (such as copyright infringement), otherwise the consequences will be borne by the creator. It can also be widely used in social media, office, learning, e-commerce, design and other scenarios. The sprite ends up being 1.72KB larger than the three separate images. With this online eraser tool, you can easily remove unwanted objects from images without any quality loss. Putting the three images into a single file weighs in at 16.1KB. 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |