Stax
Tools

Image to Base64 Converter

Convert any image to Base64 or Data URI instantly.

🖼️
Drop an image here or click to browse
PNG, JPG, GIF, WebP, SVG — any image format

การเข้ารหัส Base64 รูปภาพใช้ทำอะไร

รูปแบบผลลัพธ์สองแบบที่อธิบาย

วิธีใช้รูปภาพ Base64 ใน HTML และ CSS

การเข้ารหัส Base64 รูปภาพเป็นเทคนิคที่ใช้ใน web development เพื่อ inline รูปภาพโดยตรงในไฟล์ HTML, CSS และ JavaScript แทนที่จะลิงก์ไปยังไฟล์รูปภาพภายนอก คุณฝังรูปภาพทั้งหมดเป็นสตริงข้อความ ช่วยลด HTTP request และทำให้ resource สมบูรณ์ในตัวเอง

นักพัฒนา front-end ฝังไอคอนและโลโก้ขนาดเล็กเป็น Base64 Data URIs ภายในไฟล์ CSS เพื่อลด HTTP request นักออกแบบ email template แทรกรูปภาพเป็น Base64 เพื่อให้แสดงได้อย่างถูกต้องแม้ mail client บล็อกการโหลดรูปภาพภายนอก การผสานรวม API ที่รับการอัปโหลดรูปภาพเป็น JSON request body มักต้องการรูปภาพที่เข้ารหัสเป็นสตริง Base64 ล้วนๆ

  • Data URI — รวม MIME type prefix (เช่น data:image/png;base64,...) ใช้โดยตรงใน HTML src attributes, CSS background-image: url(...) หรือ email template
  • Pure Base64 — สตริงที่เข้ารหัสดิบโดยไม่มี prefix ใดๆ ใช้เมื่อ API หรือฟิลด์ฐานข้อมูลคาดหวังเฉพาะข้อมูล Base64
  • HTML img tag: <img src="data:image/png;base64,ABC..." />
  • CSS background: background-image: url('data:image/png;base64,ABC...');
  • Email HTML: รูปภาพ inline ในอีเมลหลีกเลี่ยงปัญหารูปภาพเสียเมื่อ mail client บล็อก

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

What is Base64 encoding for images?
Base64 encoding converts binary image data into a string of ASCII characters. This lets you embed an image directly inside HTML, CSS, or JSON without needing a separate file. The encoded string is about 33% larger than the original binary file.
What is a Data URI?
A Data URI (data URL) is a complete image reference embedded as a string. It has the format: data:[mediatype];base64,[base64data]. You can use it directly in the src attribute of an <img> tag, as a CSS background-image value, or anywhere a URL is accepted.
Is my image uploaded to a server?
No. This tool runs entirely in your browser using the FileReader API. Your image is never sent to any server. It is read and converted locally, making this tool safe to use with sensitive or private images.
Why is the Base64 output larger than the original image?
Base64 encodes every 3 bytes of binary data into 4 ASCII characters, resulting in approximately 33% size overhead. For example, a 100 KB image will produce roughly 133 KB of Base64 text. This is the inherent cost of representing binary data as text.
When should I use Base64 images vs regular image files?
Use Base64 for small icons, logos, or images that are part of a CSS/HTML file to save an HTTP request. Avoid Base64 for large images — the size overhead and lack of browser caching make it slower than serving a regular image file. A common rule of thumb: use Base64 only for images under 5–10 KB.

เครื่องมือที่เกี่ยวข้อง