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

Не так много из того, что вы сказали, как минусы На самом деле минусы вообще.

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

также будет только один http-запрос (или два, в зависимости от того, сколько у вас спрайтов.) но если обращаться должным образом, только один на pageload.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

кроме того, это помогает сохранить ваш CSS cleaner. Например, я использую спрайты для кнопок (что также означает отсутствие дополнительной задержки для загрузки состояния наведения 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);}