1. LOAD FILE
BROWSE YOUR COMPUTER FOR AN IMAGE
DRAG & DROP AN IMAGE IN THE DROPZONE>
2. COPY CODE
DROPZONE / PREVIEW
Using this Base64 encoder is straight forward.
Depending on what your browser supports, there are three ways to add an image for encoding.
For more on browser support, see the "browsers page", where some of the most common browsers are listed according to support
for Base64 code and the HTML5 technology used by this site. If all HTML5 features are supported, all three options will be visible.
The first way to add an image is to type or paste in a link to an image that is already online.
Only valid links for the intertweetyweb is accepted, and only image files can be encoded.
The links are validated as you type them, and for now no special characters in the links are allowed.
This option is always available as it does not require any special support for newer technology.
The second way is to browse your computer for an image. This option works like most upload buttons,
and once you click the button a window appears where you can browse your local filesystem for an image file.
The file is never really uploaded to the server, but the file is inserted into the website by your browser locally.
As such base64img.com never really receives the file, it merely reads it to be able to encode it to Base64.
The third way to add an image is to drag and drop the image file onto the clearly defined dropzone.
It does not matter if the dropzone is currently showing a preview of another image, dropping images in the zone still works.
Files can only be dropped in the clearly defined zone, and dropping files elsewhere on the site will not work as intended.
As mentioned, this site uses HTML5 to process the images, no files are uploaded to the server,
but are merely accessed directly on the users computer and decoded without uploading the image itself.
For this reason there is no size limit for files, and the only limit that exist is that the file is an actual image.
However encoding very large images may cause problems, and no guarantees are given for the success of such encoding.
Once an image is uploaded a preview will appear in the preview window.
If the image is larger than the preview window, it will be scaled down.
The Base64 code is for the original sized image, and is not affected by the size of the preview image at all.
You can click the image in the preview window at any time to display a larger version of the image.
The copy to clipboard button is activated as soon as there is any data to be copied.
There are also three options for copying the Base64 code to the clipboard. The string only option copies the Base64 code as string only,
but includes the Base64 decleration and mime type, wich in some cases will have to be removed manually if not needed.
The CSS option copies the code as a CSS background, it includes the necessary CSS to paste the code directly into CSS.
The HTML option includes the HTML image tags so that the code can be pasted directly into any HTML document.
Once a file is uploaded, some general information about the image file will also be shown, like the name, type, size and dimensions of the image.
As a sidenote, this website was created without the use of images!
If you find the matrix logo annoying, or that it slows down your browser, a click on the logo starts/stops the matrix effect!
All major browsers support the use of Base64 for images, except Internet Explorer 7 and previous versions.
Internet Explorer 8 only support Base 64 for images up to a size of 32 kilobytes.
Internet Explorer 9 supports Base64 with no such size limit.
This website however uses HTML5, and full support for all features is, as of this writing,
only achieved in newer versions of Google Chrome and Mozilla Firefox browsers.
Opera 11 and up supports uploading files with a "browse" button, but has no support for drag and drop.
Internet Explorer supports some of the HTML5 features, but only canvas for the site logo is used, and only in IE9.
It looks however like support will be added for some HTML5 features in Internet Explorer 10.
At the time of this writing, only online images can be encoded in Internet Explorer by this website.
There are however other websites using serverside scripting like PHP, that will encode images in all browsers.
As this website was created primarily as a small project to see what HTML5 can do
when it comes to Base64 encoding, no such serverside fallback was added to this site.
As such this site will only work optimally in browsers with full support for the needed HTML5 features.
We recommend using Chrome for this site, for the simple reason that border colors seems to be shown more correctly
in Chrome compared to Firefox. This is visual only, and functionality will be the same in both Firefox and Chrome.
Below is an overview of the HTML5 features used by this website, and the support by different browsers for those features.
- File API
- Drag & Drop
- Local Storage
- Object URL's
- Safari *
- yes **
- yes ***
* Tested in Safari version 5 only, and only tested with this site to see what works here.
** Internet Explorer has some support for drag & drop, but does not support the File API, so it's useless for this site.
*** Internet Explorer supports canvas from version 9 only.
One commonly used method to encode images as plain text is Base64.
Base64 encoding takes three bytes, each consisting of eight bits, and represents them as four printable characters in the ASCII standard.
It does this in two steps. The first step is to convert three bytes to four numbers of six bits.
Each character in the ASCII standard normally consists of seven bits.
However Base64 only uses 6 bits of the ASCII standard, this corresponds to 2^6, wich equals 64 characters, hence the name Base64.
These numbers are converted to ASCII characters in the second step using the Base64 encoding table.
None of the special characters available in ASCII are used. The 64 base characters used are -
10 digits, 26 lowercase characters, 26 uppercase characters as well as '+' and '/'.
If the size of the original data in bytes is a multiple of three, it all adds up fine. However if it is not, the Base64 string
may end up with one or two 8-bit bytes at the end. For proper encoding the Base64 string has to be dividable by three.
The solution is to append enough bytes with a value of '0' to create a 3-byte group at the end.
One such value is appended if we have two extra bytes of data at the end, two is appended for one extra byte at the end.
These artificial trailing zero's cannot be encoded using the encoding table, as that could create a conflict.
Instead they are represented by a 65th character. The Base64 padding character '='.
This can only ever appear at the end of encoded data to fill out the neccessary byte(s) to make the encoding a mutliple of three's.
When using external images in a website the server has to request and load those images. Base64 code is inline in the document itself,
either in the CSS file or embedded directly in the HTML file. The image still has to load, but the overhead of the server request is eliminated.
The caveat is that Base64 encoded data tend to be roughly 1.37 times larger than the original image, and as such would take longer to
load than the image itself would. The savings is solely made in not having to request the image and start a download of an external file.
One would think that if the increased size of around 25% when encoding the image is larger in bytes than the server request for the actual image,
embedded Base64 would in theory be slower than using the external image. However external resources in a webpage also have som lag
when loading, and especially at the beginning when establishing the download to the browser there is a period where the external resource
in most cases will load slower than an embedded resource like Base64. Also most browsers can only handle a certain number of downloads
simultaneously, and when a website uses many external resources these are often queued by the browser. Most browsers these days can handle
quite a large number of external resources downloading at the same time, and many small images can be combined in a CSS sprite instead.
Another disadvantage is that inline Base64 may not be cached by the browser, while images almost certainly will.
Many considerations come in to play when deciding to use Base64 or not, and we'll leave it up to the user to decide what to do, but on websites
with lots of small images, only so many can be transferred to the browser simultaniously, and the many requests add a signifant overhead.
In such cases, using Base64 would probably speed up the website considerably. In cases where only one or two large images are used
Base64 is probably not a viable option if increased speed is the goal, and for many small images, CSS sprites are in many cases a better solution.
There still is something inherently cool about embedding images directly in a website, and another convenient use is to store the images as Base64
Base 64 can also be used in e-mail's containing images, and the e-mail would seem to not have any attachments, but still have images embedded.
Wikipedia has an in depth article regarding Base64 for those that wish to learn even more!
This site policy outlines the types of personal information that is received and collected by this site and how it is used.
You may access and browse our site without disclosing your personal data.
We do not require you to provide any information about yourself that you do not wish to share.
Like many other web sites, www.base64img.com makes use of log files. The information in these files includes internet protocol addresses, type of browser, Internet Service Provider (ISP), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track users movement around the site, and gather demographic information. No such information is linked to anything that is personally identifiable.
All statistical information about our users is collected in aggregate. We analyse our web server's log files to identify, among other things:
our site's most popular pages, the browsers most often used and the sites and search engines that have referred visitors to our site.
All content on these pages are copyrighted, and any copying of code or graphics other then the base64 code that is supplied to you is considered unlawful.
Base64img.com also does it's best to comply with the rules and regulations set out by the Digital Millennium Copyright Act.
In cases where any copyright infrigment by this site is claimed, we ask that DMCA guidelines as outlined in the above link be followed. Base64img.com and it's owner shall not be responsible for, and disclaims all liability for any loss, liability, damage (whether direct, indirect or consequential), personal injury or expense of any nature whatsoever which may be suffered by you or any third party (including your company), as a result of or which may be attributable, directly or indirectly, to your access and use of the website, any information contained on the website, your or your company's personal information or material and information transmitted over this site. In particular, neither the website owner nor any third party or data or content provider shall be liable in any way to you or to any other person, firm or corporation whatsoever for any loss, liability, damage (whether direct or consequential), personal injury or expense of any nature whatsoever arising from any delays, inaccuracies, errors in, or omission of any information or the transmission thereof, or for any actions taken in reliance thereon or occasioned thereby or by reason of non-performance or interruption, or termination thereof.
This website policy document constitute the sole record of the agreement between you and base64img.com in relation to your use of the website.
Neither you nor this site and it's owner shall be bound by any express tacit or implied representation, warranty, promise or the like not recorded herein.
Unless otherwise specifically stated these website terms and conditions supersede and replace all prior commitments, undertakings or representations, whether written or oral, between you and base64img.com in respect of your use of the website. You acknowledge that by visiting the website from time to time, you shall become bound to the current version of the relevant policy, and unless stated in the current version, all previous versions shall be superseded by the current version. You shall be responsible for reviewing the then current version each time you visit the website.
Base64img.com reserves the right to change this policy at any time without notice.