Когда следует рассматривать изображения base64 (DATA: URI)? - PullRequest
7 голосов
/ 13 апреля 2011

Какие факторы должны побуждать задуматься о переключении изображений на Base64, встроенный в CSS?

Кажется, есть много общих вещей типа "за" / "против". Википедия, кажется, имеет достойный обзор: http://en.wikipedia.org/wiki/Data_URI_scheme#Advantages

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

Но ... также кажется, что из-за спрайтов и того факта, что мне редко понадобится 50 отдельных изображений на странице, Base64 не предлагает много для обычных веб-сайтов.

Есть ли ключевые факторы, которые я должен искать (оба за / против)?

(Это может быть лучше, чем запись в вики сообщества, а не вопрос)

UPDATE:

Возможно, более краткий способ сформулировать вопрос:

Учитывая эти два варианта:

1) Все изображения конвертированы в base64 и встроены во внешний файл CSS

2) Изображения, собранные в несколько изображений спрайтов, на которые есть ссылки во внешнем файле CSS

Существуют ли очевидные ситуации, когда одно лучше другого, или это действительно только в каждом конкретном случае, и то, и другое и тестирование типа вещи?

Ответы [ 3 ]

6 голосов
/ 13 апреля 2011

Есть ли ключевые факторы, которые я должен искать (оба за / против)?

Самым большим недостатком является отсутствие поддержки в IE6 / 7 и неполная поддержка в IE8 (data: URI не должны быть больше 32 килобайт).

Использование CSS-спрайтов в этом случае является значительно более совершенным методом.

3 голосов
/ 13 апреля 2011

Здесь есть две разные проблемы:

1) база 64. Ну, здесь нет никаких преимуществ.Файлы более толстые, чем двоичные, и вероятность их кэширования меньше.Ресурсы должны быть во внешних файлах, чтобы их можно было кэшировать.

2) Спрайты.CSS-спрайты - это метод, при котором вместо нескольких изображений используется одно изображение.Части изображения «раскрываются» с помощью CSS.Они более эффективны, потому что количество сетевых запросов значительно сокращено.Оно того стоит.

0 голосов
/ 03 апреля 2014

Когда вы можете использовать css-спрайты, это определенно лучше.

Один конкретный случай, в котором я предпочитаю base64 DATA URI, - это когда у нас есть небольшой файл изображения, который будет использоваться в качестве фона с repeat-x или repeat-y. Поскольку повтор не очень хорошо работает с css-спрайтами, вам нужно использовать одно изображение в качестве источника. В этом случае я считаю, что использование версии base64 - лучшая альтернатива, которая сохраняет ваш запрос к веб-серверу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...