Скачать бриф
Наверное, каждый не раз сталкивался с элементами web дизайна сайтов или элементами навигации, при наведении курсора на которые, их изображение либо подсвечивалось, либо изменялось другим образом, создавая приятный глазу визуальный эффект, в том числе и эффект анимации. В большинстве случаев это реализовано с помощью css-спрайтов. CSS спрайтом (css sprite) принято называть изображение, которое включает в себя несколько логически связанных картинок, используемых для создания эффекта анимации, который запускается при наведении курсора на элемент. По структуре спрайт можно сравнить с мозаикой или пазлом. С помощью специального атрибута для каждого объекта анимации выбирается часть этой картинки, которая и отображается.
Почему делается именно так? С первого взгляда, конечно, может показаться, что это неудобно. Но такой способ позволяет использовать анимацию без серьёзного влияния на скорость загрузки сайта. Быстродействие сайта остаётся на высоте благодаря уменьшению количества запросов к серверу - спрайт подгружается один раз, и при наведении курсора на элемент изменения происходят мгновенно, без подгрузки другой картинки. Это существенно улучшает его восприятие пользователем и уменьшает количество HTTP запросов, что в свою очередь ускоряет загрузку страницы.
Практика показывает, что от 5% до 38% времени загрузки страницы уходит на загрузку HTML, остальные 62%-95% составляют HTTP запросы (загрузка скриптов, изображений и т.д.). Каждый тэг и фоновый рисунок составляют отдельный запрос. Несложно догадаться, что уменьшение количества HTTP запросов является одним из основных способов оптимизации загрузки и повышения эффективности работы вашего сайта. Использование css спрайтов позволяет гораздо легче управления эффектом, так как гораздо проще, скажем, изменить с помощью css положение фона, чем использовать новое изображение.