CSS Sprites

Добре дошли! Днес искам да ви разкажа за един добър метод Sprites CSS. който помогна да се оптимизира изображението в блога си, и да се намали времето за зареждане на страниците на блога, чрез намаляване на броя на исканията за сървъри. изпълнение технология ще покаже чрез пример.

Техника на "Спрайт" е това, ние създаваме съставно изображение на изображенията, които трябва да са на нашия уебсайт. След това с помощта на имота:

  • фон изображение - да се определи нашето спрайт,
  • фон-позиция - да се определи конкретен образ в нашата спрайт,
  • атрибути ( «ширина» и «височина», за да се определи височината и ширината размерите на изображението),
  • фон-повторение - да се повтаря ( "Х" - хоризонтално, "Y" - Вертикална «не-повторение» - да не се повтарят картинката изобщо).

Тъй като обещах да покаже всичко на реален пример, цитирам някои от моя дух, така че да се разбере как изглежда (спрайт-y.png, размер - 27 KB).

Как да се създаде CSS спрайт

Създаване на CSS спрайт, можете да използвате спрайтове генератор - генератор на CSS спрайтове (аз се опитах много различни генератори, но спря, че е за това, че всъщност ви посъветва)

Как да се свържете с CSS Sprites

За въвеждането на спрайт, ние се нуждаем функции, като например:

  • фон изображение: URL ( «спрайт-y.png») - определят нашия дух;
  • фон-позиция: -10px 20px (определи спрайт позиция спрайтове генератор ще ви даде на всеки елемент от позицията си в «спрайт-y.png» файл);
  • фон-повторение: не-повторение (питат за повторението, в този случай е необходимо «не-повторение», означава, че няма повторения).

Можете също така да определите ширината и височината параметри. Пример: ширина: 16px; и височина: 16px;

По-подробно, показва примерът на блока отдясно в страничната лента - "Абонирай се за RSS»!.

Ако се вгледате внимателно, до всяка справка, лявото изображение, и начина, по който да се приложи следното:

В този пример, струва три еднакви снимки, ако го направите различен, да получите код така (без спрайт) в този блок:

И с CSS технологията спрайт, като този:

Сега погледнете на скоростта на зареждане на блог да се използва метод спрайтове и след използване на Pingdom услуга (която може да се измери скоростта на сваляне)

CSS Sprites

CSS Sprites

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