An image sprite is an image that is one of multiple smaller images contained in a single larger image that is isolated for use as necessary. For example, a single larger image might contain all the icons or buttons used for a page, each of which is then displayed only when needed. The main advantage of the method is that it helps Web pages load faster. It is able to do this because it saves creating separate image files for each image, which requires multiple downloads that can be demanding on the Web server and also cause long download times. This problem is especially exaggerated when each icon or button has multiple versions for use for their states. The typically defined states for an interactive icon or button are normal (the normal appearance), hover (appearance when cursor is over it), and active (appearance when it is being pressed). A fourth one, known as disabled (appearance when not available), is seldom relevant in most Web applications. The term used to describe the changes that occur when the cursor moves over an interactive object is sometimes known as rollover.
Naturally, before sprites can be used they have to be created or obtained in some other ways. Whatever the case, it is important to know the positions of the smaller images in the larger image so that they can be specified accurately to display them properly. Figure 16.1 shows, on a transparent background in Photoshop, the image sprites for the three states of a button. The grid is displayed to help illustrate the dimensions. It is these dimensions that are used to specify which sprite to display. The more consistent the dimensions of images and the distances between them, the easier they are to work with and the more professional the changes from one state to another will be. The pixels-grid helps tremendously in achieving this goal. This consistency guideline, of course, goes with the standard design guideline that graphics items to be used on the same row should have the same height and those in the same column should have the same width. Figure 16.2 shows how to use CSS to implement sprites from the above image, and Figure 16.3 shows the results.
To understand how the use of image sprites works, imagine that the <a> element’s box is a window or cutting in a card and in order to display a sprite, the image is moved to align it with the window accordingly. In the a.button{} rule in the example, the background-image property specifies the image “buttons” containing the sprites, and display:inline-block changes the <a> element from an inline element (which it is by default) to an inline- block element. This enables the width and height of the element to be specified to match the size of the sprites. The width property specifies the width of the <a> The width of 220px (200+10+10) is specified so that it is wide enough to allow each sprite and its shadow to show. To display the normal-state sprite, the a#register{} rule moves the image to 0px 0px with the background-position property and specifies the height of the sprite as 60px (50+10) so as to include the shadow. This positions the top-left corner of the image at the top-left corner of the <a> element’s box and the sprite inside the box.
To display the hover-state sprite when the cursor is inside the <a> element’s box, the a#register: hover{} moves the image up 60px (i.e., – 60px) so that coordinate point 0px 60px on it (which is where the hover-state sprite starts) is at the top-left corner of the element’s box. This moves the hover-state sprite into the box. The rule also specifies a height of 60px for the box to show the sprite.
To display the active-state sprite when the inside of the <a> element is clicked, the a#register: active{} rule moves the image up 120px (i.e., -120px) so that coordinate 0px 120px on it (where the active-state sprite starts) aligns with the top-left corner of the box and also specifies a height of 50px. Note that moving an image up or left requires a negative value, while moving it down or right requires a positive value.
1. Using Image Sprites with the <input> Element
Image sprites can also be used with the <input> element. Indeed, if you are dealing with forms and want to use image sprites, then you are most likely to use them with the <input> element (typically image-input type), rather than the <a> element. Figure 16.4 shows the same code in Figure 16.2 with a few modifications to deal with an <input> element of the image-button type first introduced in Chapter 5. The code produces the same output as Figure 16.3.
As mentioned in Chapter 5, the image-input type is the type of <input> element that allows an image to be specified for use as a submit button. The function of the button is predetermined, in that when it is pressed, it initiates form submission. In the example, the CSS rules do the same thing as those in Figure 16.2, except that there is no need for the display: inline-block;- declaration, since although the <input> element, like the <a> element, is an inline element, it allows its size to be specified, which is necessary to specify a big enough size to let the element’s background image sprite show.
So, in the #register{} rule, the background-image property specifies the image to use for the background of the <input> element, the width and height properties specify the element’s size, and the background-position- property positions the image at the top-left corner of the element’s box. The #register:hover{} and #register:active{} rules perform exactly the same functions as described for Figure 16.2. It is in the HTML code that the most important change is made. Notice there that another image is specified for the <input> element. This is because the element requires that an image is specified, otherwise a default label or the alternative text is displayed, depending on browser. This means that if no image is specified, the text is displayed on the specified background image, and if an image is specified, it is similarly displayed on the background image. To work around this, a transparent image is specified. This is an image that contains nothing and has a transparent background. The image can be any size, since it is only symbolic, but should be as small as possible for obvious download performance reasons. The one used in the example is 5 x 5px. Common image formats that allow a transparent background include PNG and GIF.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.