Почему я должен использовать спрайты на своем мобильном сайте?

Question

Почему я должен использовать спрайты при создании CSS на моем мобильном сайте? И как мне их реализовать, находясь в Tritium?

Answer 1

Почему

Проще говоря: экономить на сетевых запросах. Один запрос на спрайт в 10 КБ намного быстрее по сети, чем десять запросов на десять изображений по 1 КБ.

Кроме того, этот спрайт сжатых изображений даст огромную экономию по сети. Например, возьмите 13 изображений, каждое размером около 4 КБ. Это 52 КБ более 13 сетевых запросов. С помощью спрайта его можно уменьшить до 1 изображения при 12 КБ за 1 сетевой запрос. Огромная экономия!

Вам не нужно создавать свои собственные спрайты - Moovweb может автоматически генерировать их для вас.

Реализация

Создайте папку с именем sprites в каталоге images - разместите все свои изображения здесь. (В папке sprites может быть несколько папок.) Moovweb автоматически создает спрайт и создает таблицу стилей в каталоге stylesheets/globals, который называется _sprites.scss, Не забудьте импортировать эту таблицу стилей в main.scss,

Например, чтобы создать спрайт со всеми изображениями котят с сайта, поместите все изображения котят в папку, называемую спрайтами, в папку изображений. Moovweb создает увеличенное изображение спрайта в папке изображений. Он также создает таблицу стилей, _sprites.scssв папке stylesheets/globals.

В таблице стилей Moovweb определяет набор классов, миксины и переменные для каждого изображения. Их формат имени sprites-filename, Например, в нашем примере папки спрайта выше, cat.png значок внутри папки спрайтов будет иметь класс .sprites-cat,

Вы можете использовать изображение одним из трех способов:

1. использование @extend или же @include под другим классом / идентификатором в вашей таблице стилей, чтобы применить те же стили из изображения

2. Вставьте новый элемент, используя Tritium с классом изображения: insert("div", class:"sprites-filename")

3. Добавьте класс в существующий элемент с помощью Tritium: add_class("sprites-filename")