Який ефект від кодування зображення в base64?

Якщо я перетворюю зображення (jpg або png) на base64, то чи буде воно більшим, або матиме однаковий розмір? Наскільки більшим він буде?

Чи рекомендується використовувати кодовані зображення base64 на моєму веб-сайті?

Це буде приблизно на 37% більше:

Дуже приблизно, кінцевий розмір кодованих двійкових даних Base64 дорівнює 1,37 рази від початкового розміру даних

Джерело: http://en.wikipedia.org/wiki/Base64

Ось справді корисний огляд, коли кодувати base64, а коли ні , Девід Калхун.

Основна відповідь = gzipped закодовані файли base64 за розміром приблизно будуть порівнянні зі стандартними двійковими файлами (jpg / png). Бінарні файли у форматі Gzip матимуть менший розмір.

Винос = Існує певна перевага в кодуванні та архівуванні значків інтерфейсу тощо, але нерозумно робити це для більших зображень.

Це буде більше в base64.

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

Це означає, що закодоване зображення буде приблизно на 25% більше, плюс постійні накладні витрати на відступ.

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

Подивіться подробиці у статті wikipedia про схему URI даних , де вказано:

URI кодованих даних Base64 на 1/3 більше, ніж їх двійковий еквівалент. (Однак ці накладні витрати зменшуються до 2-3%, якщо HTTP-сервер стискає відповідь за допомогою gzip)

Відповідь така: це залежить.

Хоча зображення base64 більші, є кілька умов, коли base64 є кращим вибором.

Розмір базових 64-зображень

Base64 використовує 64 різних символи, і це 2 ^ 6. Тож base64 зберігає 6 біт на 8 біт символу. Тож пропорція становить 6/8 від неперетворених даних до даних base64. Це не точний розрахунок, а приблизна оцінка.

Приклад:

Зображення 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 ви часто зустрічаєте повторювані символи "А". Використовуючи gzip (іноді його називають "здути"), може бути навіть виграш за розміром. Але це залежить від вмісту зображення.
• Запит на накладні витрати на HTTP1.1: Особливо з великою кількістю файлів cookie ви можете легко отримати кілька кілобайт накладних витрат на запит. Вбудовування зображень base64 може заощадити пропускну здатність.
• Не кодуйте base64 зображення SVG, оскільки gzip ефективніший на XML, ніж на base64.
• Програмування: на динамічно генерованих зображеннях легше доставити їх за один запит, ніж скоординувати два залежні запити.
• Глибокі посилання: якщо ви хочете запобігти завантаженню зображення, трохи складніше витягти зображення зі сторінки HTML.

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