Image ↔ Base64 ช่วยแปลงไฟล์รูปภาพ (PNG, JPG, SVG, WebP, GIF) เป็น Data URI ที่เข้ารหัสแบบ Base64 และแปลงกลับ เพียงลาก, วาง หรือคลิกเพื่อโหลดรูปภาพ แล้วคัดลอกสตริง data:image/...;base64,... ทั้งหมดเพื่อนำไปฝังแบบอินไลน์ใน CSS, HTML หรือไฟล์กำหนดค่า หรือจะวาง Data URI เพื่อพรีวิวและดาวน์โหลดกลับเป็นไฟล์รูปภาพก็ได้
รูปภาพที่เข้ารหัสแบบ Base64 สามารถฝังลงในไฟล์ CSS, HTML หรือไฟล์กำหนดค่าได้โดยตรง — มีประโยชน์สำหรับไอคอนขนาดเล็ก, เทมเพลตอีเมล หรือไฟล์งานในขั้นตอน Build ซึ่งไม่ต้องการให้มีการเรียกใช้รูปภาพจากภายนอก เครื่องมือนี้ทำให้การแปลงเป็นเรื่องง่าย เพียงลากไฟล์รูปภาพ, วางจากคลิปบอร์ด หรือคลิกเพื่อเลือกไฟล์ เครื่องมือจะแปลงเป็น Data URI พร้อมระบุ MIME type ที่ถูกต้อง (data:image/png;base64,..., data:image/svg+xml;base64,... ฯลฯ) นอกจากนี้ยังทำงานในทางตรงกันข้ามได้ด้วย — เพียงวาง Data URI แล้วเครื่องมือจะแสดงรูปภาพให้พรีวิวและมีลิงก์สำหรับดาวน์โหลดเพื่อบันทึกเป็นไฟล์จริง การทำงานทั้งหมดเกิดขึ้นในเบราว์เซอร์ ไม่มีการอัปโหลด — รูปภาพของคุณจะไม่หลุดออกจากเครื่อง รองรับรูปแบบ PNG, JPG/JPEG, SVG, WebP, GIF และ ICO
โหลดรูปภาพได้หลายวิธี: ลากไฟล์จากระบบของคุณ, วางจากคลิปบอร์ด (รองรับการสกรีนช็อต) หรือคลิกเพื่อเปิดหน้าต่างเลือกไฟล์
เมื่อคุณวาง Data URI เครื่องมือจะแสดงรูปภาพให้เห็นทันที เพื่อให้คุณตรวจสอบความถูกต้องก่อนจะคัดลอกหรือดาวน์โหลด
คัดลอกสตริง data:image/...;base64,... ที่สมบูรณ์พร้อมสำหรับนำไปวางใน CSS, HTML src attribute หรือ JSON config ของคุณ
ไม่ต้องรอการอัปโหลด — ทุกอย่างเกิดขึ้นภายในเครื่อง แม้แต่รูปภาพขนาดใหญ่ก็แปลงได้ในเสี้ยววินาที
จาก Base64 Data URI คุณสามารถบันทึกรูปภาพที่ถอดรหัสแล้วกลับเป็นไฟล์จริง (PNG, JPG, SVG ฯลฯ) พร้อมนามสกุลไฟล์ที่ถูกต้อง
รองรับ PNG, JPG, SVG, WebP, GIF และ ICO โดยจะตรวจจับ MIME type ให้โดยอัตโนมัติเพื่อให้ Data URI ของคุณถูกต้องเสมอ
แปลงไอคอนขนาด 16×16 เป็น Base64 และใส่แบบอินไลน์ใน background-image: url(...) ไม่ต้องมีการเรียกใช้ HTTP ไม่ต้องกังวลเรื่องแคช — ไอคอนจะไปพร้อมกับไฟล์ CSS ของคุณ
ฝังรูปภาพลงในอีเมล HTML โดยตรงในรูปแบบ Data URI เมื่อการอ้างอิงรูปภาพภายนอกถูกบล็อกโดยโปรแกรมอ่านอีเมลหรือถูกมองว่าเป็นสแปม
ใส่รูปภาพขนาดเล็กลงในเอาต์พุตของ Webpack/Vite bundle เพื่อลดขั้นตอนการดึงข้อมูลรูปภาพในระหว่างที่แอปเริ่มต้นการทำงาน
วาง Data URI จาก Dev tools, ซอร์สโค้ด HTML หรือไฟล์ CSS เพื่อพรีวิวและดาวน์โหลดรูปภาพดั้งเดิมกลับมาเป็นไฟล์
เมื่อรูปภาพที่ฝังไว้ไม่แสดงผล ให้วาง Data URI ลงในตัวถอดรหัสเพื่อตรวจสอบว่า Base64 นั้นถูกต้องและ MIME type ระบุไว้อย่างสมบูรณ์หรือไม่
คลิกไอคอน Image Base64 ใน DevSuite Pro dock แผงควบคุมแบบสองช่องจะเปิดขึ้นพร้อมพื้นที่วางไฟล์และช่องสำหรับ Data URI
ลากไฟล์มาวางบนพื้นที่, วางรูปภาพจากคลิปบอร์ด (Ctrl+V) หรือคลิกที่พื้นที่เพื่อเลือกไฟล์ แล้วภาพพรีวิวจะปรากฏขึ้น
Base64 Data URI จะถูกสร้างขึ้นทันทีในช่องเอาต์พุต — คลิก Copy เพื่อส่งข้อมูลไปยังคลิปบอร์ด พร้อมสำหรับนำไปวางแบบอินไลน์
หากต้องการแปลง Base64 กลับเป็นรูปภาพ ให้วาง Data URI ลงในช่อง พรีวิวจะแสดงรูปภาพนั้นและปุ่ม Download จะปรากฏขึ้น
บันทึกรูปภาพที่สร้างขึ้นใหม่เป็นไฟล์จริง หรือคัดลอก Data URI เพื่อแชร์หรือนำไปฝังในที่อื่น
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 64 รายการสำหรับเบราว์เซอร์ของคุณ
