CSS спрайтове, Комбиниране на изображения в CSS спрайтове

Ако на страницата на сайта се използват няколко изображения, тогава сървърът изразходва ресурсите си върху тях, като изпраща http заявка до всяко от тях. Това води до натоварване на сървъра и увеличаване на времето за зареждане на страницата на сайта. В този случай, за да се намали броят на заявките и да се увеличи скоростта на зареждане на страницата на сайта, се използва техниката на css sprite, когато няколко малки снимки се комбинират в една голяма.

Защо иначе се нуждаете от css спрайтове? Ако се опитвате да ускорите максимално зареждането на вашия сайт, тогава вероятно сте използвали услуга от Google - PageSpeed ​​​​Insights. При проверка на данните на сервизната страница на вашия сайт ще видите съобщение - "Комбиниране на изображения в CSS спрайтове." Така че, за да изчезне това съобщение и да увеличите резултата на PageSpeed ​​​​с няколко точки, трябва да овладеете техниката за създаване на css спрайтове.

Техника за комбиниране на изображения в css спрайт

Има много услуги, предназначени да комбинират изображения в css спрайтове, да не говорим, че можете да го направите сами във Photoshop. Пробвах няколко услуги на практика, но тази ми хареса най-много. Има всички необходими настройки и в същото време генерира необходимия CSS код на изхода.

За да започна, подготвих всичките 6 икони в PNG формат (Фигура 1).

спрайт

След това задаваме необходимите настройки в услугата spritegen.website-performance.org (Фигура 2):

  • Посока на изграждане Избирам хоризонтално (в изображението на изходния спрайт всичките 6 изображения ще бъдат разположени хоризонтално);
  • Хоризонтално отместване: 5 px (снимките ще бъдат изместени една спрямо друга в изходното спрайт изображение с 5 пиксела);
  • Вертикално отместване: 5 px.

Останалите настройки са оставени по подразбиране. Но, разбира се, можете сами да експериментирате с останалите настройки.

Услугата работи с ZIP файлове. Затова компресирам всичките 6 снимки в ZIP и ги качвам в тази услуга. След това щракнете върху „Създаване на изображение на спрайт и CSS“.

На изхода получаваме изображение на спрайт (Фигура 3).

Резултатът беше 1 файл вместо 6, както беше преди. Преди да използвате това изображение на спрайт, препоръчвам да го компресирате с помощта на някоя услуга, например тази.

Свързани статии:

Абонирайте се за бюлетин

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