CSS спрайты против данных URI

Question

Я много слышал о важности использования спрайтов для обратного отсчета вашего запроса. Но я думаю, что вместо того, чтобы использовать спрайты, вы можете использовать URI, чтобы выполнить то же самое, и гораздо проще (создание спрайтов не требуется).

Лучше использовать спрайты или урис?

Answer 1

Данные в кодировке Base64 примерно на 1/3 больше, чем необработанные байты, поэтому на страницах, где загрузка всех данных изображения занимает в три раза больше времени, чем выполнение запроса, спрайты CSS превосходят производительность.

Кроме того, встроенные URI данных заставляют сам файл загружаться так же долго, как и фактические данные плюс изображения в кодировке base64. Если URI данных находятся на вашей реальной HTML-странице, это означает, что рендеринг останавливается и ожидает загрузки изображения. Если URI данных есть в вашей таблице стилей, это означает, что любые правила после URI данных должны ждать его, прежде чем их можно будет обработать. С другой стороны, при использовании файла спрайта изображения могут загружаться одновременно с другими вашими ресурсами. Это может стоить затрат на один дополнительный запрос, особенно если учесть штраф base64.

Answer 2

Полагаю, что поддержка IE5, 6 и 7 была бы хорошей причиной для использования спрайтов над URI, если эти цели важны для вас.