DevToolBoxฟรี
บล็อก

ตัวแปลงภาพเป็น Base64

แปลงภาพเป็นสตริง Base64 และ Data URI ฟรี ไม่ต้องสมัครสมาชิก

🖼️

ลากภาพมาที่นี่หรือคลิกเพื่อเลือก

รองรับ PNG, JPG, GIF, SVG, WebP, ICO

เกี่ยวกับการเข้ารหัส Base64 ของภาพ

This base64 to image converter lets you encode images to Base64 strings or decode Base64 back to viewable images. Embed images directly in HTML using <img src="data:image/png;base64,...">, in CSS with background-image: url(data:image/png;base64,...), or store them in JSON configs. Supports PNG, JPG, WebP, SVG, GIF, and ICO formats. The data URI format includes the MIME type prefix, while raw Base64 is just the encoded string. Best practice: only Base64-encode images under 10KB to avoid bloated HTML. All conversion happens client-side for privacy.

𝕏 Twitterin LinkedIn

💬 User Feedback

Have suggestions or found a bug? Leave a message and we'll get back to you.
0/2000

ให้คะแนนเครื่องมือนี้

4.4 / 5 · 76 คะแนน

อัปเดตข่าวสาร

รับเคล็ดลับการพัฒนาและเครื่องมือใหม่ทุกสัปดาห์

ไม่มีสแปม ยกเลิกได้ตลอดเวลา

Enjoy these free tools?

Buy Me a Coffee

วิธีใช้

  1. ลากหรือเลือกภาพ
  2. ดูสตริง Base64
  3. คัดลอกรูปแบบที่ต้องการ
  4. ใช้แท็บถอดรหัส

กรณีใช้งาน

  • ฝังไอคอนใน HTML/CSS
  • ภาพในเทมเพลตอีเมล
  • เก็บภาพใน config JSON
  • ลดคำขอ HTTP

คำถามที่พบบ่อย

What image formats are supported?
PNG, JPG/JPEG, GIF, SVG, WebP, ICO, and BMP. Any image format your browser can display.
Is there a file size limit?
No hard limit, but Base64 encoding increases size by ~33%. Images over 10KB are generally not recommended for Base64 embedding.
Is my image uploaded to a server?
No. All conversion happens entirely in your browser. Your images never leave your device.
What is the difference between a data URI and raw Base64?
A data URI includes the MIME type prefix like 'data:image/png;base64,' followed by the encoded string. Raw Base64 is just the encoded characters without the prefix. Browsers need the full data URI format to display images inline.
How do I use Base64 images in CSS background-image?
Use the syntax: background-image: url('data:image/png;base64,iVBOR...'). This tool generates the complete CSS snippet ready to copy and paste into your stylesheet.
How do I use Base64 images in HTML img tags?
Set the src attribute to the data URI: <img src="data:image/png;base64,iVBOR...">. This tool generates the complete HTML <img> tag with the encoded image ready to use.
What is the recommended image size limit for Base64 encoding?
Keep Base64-encoded images under 10KB (original file size). Larger images significantly increase HTML/CSS file size and hurt page load performance. Use regular image files with CDN for larger assets.
Can I convert Base64 back to a PNG or JPG file?
Yes. Switch to the 'Base64 to Image' tab, paste your Base64 string or data URI, and the tool will decode and display the image. You can then right-click to save it as PNG or JPG.