спрайт дизайн / стратегия - PullRequest
Новая
       3

спрайт дизайн / стратегия

2 голосов
/ 18 октября 2011

Я задал этот вопрос вчера: фоновое повторение мозаичного изображения bgImage внутри изображения спрайта?

Так как долго нельзя повторять фоны, которые находятся внутри изображения спрайта,

Какова лучшая * стратегия при создании спрайта?

Я имею в виду, выбирая:

  • , следует ли мне пытаться поместить ВСЕ изображения в один спрайт?(включая большие фоны, которые можно повторить)
  • Один спрайт для иконок.Фоновая часть?
  • прочее

*), когда я говорю лучше всего, я имею в виду наиболее доступный / годный к употреблению / перфоманс

Ответы [ 3 ]

5 голосов
/ 18 октября 2011

я всегда создаю three sprite sheets.

первый; для тех изображений, которые not repeating вообще как стрелки, кнопки и т. Д.

секунда; для тех изображений, которые repeating y-axis.

третий; для тех изображений, которые repeating x-axis.

или Если в дизайне нет повторяющихся изображений, тогда нет необходимости в других * sprite sheets

спрайт для оси X http://imageshack.us/photo/my-images/401/xaxissprites.png/

спрайт для оси Y http://imageshack.us/photo/my-images/28/yaxissprites.jpg/

1 голос
/ 05 января 2012

По моему мнению, спрайт должен быть сначала определен для ваших пользователей.Если ваши пользователи видят разные страницы в качестве своего авторитета, вы должны разделить свои спрайты по авторитету.Второе - это фон и значок, группировка кнопок.Каждый файл изображения имеет заголовок.В заголовке они содержат размер, цветовую карту и любую другую дополнительную информацию.Заголовки в основном увеличивают файл на 1КБ - в среднем на 3КБ.Таким образом, мы можем думать, что меньше изображения, меньше передачи данных.Таким образом, я предлагаю вам использовать один спрайт.

Другое мнение, что инструменты для этого.Вы можете использовать инструменты листа спрайта для генерации ваших спрайтов и написания своего CSS.Эти инструменты генерируют минимальный размер изображения (используя некоторые алгоритмы для упорядочения спрайтов) и автоматически генерируют файл CSS в зависимости от позиций спрайтов на листе спрайтов.Если вы работаете на Mac, вы можете использовать Sprite Master для этого.

1 голос
/ 18 октября 2011

Спрайты старые!Есть более новые методы, которые вы можете использовать.Но когда вы будете использовать спрайты.Я бы сделал один спрайт для иконок и один спрайт для других изображений.

Но вы также можете использовать для кодировки URI / base64 данные.Это новая техника для изображения.И замена спрайтов.Со спрайтами у вас есть http запросы.С данными URI у вас нет http запросов.Это сделает ваш сайт быстрее!А скорость веб-сайта является более важной вещью.

Здесь у вас есть статья о Нажмите здесь И здесь вы можете создавать данные URI. Здесь .Но данные URI не поддерживаются в ie7.Для ie7 вы можете сделать откат к одиночным изображениям.

Использовал данные URI и забыл спрайты.Спрайты - это техника 2011 года. Данные URI полностью 2012!: -)

...