205 lines
13 KiB
Markdown
205 lines
13 KiB
Markdown
---
|
||
title: "Base64 - Glossary | MDN"
|
||
chunk: 1/4
|
||
source: "https://developer.mozilla.org/en-US/docs/Glossary/Base64"
|
||
category: "reference"
|
||
tags: "web, html, css, javascript, documentation"
|
||
date_saved: "2026-05-05T05:24:47.878610+00:00"
|
||
instance: "kb-cron"
|
||
---
|
||
|
||
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Glossary/Base64#content)
|
||
* [Skip to search](https://developer.mozilla.org/en-US/docs/Glossary/Base64#search)
|
||
|
||
[ MDN ](https://developer.mozilla.org/en-US/)
|
||
HTML
|
||
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
|
||
|
||
HTML reference
|
||
|
||
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
|
||
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
|
||
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
|
||
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
|
||
|
||
HTML guides
|
||
|
||
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
|
||
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
|
||
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
|
||
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
|
||
|
||
Markup languages
|
||
|
||
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
|
||
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
|
||
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
|
||
|
||
CSS
|
||
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
|
||
|
||
CSS reference
|
||
|
||
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
|
||
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
|
||
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
|
||
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
|
||
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
|
||
|
||
CSS guides
|
||
|
||
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
|
||
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
|
||
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
|
||
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
|
||
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
|
||
|
||
Layout cookbook
|
||
|
||
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
|
||
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
|
||
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
|
||
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
|
||
|
||
JavaScriptJS
|
||
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
|
||
|
||
JS reference
|
||
|
||
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
|
||
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
|
||
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
|
||
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
|
||
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
|
||
|
||
JS guides
|
||
|
||
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
|
||
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
|
||
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
|
||
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
|
||
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
|
||
|
||
Web APIs
|
||
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
|
||
|
||
Web API reference
|
||
|
||
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
|
||
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
||
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
|
||
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
|
||
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
|
||
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
|
||
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
|
||
|
||
Web API guides
|
||
|
||
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
|
||
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
|
||
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
|
||
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
|
||
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
|
||
|
||
All
|
||
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
|
||
|
||
Technologies
|
||
|
||
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
|
||
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
|
||
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
|
||
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
|
||
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
|
||
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
|
||
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
|
||
|
||
Topics
|
||
|
||
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
|
||
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
|
||
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
|
||
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
|
||
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
|
||
|
||
Learn
|
||
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
|
||
|
||
Frontend developer course
|
||
|
||
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
|
||
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
|
||
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
|
||
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
|
||
|
||
Learn HTML
|
||
|
||
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
|
||
|
||
Learn CSS
|
||
|
||
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
|
||
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
|
||
|
||
Learn JavaScript
|
||
|
||
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
|
||
|
||
Tools
|
||
Discover our tools
|
||
* [Playground](https://developer.mozilla.org/en-US/play)
|
||
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
|
||
|
||
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
|
||
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
|
||
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
|
||
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
|
||
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
|
||
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
|
||
|
||
About
|
||
Get to know MDN better
|
||
* [About MDN](https://developer.mozilla.org/en-US/about)
|
||
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
|
||
|
||
* [Community](https://developer.mozilla.org/en-US/community)
|
||
* [MDN on GitHub](https://github.com/mdn)
|
||
|
||
[Blog](https://developer.mozilla.org/en-US/blog/)
|
||
1. [Glossary](https://developer.mozilla.org/en-US/docs/Glossary)
|
||
2. [Base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64)
|
||
|
||
# Base64
|
||
**Base64** is a group of similar [binary-to-text encoding](https://en.wikipedia.org/wiki/Binary-to-text_encoding) schemes that represent binary data in an [ASCII](https://developer.mozilla.org/en-US/docs/Glossary/ASCII) string format by transforming it into a radix-64 representation. The term _Base64_ originates from a specific [MIME content transfer encoding](https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding).
|
||
Base64 encoding schemes are commonly used to encode binary data for storage or transfer over media that can only deal with ASCII text (or some superset of ASCII that still falls short of accepting arbitrary binary data). This ensures that the data remains intact without modification during transport. Common applications of Base64 include:
|
||
* Email via [MIME](https://en.wikipedia.org/wiki/MIME)
|
||
* Storing complex data in [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
|
||
* Encoding binary data so that it can be included in a [`data:` URL](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data)
|
||
|
||
## In this article
|
||
* [Base64 characters](https://developer.mozilla.org/en-US/docs/Glossary/Base64#base64_characters)
|
||
* [URL and filename safe Base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64#url_and_filename_safe_base64)
|
||
* [Encoded size increase](https://developer.mozilla.org/en-US/docs/Glossary/Base64#encoded_size_increase)
|
||
* [Last chunk](https://developer.mozilla.org/en-US/docs/Glossary/Base64#last_chunk)
|
||
* [JavaScript support](https://developer.mozilla.org/en-US/docs/Glossary/Base64#javascript_support)
|
||
* [See Also](https://developer.mozilla.org/en-US/docs/Glossary/Base64#see_also)
|
||
|
||
## [Base64 characters](https://developer.mozilla.org/en-US/docs/Glossary/Base64#base64_characters)
|
||
When the term "Base64" is used on its own to refer to a specific [algorithm](https://developer.mozilla.org/en-US/docs/Glossary/Algorithm), it typically refers to the version of Base64 outlined in [RFC 4648, section 4](https://datatracker.ietf.org/doc/html/rfc4648#section-4), which uses the following alphabet to represent the radix-64 digits, alongside `=` as a padding character:
|
||
|
||
```
|
||
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/
|
||
|
||
```
|
||
|
||
## [URL and filename safe Base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64#url_and_filename_safe_base64)
|
||
A common variant of this definition allows only characters that are safe to use in filenames and [URL](https://developer.mozilla.org/en-US/docs/Glossary/URL) values. This version, defined in [RFC 4648, section 5](https://datatracker.ietf.org/doc/html/rfc4648#section-5), omits the padding and replaces `+` and `/` with `-` and `_`.
|
||
You don't need this encoding if you are not putting the data in a path segment or query parameter — for example, [data URLs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data) have neither and can use the standard Base64 encoding.
|
||
## [Encoded size increase](https://developer.mozilla.org/en-US/docs/Glossary/Base64#encoded_size_increase)
|
||
Each Base64 digit represents 6 bits of data (64 = 26). So, three 8-bit bytes of the input string/binary file (3×8 bits = 24 bits) can be represented by four 6-bit Base64 digits (4×6 = 24 bits).
|
||
This means that the Base64 version of a string or file is typically roughly a third larger than its source (the exact size increase depends on various factors, such as the absolute length of the string, its length modulo 3, and whether padding characters are used).
|
||
## [Last chunk](https://developer.mozilla.org/en-US/docs/Glossary/Base64#last_chunk)
|
||
The base64 string can be partitioned into chunks of 4 characters, where the last chunk may have fewer than 4 characters. The last chunk may be padded with `=` characters so it's exactly 4 characters long. Excluding padding characters, the last chunk may be one of the following:
|
||
* 2 characters: encodes 12 bits representing 1 byte (8 bits) of data
|
||
* 3 characters: encodes 18 bits representing 2 bytes (16 bits) of data
|
||
* 4 characters: encodes 24 bits representing 3 bytes (24 bits) of data |