Как оптимизировать загрузку изображений для кнопок (CSS)

В CSS мы можем применить псевдо-класс :hover к ссылке и добавить свойства, которые будут задействованы при наведении указателя на ссылку.

a:link, a:visited {
    width: 160px;
    height: 30px;
    display: block;
    overflow: hidden;
    background: url(images/nav1.gif) 0px 0px no-repeat;
}
a:hover, a:active {
    background-position: 0px -30px;
}

Изображение nav1.gif содержит в себе сразу два состояния кнопки, а при наведении меняется положение фона:

Оригинал: How to make Buttons with Hover Load Faster

Надо заметить что эту технику можно применять не только к кнопкам, но и к другим элементам. Например на известном видеохостинге Youtube в одном изображении объединены сразу несколько графических элементов: