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

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

Вот где я:

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

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

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

  • ... Эээ ... пока нет.

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

По сути, мой вопрос: есть ли у кого-нибудь какие-нибудь преимущества для использования большого листа поверх отдельных изображений?

28
задан Niet the Dark Absol 8 November 2011 в 12:11
поделиться