รูปเป็น Base64
Base64 เข้ารหัสไบต์รูปไบนารีเป็นข้อความ ASCII ที่วางใน img src ของ HTML, CSS url() หรือเพย์โหลด JSON ได้ มีประโยชน์สำหรับไอคอนเล็ก data URI ในต้นแบบ และ API ที่คาดหวังรูปอินไลน์
วิธีเข้ารหัสรูปเป็น Base64
1. อัปโหลดไฟล์รูป (ให้เล็ก — ต่ำกว่า ~100 KB ใช้ได้จริง)
2. คัดลอกสตริง Base64 ที่สร้างหรือ data URL เต็ม
3. วางใน HTML, CSS หรือคอนฟิก
4. ทดสอบในสภาพแวดล้อมเป้าหมาย — ไคลเอนต์อีเมลบางตัวจำกัด data URI
ตัวอย่างการเข้ารหัส
โลโก้อินไลน์ในอีเมล HTML
โลโก้ PNG 2 KB เป็น data:image/png;base64,... หลีกเลี่ยงการบล็อกรูปภายนอกในกล่องจดหมายองค์กรที่เข้มงวด
พื้นหลัง CSS สำหรับต้นแบบ
วางเท็กซ์เจอร์ Base64 ในเดโมไฟล์เดียวโดยไม่โฮสต์แอสเซ็ต
ฟิกซ์เจอร์ทดสอบ API
ใส่ JPEG Base64 เล็กในบอดี้คำขอ JSON สำหรับทดสอบจุดสิ้นสุดอัปโหลดรูป
เมื่อรูป Base64 ช่วย
• สำหรับแอสเซ็ตเล็กมากที่คำขอ HTTP หนึ่งครั้งมีต้นทุนมากกว่าโอเวอร์เฮดขนาดอินไลน์
• สำหรับต้นแบบ HTML ไฟล์เดียวออฟไลน์
• เมื่อโฮสติ้งภายนอกใช้ไม่ได้ในสภาพแวดล้อมที่ล็อก
Base64 ในงบประสิทธิภาพ
การอินไลน์ตัดรอบทริปแต่ป้องกันการแคชรูปแยกของเบราว์เซอร์ ใช้สำหรับไอคอนเล็กสำคัญเหนือส่วนพับอย่างประหยัด โหลดสื่อใหญ่แบบปกติ
คำถามที่พบบ่อย
ทำไม Base64 ใหญ่กว่าไฟล์?
การเข้ารหัสใช้ 4 อักขระต่อทุก 3 ไบต์ — โอเวอร์เฮดราว 33% บวกคำนำหน้า data URL
data URL คืออะไร?
รูปแบบ: data:image/png;base64,iVBORw0KG... — ประเภท MIME บวกเพย์โหลดที่เข้ารหัส
ขนาดสูงสุดสำหรับอีเมล?
ให้ต่ำกว่าการเติบโตข้อความรวม 10–20 KB ไคลเอนต์หลายตัวสำลักรูปอินไลน์ใหญ่
ถอดรหัสกลับเป็นไฟล์?
ใช้เครื่องมือเข้ารหัส/ถอดรหัส Base64 เพื่อกลับ ASCII เป็นไบนารีหากจำเป็น
SVG เป็น Base64?
เป็นไปได้สำหรับข้อความ SVG เล็ก รูปแบบแรสเตอร์พบบ่อยกว่าสำหรับ data URI