CSS sprites

CSS sprites refer to a single graphic file that contains multiple symbols and icons . These combined graphics act as sprites and serve to minimize the loading time of websites. The individual elements of this overall graphic are shown or hidden with the CSS property background-imageand background-position.

This technique was probably documented for the first time in 2004 in the English-language online magazine A List Apart , a website aimed at web designers. Well-known websites such as Google , XING , Amazon or Facebook use this technology. Icon fonts are an alternative to sprites .

advantages

Improvement in loading time

In most cases, the consistent use of sprites can reduce the website loading time: The web browser loads a file with a size of 10kb much faster than ten files with a size of 1kb each, because the HTTP specification only requires few parallel download processes provides.

Scheme of a picture change as soon as the mouse pointer moves over an element

Avoid delays when changing images

The dynamic change of an image on a website is not uncommon in the context of web design - for example, a graphic is changed as soon as the mouse pointer moves over a certain element. However, the loading of the graphic to be changed always requires a certain loading time without further precautions - even with fast internet connections the user perceives a short delay or a short flicker. With Sprite technology, on the other hand, the second image is already part of the overall graphic that has already been loaded and only needs to be moved relative to the visible area. A flicker does not take the observer more true because the image previously by the browser cached was and no new HTTP invocation is necessary.

Additional advantages

So-called image maps can also be replaced with Sprite technology . This is an HTML element that has a context-sensitive effect, i.e. makes certain areas clickable. It is also possible to show animated graphics with the help of CSS3 - without using the otherwise usual GIF file.

Example of a sprite used in the Wikimedia Commons picture of the year vote. The white icons are only visible on a differently colored background. When moving the mouse pointer over or holding down a button, the color of the icon changes from the visitor's point of view. If a selection has already been made, an icon is replaced by a crossed-out one.

disadvantage

Creating the CSS sprites is quite time-consuming and the effort increases proportionally with the number of individual graphics to be used. In addition to the compilation with the help of an image processing program , the developer must also specify the background graphic and the exact position within the overall graphic for each element in the stylesheet file. However, there are various software solutions that automate the creation of the sprites for the compilation of the sprite files and the generation of the stylesheet code.

Sprites can also have a negative effect on the loading time of the website - for example, if the website only needs to display very few graphics, but instead loads the entire sprite file, which is many times larger.

Web links

• CSS-Tricks.com Detailed introduction to CSS sprites
• Websites that assist in creating sprites
  • CSS SPRITES GENERATOR with basic functionality
  • CSSsprites responsive for sprites whose individual images (components) allow size changes
  • Dan's Tools CSS Sprite Generator with advanced functions (e.g. support for Less )
  • Instant Sprite with very easy handling and rudimentary functionality
  • Sprite Cow with many explanations and user guidance, also suitable for beginners
  • SpriteMe can as a bookmarklet be involved can
  • SpritePad from KISS with free basic functionality and chargeable additional functions
• Examples of CSS sprites:
  • Google
  • Yahoo!

Individual evidence

1. ↑ alistapart.com: CSS-Sprites (2004) (English)
2. ↑ ^{a b} Introduction to CSS sprites on the website Smashing Magazine (English)
3. ↑ webkrauts.de: Shorter loading times through CSS sprites
4. ↑ Blog Article: CSS Sprites vs. Image Maps ( Memento from February 18, 2013 in the Internet Archive )
5. ↑ Animations with CSS3 and sprites  ( page no longer available , search in web archives )  Info: The link was automatically marked as defective. Please check the link according to the instructions and then remove this notice. (English)  
6. ↑ Archive link ( Memento of the original from September 23, 2011 in the Internet Archive ) Info: The archive link was inserted automatically and has not yet been checked. Please check the original and archive link according to the instructions and then remove this notice.