DevPal   Online developer tools
Base64 image decoder
Online tool to Base64 encode images. Your data is safe, will not leave your browser.
You can upload up to 50 images (max 5MB each) as JPG, PNG, BMP, WEBP, GIF or SVG.

Drag and drop images here or click

Base64 image encoder

Base64 Image Encoder is a simple and free online tool that quickly and easily encodes your image.

Image to Base64

Base64 image encoder is a tool that converts image to Base64 encoded string.
For instance, you can convert PNG to Base64.
After you select your image, you will immediately get Base64 encoded plain text, Base64 encoded image for HTML usage and Base64 encoded image for CSS background attribute.
Besides raster images Base64 encoding (JPG, PNG, BMP, WEBP, GIF), you can also encode vector images such as SVG.

Common usage of Base64 for image encoding

  • Embedding images into HTML code
  • Embedding images into CSS code

Image to Base64 conversions supported:

The tool can Base64 image encode many file formats:

  • JPG to Base64
  • PNG to Base64
  • BMP to Base64
  • WEBP to Base64
  • GIF to Base64
  • SVG to Base64

Image to Base64 online

The tool converts image to Base64 online, in a browser, without the need to download any tool to your machine.
That way you can Base64 encode images immediately, whether you need to encode an image just once or you do that on daily basis.

img src with Base64

A common use case for Base64 encoded images is to put them into "img src" element inside HTML code.
"src" attribute in that case should contain Base64 encoded image prefixed with a text like data:image/jpeg;base64,.
However, this tool will generate the whole "img" element for you, so you can just adapt it if needed and put into your HTML code directly.
See the examples below.

css background image with Base64

Another common use case for Base64 encoded images is to use them for CSS backgrounds.
Pass Base64 encoded image into url prefixed with a text like data:image/jpeg;base64,.
However, this tool will generate the whole CSS "background" attribute for you, so you can just put that into your CSS code directly.
See the examples below.

Base64 image example

This Base64 image example shows how a sample image looks like before encoding and after encoding.
Since encoded text from images can be very long, for this example we will use a very small image.

Image example: Base64 image example
Base64 encoded: iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAABsFBMVEVHcEz//bXvoBPKbAXAYQj+/tz/vi/WfhDfhAr5qBT/wy++Wgu2IBz2phX/53D/uCPxhgDTdgX/wCjNbwXqmxH7rBbTdwbGZwj/2VP9shjNbwbufwTRdQX/zz7//8vTeQf0kQDggQW2WArrhQTkhQbkhwbsgwH8wBXFZw3KbAX0phD2jwDPcwbHagb/7oX+51b/+qH3kwD+9HHxgwD2jwD/00z+9pD+83H+5VX5mQf7sAzGaQXMcAXQdgb7qQPpgAL6sAb8ySL8yiX5rAL/tB3/3C/pjAn/933umg//1zP/4TL/xDT90TD++JL+sBj8rBP/zS///3r+yC7/vSj/+Zz/+qz9pg3+0TX+xzKgahjAkh//zTT/6zf/0i/xuDX/3TP/0jrjhQeUWAb/40P/0jb/yinvlQz/+Ij/uSL//bv/2Dimbxr/9EvJoSDqlg7+9mHpyi//1DzpsC/w2T+eYwnRuD7//GL+0Cv/9Fv/7mv/84v/vxz/3lH+1j/2ngv//83VnSWxfyTy2zW8hiD56kffqjPZw0XfqTH42DSITgWXYg7eqDGCRgHfyEb/uBX/3UlPCgIZAAAARHRSTlMA/vqCIvz+AQL9/hIH/P39bMf9u/v+91H9/Jo36fz8+FLWF8Dp+kDEDI/7l9dj+/77kP5jw/z9/v7p12+95MOQndbXkJOrxpgAAAGUSURBVBjTRZFXU8JAFEYXiIFQBQ3YECv2rtj7EjAJCETpHUQQ26ggKPbe/7IbFTwP3+ych7tz7wcAj4QPubzyBGVrXO1aXulaapH/ewloXEhaBFdXGdvXTAsA4j9b/Wlprvqh2bY18uuRPT8TbG4KMhk+h0N9vEYT3ErTtsm2gbCZts8Gz8d+5o9HlcVJp9OCcDpHi8q6aRmyRvdEaarwkcsfHOQfc4WhUh2sRnoR6i8Sidf3493d+/jLceJCz7Uj3Q6ljrXnk/hhMHiLMsJ60x0yIG+1a1yn5j0/TdPBPb/5dEtj78SQXuekjlCENiPoSMjh4taRBmq3SupysOwagmUDLqnK3dEGQMNlPcd4AztJj8ezk/QyeP2lGn2pi/VCnPFfe6PRwNFdGIdESsQv328lIB6+8WWzvuwDDkmrFuOX18VqCbuKCT+9HTGcnRRSIn55CeihahUkCdNpSJKEkKopH7whti9UEAiFcJ+q6f49OIqBJiplRaQorUhc6UcMZLNz8wZDk1qElcsp9yrDsLZKxd9gIFo8ETqejgAAAABJRU5ErkJggg==