CONVERT IMAGE TO BASE64
(Required) Please select an image file below 10MB.
(Optional) The converted file will be emailed to you at this address.
(Optional) Enter the width and height of the final image. If you want to convert the image to a thumbnail then enter either width or height.
(Optional) Turn this on if you want want to apply additional optimization to your JPEG|PNG|GIF files.
HOW-TO
  • Step 1: (Required) Please select an image file to convert to base64. Make sure the file is less than or equal to 10MB. Fully supported formats (i.e., Can be resized and may be optimized before converting to base64) are: BMP, DIB, EPS, GIF, ICNS, ICO, IM, JPEG, JPEG 2000, MSP, PCX, PNG, PPM, SGI, SPIDER, TGA, TIFF, WebP, and XBM.
  • Step 2: (Optional) Please enter your email address. The converted file will be emailed to this address as an attachment immediately. Please check your spam folder if you could not find the email.
  • Step 3: (Optional) If you want to resize your image before converting to base64, then please enter the desired width and height value of the final image. If you want to convert your file to a thumbnail then just enter a size in either width or height field. The image will be converted preserving the aspect ratio of the original image.
  • Step 4: (Optional) If you want to optimize your image before converting it to base64, then turn-on the Optimize option. It can potentially reduce the size of the final image without causing any visible degradation in quality. Optimization can only be done with JPEG, PNG and GIF image formats.

WHAT IS BASE64

Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. In base64 representation, it takes 4 ASCII characters for 3 bytes of data. That means every base64 digit represents exactly 6 bits of data. So there is a 33% increase in the size of the output. The standard base64 encoding uses ASCII characters 'A'-'Z', 'a'-'z', '0'-'9', '+' and '/' and '=' as a padding character. URL safe version uses '-' instead of '+' and '_' instead of '/'.

Base64 encoding is used when there is a need to transfer binary data over media that only supports ASCII. Some protocols might interpret binary data differently and thus prevent their successful transfer. So it needs to be encoded to base64 to ensure that the data remains intact during transfer. Base64 encoding is commonly used for sending files via email. It's also used to embed binary assets (such as images) in web pages.

HOW TO USE A BASE64 IMAGE IN HTML AND CSS

Base64 encoded images can be embedded in a web page using either HTML or CSS. It can be done with a Data URL. The format of the data URL is shown below:

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

In HTML you can use a data URL instead of a regular URL inside <img> tag as show below:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAABhGlDQ1BJQ0MgcHJvZmls" alt="some-image">

In CSS you can use a data URL for setting background images as shown below:

body {
  background:
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAABhGlDQ1BJQ0MgcHJvZmls)
    no-repeat
    left center;
  padding: 4px;
}

One thing you should keep in mind before using a base64 encoded image on your webpage is that it'll increase the size of the document. Using a data URL can reduce the number of requests to your server which will reduce the page load time (thus making your page load faster), but that benefit will be lost if you use a very large base64 encoded image, as it'll increase the size of the document and also consume more CPU power trying to decode the image. So it's better to use base64 encoding only for tiny individual images, unless you know what you're doing. To learn more about it, you can read this article on CodeRiddles discussing the advantages and disadvantages of using a base64 image.