Embed this tool on your site
<iframe src="https://devtoolbox.dedyn.io/tools/base64-image" width="100%" height="800" frameborder="0" title="Base64 Image Encoder/Decoder & Viewer"></iframe>

Base64 Image Encoder/Decoder & Viewer

Encode images to Base64 data URIs or decode Base64 strings back to viewable images. Supports PNG, JPEG, GIF, SVG, WebP, BMP, and ICO. Get HTML, CSS, and Markdown code snippets. Everything runs locally in your browser.

 
🖼
Drop an image here or click to browse
Supports PNG, JPG, GIF, SVG, WebP, BMP, ICO — Max 10 MB
.png .jpg .gif .svg .webp .bmp .ico

Image Preview

Uploaded image preview
File Name
--
Format
--
Dimensions
--
Original Size
--
Base64 Size
--
Size Increase
--

Code Snippets

HTML <img> Tag


                        
                    

CSS Background Image


                        
                    

Markdown Image


                        
                    

Decoded Image

--
Decoded image preview
Detected Format
--
Dimensions
--
Base64 Length
--
Estimated File Size
--

Code Snippets

HTML <img> Tag


                        
                    

CSS Background Image


                        
                    

Markdown Image


                        
                    

Base64 Image Encoding & Decoding

Base64 image encoding converts binary image data into an ASCII text string. This data URI format data:image/png;base64,iVBOR... can be embedded directly in HTML, CSS, JavaScript, JSON, or Markdown files without needing a separate image file.

Format auto-detection: When decoding, this tool examines the first bytes of the Base64 string to identify the image format. PNG starts with iVBOR, JPEG with /9j/, GIF with R0lGOD, and SVG with PHN2Zy.

Size comparison: Base64 encoding increases data size by approximately 33% because every 3 bytes of binary data become 4 ASCII characters. For small assets (icons, logos under 5 KB), this trade-off is often worth it to eliminate an extra HTTP request. For larger images, use regular file references instead.

Frequently Asked Questions

How do I decode a Base64 string back to an image?
Paste the Base64 string (with or without the data:image/... prefix) into the decoder tab and click "Decode & View". The tool auto-detects the image format from the Base64 header bytes and renders the image instantly. You can then download it as a file.
What image formats are supported for Base64 encoding and decoding?
This tool supports all common web image formats: PNG, JPEG/JPG, GIF, SVG, WebP, BMP, and ICO. The decoder auto-detects the format from Base64 header signatures like iVBOR (PNG), /9j/ (JPEG), R0lGOD (GIF), PHN2Zy (SVG), UklGR (WebP), Qk0 (BMP), and AAABAA (ICO).
Can I get code snippets for using Base64 images in HTML, CSS, and Markdown?
Yes, after encoding or decoding an image, the tool generates ready-to-use code snippets for HTML img tags, CSS background-image properties, and Markdown image syntax. Each snippet has a one-click copy button so you can paste it directly into your code.
Keyboard Shortcuts
Ctrl+Enter Decode / Convert
Ctrl+Shift+C Copy output
Ctrl+L Clear