CSS спрайтове

Да започнем с кратко въведение. При зареждането на една страница браузърите изпращат само две заявки към сървъра (в съвременните браузъри този брой вече се е увеличил до 6). Всеки елемент на сайта, независимо дали е файл със стилове, файл javascript или изображение, е независим файл за зареждане, което изискват отделна заявка към сървъра.

На сайта може да има много миниатюри. Например, смайли, стрелки, всякакви малки елементи за дизайн. Всяко такова изображение тежи незначително, но поради огромния брой заявки към сървара ще има проблеми със скоростта на зареждане на сайта.
Още преди много време (2003-2004 ) било предложено решение на тази ситуация с основната цел да се ускори зареждането на сайта, като се намали броят на заявките към сървъра. Тази технология се нарича "Sprites" - Спрайт.

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

Спрайт CSS е технология за обединяване на малки изображения в едно. Например, вместо 10 изображения се зарежда едно, но по-голямо. При компетентно използване това ускорява работата на сайта. Основното нещо обаче тук е да не се прекалява. Не винаги комбинацията на изображения дава предимство при зареждането на сайта.

Плюсове за използване на спрайтове

➤Намаляване броя на заявките към сървъра;

➤Ако използвате динамична промяна на изображението (например, когато задържите курсора на мишката върху елемент от менюто), то вече ще бъде в кеша и следователно няма да има закъснение при зареждането в дадения момент;

➤Ако фонът на обединените изображения е сходен, той също намалява общото "тегло" на изображенията;

Минуси на спрайтовете

➤Сложността на работата, защото трябва да се свърши ръчно;

Но да се благодарим на безплатните услуги, които ни предлагат специализирани в това ресурси, защото са готови да опростят работата и да направят всичко вместо нас.

Онлайн услуги за създаване на CSS спрайтове

За да създавате спрайтове, има специални онлайн услуги, спайт генератори, които значително опростяват работата ви. Принципът на работата им е еднакъв за всички: зареждате набор от изображения, а услугата ги „залепва“ и дава окончателен резултат: обединено изображение и CSS код. Използвайте някои от тях.

toptal.com/developers/css/sprite-generator

spritegen.website-performance.org

giftofspeed.com/sprite-generator

cssportal.com/css-sprite-generator

spritebox.net

draeton.github.io/stitches

css.spritegen.com

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: