Спрайтове

Защо спрайтовете правят сайта по-бърз

CSS спрайтът е една обща картинка, в която са подредени много по-малки изображения. Вместо браузърът да изтегля всяка иконка поотделно, той зарежда само един файл и чрез CSS показва нужната част от него. Това намалява броя на заявките към сървъра и ускорява визуализирането на страницата – особено при сайтове с много икони.

Как да използвате спрайт в CSS

1. Добавете готовия спрайт файл (например SVG) към проекта.
2. Изберете елемент (например h1) и задайте фоново изображение със съкратения синтаксис на background.
3. Задайте no-repeat, за да не се повтаря изображението.
4. Чрез позициониране на фона (background position) изберете точната част от спрайта, която искате да се вижда.
5. При нужда коригирайте размера на елемента, за да се покаже правилната област.

Така първото зареждане на спрайта кешира целия файл и останалите изображения от него не изискват допълнително изтегляне.

Основни CSS свойства

• background – съкратен запис за задаване на фоново изображение, позиция и повторение в една декларация.
• background-image – задава конкретния файл (например SVG спрайт).
• background-repeat – контролира дали изображението да се повтаря (no-repeat).
• background-position – определя коя част от спрайта да бъде видима в елемента.

Спрайтовете са утвърдена техника за оптимизация и важна част от добрите практики при изграждане на бързи и ефективни уеб страници.