Подтвердить что ты не робот

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

Одна вещь, которую я заметил на некоторых сайтах, заключается в том, что они используют одно изображение BIIIIIIIG, содержащее множество маленьких изображений, затем используйте CSS background-position для определения координат каждого изображения, а не для использования отдельных изображений.

Здесь, где я нахожусь:

Недостатки использования большого листа спрайтов

  • Необходимо загрузить большое изображение, чтобы отобразить даже одно маленькое изображение.
  • Нужно писать (или генерировать) длинную таблицу стилей с классом для каждого изображения
  • Беспорядок CSS с большим количеством определений классов может повлиять на производительность
  • Если одно изображение изменяется (или добавляется другое), проблемы с кешем могут встречаться как на изображении, так и на CSS, связанном с ним.
  • Требуется <div> с правильным стилем (display: inline-block; width: 32px; height: 32px; background-image: url('spritesheet.png');), который добавляет еще один класс в микс.
  • Много больше, что я не могу вспомнить, теперь я их печатаю.

Плюсы использования большого листа спрайтов

  • ... Erm... пока нет.

Фактически единственное, что подходит для профессионала, заключается в том, что когда я разбивал лист на отдельные изображения, результирующая папка занимала 3 Мб на диске (из-за того, что каждый файл был < 100 байт, а мой размер выделения составлял 4 тыс.). Фактические файлы сами выходят меньше половины размера листа и CSS, поэтому даже с накладными расходами HTTP-запроса существует значительная экономия пространства.

В основном, мой вопрос: кто-нибудь имеет ЛЮБЫЕ плюсы для использования большого листа над отдельными изображениями?

4b9b3361

ОТВЕТЫ

Ответ 1

Цель состоит в том, чтобы уменьшить HTTP-запросы. Кроме того, иногда сжатый спрайт будет весить меньше, чем исходные изображения.

Недавно у меня был веб-сайт с большим количеством прозрачных градиентов (от белого до транс, от серого до транс) и некоторых черно-белых на прозрачных изображениях. Поместив их все в спрайте и уменьшив цвета в png до 8, я мог бы получить спрайт меньше размера в файлах, чем исходные изображения (просто... это было примерно на 0,5% экономии). Уменьшая количество HTTP-запросов от 10 до 1, хотя это означает, что сайт загружен быстрее (если измерять время от первого соединения до всех переданных данных).

В этом случае было найдено измеримое увеличение.

Я согласен с тем, что это может испортить вещи и привести к большему спрайту, чем нужно, особенно если вы не используете сжатие PNG.

Обратите внимание, что через два года после публикации этого вопроса - если вы используете SSL, вы должны заглянуть в SPDY (моя заметка еще через два года будет упоминать HTTP 2.0 вместо SPDY!). SPDY отрицает преимущества написания.

Ответ 2

Не что-то из того, что вы сказали, как "Концы", действительно являются недостатками.

Когда вы загружаете одно большое изображение, оно содержит только один из различных атрибутов, которые необходимы для изображения (таблица цветов, тип mime и т.д. ex: представьте, если вы используете прогрессивный формат jpg, один спрайт позволит изображению быть сканируется один раз, в то время как многие значительно уменьшают время загрузки) вместо того, чтобы иметь одну и ту же информацию в 100 разных файлах, это уменьшит размер файла на большом изображении.

Также будет только ОДИН http-запрос (или два, в зависимости от количества спрайтов, которые у вас есть.), но если правильно обрабатывать, то только один из pageload.

Если вы используете bg-изображения в CSS, то вы уже сделали селектор css, чтобы не было дополнительной работы, просто скопируйте/вставьте URL-адрес.

Я никогда не сталкивался с проблемами кеша со спрайтами, которые не могут быть решены нажатием ctrl + F5.

В любом случае не требуется div с правильным стилем. Это не метод замены тега <img>, он используется в основном для изображений bg. Как для кнопок и наборов значков.

Профи намного перевешивают минусы в этом методе, доказательством тому является то, что оно было использовано для использования очень многими разработчиками. Если бы это был ужасный метод, никто бы его не поднял, и кто-то уже поднял бы эти проблемы, когда он был впервые введен в действие.

Если кому-то добавить больше, не стесняйтесь:)

Ответ 3

Google описывает это здесь. В основном это должно сократить время загрузки страницы. Каждая новая инициализация соединения добавляет некоторую задержку. В некоторых случаях он также может уменьшить размер передачи данных и, следовательно, уменьшить время загрузки страницы. Он подходит для изображений, которые меняются редко или все вместе (темы). Затем браузер может использовать кешированное изображение и должен проверять только один файл для изменений не каждое изображение по одному.

Ответ 4

Листы спрайтов - беспорядок. Период. Не нужно сахара покрывать его. Они представляют собой огромный шаг назад в области дизайна, что, вероятно, объясняет, почему единственные люди, которым нравится использовать спрайты, являются разработчиками старой школьной игры. Листы Sprite имеют только одно качество выкупа, они немного быстрее загружаются. Кроме этого, это мусор. Не говоря уже о кошмаре, который нужно создать.

В каком мире "приемлемо" включать 500 строк кода только для запуска простого цикла ходьбы. Надеюсь, некоторые умные ребята придумают решение так же просто, как перетащить автономный, поддерживающий альфа-формат видео, такой как flv, но это также будет работать на планшетах...

Если вам нравится писать массивный список о том, как велики спрайты, я могу только удивляться, насколько скучно ваша проектная работа должна быть. Суть в том, что если "инструмент" затрудняет вам делать то, что должно быть легко, тогда это не очень хороший инструмент. Бросьте его.

Ответ 5

Да - количество запросов.

Большинство браузеров будут загружать одновременно по 2 ресурса на один домен, поэтому, если вы обслуживаете множество небольших изображений, пользователю приходится ждать примерно половину этого количества запросов HTTP-запросов. Если вы используете спрайт, это только один запрос и один ответ (хотя и большой ответ).

Ответ 6

Если у вас много изображений, браузеру необходимо будет загрузить каждый из них. Поскольку браузер может загружать только ограниченное количество файлов одновременно, это потребует времени. Единственное изображение будет связывать только один слот загрузки, позволяющий быстрее отображать страницу.

Кроме того, если используется во многих других страницах, большой лист спрайтов уже будет кэшироваться.

Ответ 7

это особенно хорошо для большого количества небольших изображений, потому что браузер должен выполнить только http-запрос для всех изображений, а не сотни из них. Таким образом, вы загружаете веб-страницы гораздо быстрее в клиентском браузере.

вещь - скорость загрузки. Только один HTTP-запрос выполняется намного быстрее, чем десятки.

Ответ 8

Кроме того, это помогает сохранить очиститель CSS. Например, я использую спрайты для кнопок (что также означает отсутствие дополнительной задержки для загрузки состояния зависания img)

<button type="submit" class="vorige"><span>Vorige</span></button>

button  {display: block; width: 162px; height: 47px; background-position: 0 0;}
button:hover    {background-position: 0 94px; cursor: pointer;}
button:active   {background-position: 0 47px;}
button span {display: none}

.vorige     {background-image: url(../img/button/btn_vorige.png);}
.volgende   {background-image: url(../img/button/btn_volgende.png);}
.verstuur   {background-image: url(../img/button/btn_verstuur.png);}

из-за спрайта я могу оставить код для отдельного изображения наведения:

.vorige:hover   {background-image: url(../img/button/btn_vorige_active.png);}
.volgende:hover {background-image: url(../img/button/btn_volgende_active.png);}
.verstuur:hover {background-image: url(../img/button/btn_verstuur_active.png);}