Кодуйте зображення до Base64 на Python

Перетворення зображення на Base64 рядок. Підтримуються SVG, JPG, JPEG, PNG, BMP, GIF, TIFF, ICO, IFIF, WEBP та інші формати зображень.

Кодування Base64

Base64 – це схема кодування, яка перетворює двійкові дані в текст ASCII, який часто використовується для передачі даних через Інтернет. Коли зображення перетворюється на Base64, результатом є рядок із латинських літер, цифр і двох символів – «+» і «/». Браузери можуть без проблем інтерпретувати ці кодовані дані. Іншими словами, Base64 – це кодування двійкового кодування в текст, яке можна вбудовувати в різні формати, такі як JSON, XML, URI даних або CSS.

Base64 широко використовується для вбудовування зображень або інших бінарних ресурсів безпосередньо у файли HTML або CSS. Це усуває потребу в додаткових веб-запитах, оскільки зображення вже включено в документ HTML. Однак Base64 найкраще підходить для невеликих зображень; великі зображення в кодуванні Base64 можуть роздувати HTML, що призводить до зниження продуктивності. Слід також зазначити, що Google ніколи не буде індексувати зображення Base64, оскільки воно не відображається в результатах пошуку зображень.


Перетворення зображення на Base64 онлайн

Кодуйте зображення за допомогою API Aspose.SVG for .NET у реальному часі! Завантажте зображення з локальної файлової системи, і ви негайно отримаєте результат як URI даних, джерело зображення Base64 і фонове джерело CSS Base64. Підтримуються SVG, JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP та інші формати зображень.



Перетворення зображення на Base64 на Python

У цій статті розглядається, як кодувати файл зображення в рядок Base64 за допомогою Aspose.SVG for Python via .NET API. У наступному прикладі Python показано, як перетворити зображення SVG на рядок Base64 і вставити його у файл SVG.

Код Python для перетворення зображення SVG на Base64

import base64
from aspose.svg import SVGDocument


document_path = "image.svg"

# Open an SVG image
with open(document_path, "rb") as file:
    bytes_data = file.read()

# Initialize an SVGDocument object
document = SVGDocument()

# Create an image element
img_element = document.create_element_ns("http://www.w3.org/2000/svg", "image")

# Convert SVG image to Base64 and set the href attribute
encoded_image = f"data:image/svg+xml;charset=utf-8;base64,{base64.b64encode(bytes_data).decode('utf-8')}"
img_element.set_attribute("href", encoded_image)

# Add the image element to the SVG document
document.document_element.append_child(img_element)

# Save the SVG document
document.save("image-base64.svg")

Фрагмент отриманого файлу image-base64.svg показано нижче. Рядок Base64 було обрізано, щоб не захаращувати приклад коду SVG. Формат для вставлення зображення Base64 як даних URI є таким:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Код SVG для вбудовування зображення Base64

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ..." alt="Alt text for the image"/>
</svg>



Додати зображення Base64 у HTML

Навіщо конвертувати зображення в Base64? Зображення, кодовані Base64, можна вставляти безпосередньо в HTML за допомогою тегу <img>, вставляючи дані зображення як URI даних. Цей метод зменшує кількість HTTP-запитів, необхідних браузеру для завантаження веб-сторінки, покращуючи продуктивність. У наведеному нижче фрагменті коду показано, як вставляти зображення Base64 у HTML.

HTML-код для вставлення зображення Base64 як URI даних

<body>
    <div>
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ..." alt="Alt text for the image">
    </div>
</body>

URI даних складається з двох частин, розділених комою. Перша частина визначає заголовок схеми даних URI для Base64 зображення, а друга частина визначає сам рядок зображення, кодованого в Base64:

  1. data:image/svg+xml;base64 – це заголовок схеми URI даних.
  2. PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ... – це кодовані дані Base64.



Додати зображення Base64 у код CSS

Ще один спосіб зменшити кількість HTTP-запитів для зображень – це використовувати властивість CSS background-image. Ця властивість встановлює зображення як фон елемента, і ви можете вказати кожне зображення як URL-адресу або як URI даних зображення. За допомогою URL-адреси браузер надсилає запит HTTP, щоб отримати зовнішнє зображення, але за допомогою зображення Base64, вбудованого як URI даних, зображення безпосередньо включається в документ. Це означає, що браузеру не потрібно робити додаткові HTTP-запити, що пришвидшує час завантаження сторінки.

Код CSS для вбудовування зображення Base64 як URI даних

body {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ...");
}



Вставте зображення Base64 у XML

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

Код XML із вбудованим зображенням Base64 SVG

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/svg+xml">PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ...</image>
</root>



Вставте зображення Base64 у JSON

Перетворення зображення у формат Base64 і збереження його як JSON корисно для вбудовування у веб-сторінки чи програми без додаткових запитів HTTP.

Код JSON із вбудованим зображенням Base64

{
  "image": {
    "mime": "image/png",
    "data": "PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ..."
  }
}

Онлайн кодери Base64

Онлайн Base64 Encoders перетворюють вміст документів SVG або файлів зображень у еквівалентне представлення рядків, яке кодовано за допомогою ASCII символів. Вони також надають приклади для URI даних, JSON, XML та інших. Інструменти кодування допомагають уникнути різноманітних проблем із кодуванням даних, які роблять вміст веб-сайту чи повідомлення електронної пошти нечитабельними. Кодери Base64 безпечні, прості у використанні та абсолютно безкоштовні. Вони працюють у будь-якому браузері та на будь-якій операційній системі. Перетворіть зображення на Base64 безкоштовно прямо зараз!

Початок роботи з Python API

Якщо ви хочете розробляти масштабовану векторну графіку та її додатки, встановіть наш гнучкий, високошвидкісний Aspose.SVG for Python via .NET API. pip – це найпростіший спосіб завантажити та встановити Aspose.SVG for Python via .NET. Для цього виконайте таку команду:

pip install aspose-svg-net

Додаткову інформацію про встановлення бібліотеки Python і системні вимоги ви знайдете в документації Aspose.SVG.

Інші підтримувані кодери

Ви можете закодувати зображення в Base64 – підтримуються формати JPG, PNG, BMP, GIF, TIFF, ICO та SVG:

  • PNG to Base64
  • JPG to Base64
  • PNG to XML
  • JPG to XML