Каков эффект кодирования изображения в base64?


97

Если я конвертирую изображение (jpg или png) в base64, оно будет больше или будет такого же размера? Насколько это будет больше?

Рекомендуется ли использовать на моем сайте изображения в кодировке base64?


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

Здесь есть хороший ответ: stackoverflow.com/questions/1533113/…
Steed

base64 делает невозможным использование deeplink. Это может быть плюсом.
damoeb

@Wug - Знайте, что это далеко не поздний ответ и что все изменилось, но определенно наступили моменты, когда вы можете добиться повышения производительности, отправив bas64. Отправка сообщений через веб-сокеты с изображениями в кодировке base64 (маленькие) будет более производительной, чем запрос каждого изображения отдельно.
Филипп

Хороший вопрос. Я искал хороший ответ на вопрос «сохранять двоичные изображения или в кодировке base64?» и я нашел несколько хороших ответов, подобных этому
moreirapontocom

Ответы:


132

Будет примерно на 37% больше:

Грубо говоря, окончательный размер двоичных данных в кодировке Base64 в 1,37 раза больше исходного размера данных.

Источник: http://en.wikipedia.org/wiki/Base64


28
Нет, не на 137% больше, на 137% от исходного размера :-) На 37% больше (согласно вашему источнику).
Eric J.

4
Я бы сказал, что это примерно 4/3 от первоначального размера.
kiwixz

Есть ли какие-либо ограничения на размер изображения для преобразования изображения в base64?
151291

2
@Blender Но в моем случае, когда я конвертирую растровое изображение 70 КБ в строку, оно становится 500 КБ. Это не 37%. Я сжал изображение 5 МБ до 70 КБ, а затем преобразовал это сжатое изображение в строку, которая стала 500 КБ.
KJEjava48

@ KJEjava48: Как вы конвертируете его в строку?
Blender

16

Вот действительно полезный обзор того, когда кодировать base64, а когда нет, от Дэвида Калхуна.

Основной ответ = файлы с кодировкой gzip base64 будут примерно сопоставимы по размеру со стандартным двоичным файлом (jpg / png). Двоичные файлы с Gzip будут иметь меньший размер.

Вывод = есть некоторые преимущества в кодировании и сжатии значков пользовательского интерфейса и т. Д., Но неразумно делать это для изображений большего размера.


15

В base64 он будет больше.

Base64 использует 6 бит на байт для кодирования данных, тогда как двоичный код использует 8 бит на байт. Кроме того, с Base64 есть небольшие накладные расходы. Не все биты используются с Base64, потому что он был разработан в первую очередь для кодирования двоичных данных в системах, которые могут правильно обрабатывать только недвоичные данные.

Это означает, что закодированное изображение будет примерно на 25% больше, плюс постоянные накладные расходы на заполнение.


7

Кодирование изображения в base64 увеличивает его примерно на 30%.

См. Подробности в статье в Википедии о схеме URI данных , где говорится:

URI данных в кодировке Base64 на 1/3 больше, чем их двоичный эквивалент. (Однако эти накладные расходы сокращаются до 2-3%, если HTTP-сервер сжимает ответ с помощью gzip)


7

Ответ: это зависит от обстоятельств.

Хотя изображения base64 больше, есть несколько условий, когда base64 является лучшим выбором.

Размер base64-изображения

Base64 использует 64 разных символа, а это 2 ^ 6. Таким образом, base64 хранит 6 бит на 8-битный символ. Таким образом, соотношение непреобразованных данных к данным base64 составляет 6/8. Это не точный расчет, а приблизительная оценка.

Пример:

Для изображения размером 48 КБ требуется около 64 КБ в качестве преобразованного в base64 изображения.

Расчет: (48/6) * 8 = 64

Простой калькулятор CLI в системах Linux:

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

Или используя изображение:

$ cat my.png|base64|wc -c

Base64-изображения и веб-сайты

На этот вопрос ответить гораздо сложнее. Вообще говоря, чем больше изображение, тем меньше смысла использовать base64. Но учтите следующие моменты:

  • Многие встроенные изображения в HTML-файле или CSS-файле могут иметь похожие строки. Для PNG часто встречаются повторяющиеся символы "A". Используя gzip (иногда называемый «deflate»), можно даже выиграть по размеру. Но это зависит от содержания изображения.
  • Накладные расходы на запросы HTTP1.1: особенно при большом количестве файлов cookie вы можете легко получить несколько килобайт накладных расходов на запрос. Встраивание образов base64 может сэкономить пропускную способность.
  • Не используйте base64 для кодирования изображений SVG, потому что gzip более эффективен для XML, чем для base64.
  • Программирование: на динамически генерируемых изображениях легче доставить их одним запросом, чем согласовать два зависимых запроса.
  • Deeplinks: если вы хотите предотвратить загрузку изображения, немного сложнее извлечь изображение со страницы HTML.

3

Это определенно будет стоить вам больше места и пропускной способности, если вы хотите использовать изображения в кодировке base64. Однако, если на вашем сайте много маленьких изображений, вы можете уменьшить время загрузки страницы, кодируя изображения в base64 и помещая их в HTML. Таким образом, клиентскому браузеру не нужно будет много подключаться к изображениям, но они будут в формате html.


Однако это не будет проблемой, если HTTP 2 действительно появится.
Филипп

@Philip Это правда, но мне нравится фактор переносимости, заключающийся в том, что все ресурсы содержатся в файле HTML. Это поможет с кэшированием мобильного Интернета в областях с нестабильными сетями.
aalaap

@aalaap Проблема в том, что если вы делаете одно изменение на странице, вам необходимо перезагрузить весь контент, включая изображения. Если у вас есть разделенные активы, у вас может быть более высокий возраст для них, и он будет храниться в кеше, а не перезагружаться при истечении срока действия кеша на самой странице.
Филип
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.