Image to Base64
Get a data URI to paste into code.
Files never leave your device
How to use Image to Base64
Get an image as text so you can embed it straight into HTML, CSS, JSON or an email template. Copy the full data URI or the Base64 part alone. This works best for small icons and logos; Base64 is about a third larger than the file itself.
- 1
Choose an image.
- 2
Pick Data URI or Base64 only.
- 3
Click Copy and paste it into your code.
Image to Base64: common questions
How do I use a Base64 image in HTML?
Copy the data URI and put it in the src attribute, like <img src="data:image/png;base64,...">. In CSS, use it inside url().
What is the difference between a data URI and Base64?
A data URI is the Base64 text with a prefix like data:image/png;base64, that tells the browser the file type. Use Base64 only when a tool or API asks for just the encoded string.
Should I convert large photos to Base64?
Usually not. Above roughly 10 KB a normal image file is better, because Base64 is bigger and inlined images can't be cached separately.
More Image tools
- Resize imageSet exact width and height, or scale by percent.
- Compress imageShrink photos with a quality slider.
- Convert imageSwitch between JPG, PNG and WebP.
- Crop imageDrag to keep only the part you want.
- Rotate & flipTurn or mirror a photo.
- Round cornersSoft corners or a perfect circle.
- Add borderFrame a photo with a solid border.
- Colour palettePick colours and pull a palette from a photo.