Когда не использовать CSS спрайты?

Ответ 1

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

Ответ 2

Как и все, бывают случаи, когда это полезно, и бывают случаи, когда это вредно.

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

Итак, как это может повредить?

Потому что размер загрузки!= размер памяти.

Этот PNG или GIF, что только 10kb может быть намного большим, намного большим по размеру, как только браузер загрузит его в память. Проблема в том, что, хотя что-то вроде GIF будет сжимать сплошные области цвета, браузер расширяет его до растрового изображения, где все изображения равных размеров используют равную память.

И он загружает новое растровое изображение каждый раз, когда вы используете этот образ где-то.

Итак, все в меру.

Подробнее см. http://blog.mozilla.com/webdev/2009/06/22/use-sprites-wisely/.

Ответ 3

CSS спрайты плохо работают для <input type="text">, где пользователь может ввести больше, чем подходит в поле, так как фон затем прокручивается в некоторых версиях IE.

Они также плохо работают, если вы хотите повторить шаблон.

Ответ 4

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

background-image: url(../images/a.gif);
background-repeat: no-repeat;
background-position: left bottom;

Это сложно (если не невозможно), используя спрайт.

Ответ 5

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

Именно поэтому спрайты лучше всего сохраняются для "полезности" (например, кнопок) или дизайна.

Ответ 6

Спрайты никогда не должны использоваться, когда размер изображений сильно отличается.
Потому что в этом случае размер спрайта довольно велик.
Недавно я преобразовал изображения с разрешением 3,5 Мб в спрайт, а размер был увеличен до 17 МБ!

Ответ 7

Использование большего размера может быть головной болью... Когда фотографии объединяются меньшим размером, а соседние фотографии всего лишь 1 или 2 px между собой, то спрайты CSS могут быть хорошим решением. В нашем случае http://www.nbhuntop.com мы просто используем его для компонентов меню, включая: "Главная", "О, Продукты". И все фотографии находятся в формате gif, и никто не будет загружать эти фотографии вообще.