รูปภาพเป็น Base64
ลากรูปภาพใดก็ได้มาวางในตัวแปลงรูปภาพเป็น Base64 นี้ เพื่อรับ data URI และโค้ดพร้อมวางสำหรับ HTML, CSS และ JavaScript รูปภาพแบบฝังช่วยลดคำขอ HTTP สำหรับไอคอนขนาดเล็ก และจำเป็นสำหรับ HTML ไฟล์เดียว เทมเพลตอีเมล และแอปออฟไลน์
วิธีแปลง รูปภาพเป็น Base64 ออนไลน์
- เลือกไฟล์รูปภาพหรือวาง URL รูปภาพ
- เลือกผลลัพธ์: data URI,
<img>, CSS background, favicon, JSON และอื่น ๆ - คลิก เข้ารหัสรูปภาพเป็น Base64
- ดูตัวอย่างรูปภาพและคัดลอกโค้ด
ตัวแปลง รูปภาพเป็น Base64 เพิ่มเติม
รูปแบบผลลัพธ์
เลือกรูปแบบการห่อผลลัพธ์ ตัวแปลงสามารถส่งคืน:
- txt: เฉพาะสตริง Base64 พร้อมวางลงในโค้ด ฟิลด์ฐานข้อมูล หรือคำขอ API
- uri: URI แบบ
data:ที่สมบูรณ์ ซึ่งวางในแถบที่อยู่ของเบราว์เซอร์หรือใช้ได้ทุกที่ที่รับ URL - html img: แท็ก
<img>ที่มี data URI ในsrc - css background image: กฎ CSS ที่ใช้
background-image: url(data:...) - html favicon: แท็ก
<link rel="icon">สำหรับ favicon แบบฝัง - html hyperlink: ลิงก์
<a>ที่ดาวน์โหลดหรือเปิดไฟล์ที่ฝังไว้ - html iframe:
<iframe>ที่แสดงเนื้อหาแบบฝังในหน้า - javascript image: JavaScript ที่สร้างออบเจ็กต์
Image - javascript popup: JavaScript ที่เปิดเนื้อหาในหน้าต่างใหม่
- json: ออบเจ็กต์ JSON ที่มีชื่อไฟล์ MIME type และข้อมูล
- xml: องค์ประกอบ XML ที่มีข้อมูลอยู่ในส่วน CDATA
ควรฝังรูปภาพเป็น Base64 เมื่อใด?
ฝังรูปภาพขนาดเล็ก (ต่ำกว่าประมาณ 5–10 KB) เช่น ไอคอน โลโก้ และภาพตัวยึดตำแหน่ง เพื่อลดคำขอ หลีกเลี่ยงการฝังภาพถ่ายขนาดใหญ่ เพราะทำให้ HTML/CSS หนักขึ้น แคชแยกไม่ได้ และทำให้การแสดงผลช้าลง อ่านรายละเอียดเพิ่มเติมได้ที่อธิบาย data URI
คำถามที่พบบ่อย
จะแปลงรูปภาพเป็น Base64 ได้อย่างไร?
เลือกรูปภาพของคุณ เลือก "Data URI" หรือ "<img>" เป็นผลลัพธ์ แล้วคลิก "เข้ารหัสรูปภาพเป็น Base64" จากนั้นคัดลอกผลลัพธ์ไปใส่ใน HTML หรือ CSS
รองรับรูปภาพรูปแบบใดบ้าง?
ทุกรูปแบบที่เบราว์เซอร์ของคุณอ่านได้: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, TIFF และอื่น ๆ
จะใช้รูปภาพ Base64 ใน HTML ได้อย่างไร?
ใส่ data URI ในแอตทริบิวต์ src: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">
ความคิดเห็น (0)
มีคำถาม ไอเดีย หรือพบข้อผิดพลาดใน “รูปภาพเป็น Base64” ใช่ไหม? แสดงความคิดเห็น ให้คะแนนเครื่องมือ หรือตอบกลับผู้อื่นได้เลย
ยังไม่มีความคิดเห็น มาเป็นคนแรกที่แสดงความคิดเห็นสิ!