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

การแปลงรูปภาพเป็น Base64 ทำงานอย่างไร

Base64 แปลงไบต์ของไฟล์รูปภาพให้เป็นข้อความธรรมดาที่ประกอบด้วยอักขระ 64 ตัว ทุก 3 ไบต์จะกลายเป็น 4 อักขระ ข้อความจึงมีขนาดใหญ่กว่าไฟล์ประมาณ 33% ส่วน data URI จะเพิ่มส่วนนำหน้าสั้น ๆ ที่ระบุชนิด MIME เช่น data:image/png;base64, ซึ่งทำให้เบราว์เซอร์แสดงข้อความนี้เป็นรูปภาพได้ในทุกตำแหน่งที่ต้องการ URL ของรูปภาพ

รูปภาพจะถูกอ่านและเข้ารหัสภายในเบราว์เซอร์ของคุณโดยไม่มีการอัปโหลด ภาพหน้าจอส่วนตัวและงานออกแบบที่ยังไม่เปิดตัวจึงอยู่บนอุปกรณ์ของคุณเท่านั้น

ควรคัดลอกเอาต์พุตแบบใด

• Data URI สำหรับแอตทริบิวต์ src, JavaScript และฟิลด์ JSON ที่ต้องการ URL
• Base64 ล้วน สำหรับ API ที่ต้องการเฉพาะไบต์ที่เข้ารหัสแล้ว ซึ่งมักมีฟิลด์แยกต่างหากสำหรับชนิด MIME หรือชื่อไฟล์
• แท็ก img ของ HTML สำหรับวางลงในหน้าเว็บหรือเทมเพลตได้ทันที
• CSS background-image สำหรับไอคอนและภาพตกแต่งในสไตล์ชีต
• Markdown สำหรับเอกสารและบันทึก โปรดทราบว่าตัวแสดงผลบางตัว รวมถึง GitHub ไม่แสดงรูปภาพที่เป็น data URI

รูปแบบที่รองรับโดยสังเขป

อักขระช่วงแรกของสตริง Base64 บอกชนิดไฟล์ได้ เพราะเป็นส่วนที่เข้ารหัสลายเซ็นของรูปแบบไฟล์ไว้

เมื่อใดที่การฝังรูปภาพแบบอินไลน์คุ้มค่า

data URI ช่วยประหยัดคำขอเครือข่ายได้หนึ่งครั้งและทำให้ไฟล์สมบูรณ์ในตัวเอง จึงเหมาะกับไอคอนและโลโก้ขนาดเล็กเพียงไม่กี่กิโลไบต์ รายงาน HTML แบบไฟล์เดียว ภาพตัวยึดตำแหน่งแบบเบลอขนาดจิ๋ว และรูปภาพที่ส่งภายใน JSON แต่ไม่เหมาะกับภาพถ่ายขนาดใหญ่ เพราะขนาดที่เพิ่มขึ้นอีกหนึ่งในสาม การที่เบราว์เซอร์แคชรูปภาพแยกต่างหากไม่ได้ และไฟล์ HTML หรือ CSS ที่หนักขึ้นซึ่งต้องดาวน์โหลดให้เสร็จก่อนจึงจะแสดงผลได้ มักมีต้นทุนสูงกว่าคำขอที่ประหยัดได้ หากเว็บไซต์ของคุณส่งส่วนหัว Content-Security-Policy ต้องเพิ่ม data: ใน img-src เพื่ออนุญาตรูปภาพแบบอินไลน์ด้วย