ตัวแปลง PNG เป็น Base64

PNG กับ Base64

PNG (Portable Network Graphics, ชนิด MIME image/png) เป็นรูปแบบภาพแรสเตอร์แบบไม่สูญเสียข้อมูลที่มีช่องอัลฟาเต็มรูปแบบ จึงเป็นตัวเลือกยอดนิยมสำหรับไอคอน โลโก้ แผนภาพ และภาพหน้าจอ ไฟล์ PNG ทุกไฟล์ขึ้นต้นด้วยลายเซ็นขนาด 8 ไบต์แบบเดียวกัน data URI ของ PNG ทุกรายการจึงขึ้นต้นเหมือนกัน คือ data:image/png;base64,iVBORw0KGgo...

Base64 ไม่ได้แตะต้องพิกเซลเลย เมื่อถอดรหัสสตริงจะได้ไฟล์ที่เหมือนเดิมทุกไบต์ ทั้งสีและพื้นที่โปร่งใส

การใช้งานที่เหมาะกับ data URI ของ PNG

• ไอคอนและโลโก้ขนาดเล็กในส่วนติดต่อผู้ใช้ที่ต้องมีพื้นหลังโปร่งใส
• ภาพหน้าจอในรายงาน HTML ที่สมบูรณ์ในตัวเอง รายงานข้อบกพร่อง หรือเอกสารที่ส่งออก
• แผนภูมิและคิวอาร์โค้ดที่สร้างบนเซิร์ฟเวอร์และส่งกลับมาในการตอบกลับแบบ JSON
• รูปภาพที่สร้างด้วย canvas.toDataURL() ซึ่งให้ผลลัพธ์เป็น data URI ของ PNG โดยค่าเริ่มต้นอยู่แล้ว

ภาพถ่ายเป็นอีกเรื่องหนึ่ง PNG จัดเก็บภาพถ่ายแบบไม่สูญเสียข้อมูลทำให้ไฟล์มีขนาดใหญ่ การใช้ JPEG หรือ WebP จะได้สตริงที่สั้นกว่ามาก

ลดขนาด PNG ก่อนเข้ารหัส

ทุกไบต์ที่ตัดออกจาก PNG ช่วยประหยัดอักขระ Base64 ได้ประมาณ 1.33 ตัว ควรนำไฟล์ไปผ่านเครื่องมือปรับขนาดไฟล์ให้เหมาะสมก่อน เช่น oxipng หรือ zopflipng (แบบไม่สูญเสียข้อมูล) หรือ pngquant (ลดจำนวนสีในจานสี) และควรตรวจดูขนาดพิกเซลด้วย ไอคอนที่ส่งออกมาใหญ่กว่าขนาดที่แสดงจริงสามเท่ามักย่อลงได้ด้วยตัวเลือก “ความกว้างสูงสุด”

การแปลงเป็น WebP ยังคงความโปร่งใสไว้และมักได้ไฟล์ที่เล็กกว่ามาก ส่วนการแปลงเป็น JPEG จะตัดความโปร่งใสออก พื้นที่โปร่งใสจึงกลายเป็นสีทึบ การเข้ารหัสใหม่เป็น PNG ในเบราว์เซอร์ไม่ได้ปรับการบีบอัดให้เหมาะสม ผลลัพธ์จึงอาจใหญ่กว่าไฟล์ต้นฉบับที่ปรับแต่งมาอย่างดี ควรเปรียบเทียบขนาดก่อนคัดลอก

การใช้เอาต์พุต

<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">

.icon-settings {
  background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}

# บรรทัดคำสั่ง: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.png