วิธีการทำงานของการแปลงรูปภาพเป็น Base64
การแปลงทั้งหมดทำงานในเบราว์เซอร์ของคุณโดยใช้ File API และฟังก์ชัน btoa ในตัว — ไม่มีการดาวน์โหลดไลบรารีโคเดก และเซิร์ฟเวอร์ไม่เห็นรูปภาพ ต่อไปนี้คือขั้นตอนของ pipeline ตั้งแต่ต้นจนจบ:
- คุณวางหรือเลือกรูปภาพ เบราว์เซอร์อ่านเป็น Blob จากดิสก์ในเครื่อง โดยไม่คัดลอกไบต์ไปยังเซิร์ฟเวอร์
- ไฟล์ถูกอ่านเป็นชิ้น 1 MB และไบต์ของแต่ละชิ้นจะถูกผนวกเข้ากับสตริงไบนารี การแบ่งชิ้นช่วยให้รูปภาพขนาดใหญ่ไม่ทำให้ call stack ของ JavaScript ล้น
- สตริงไบนารีถูกส่งไปยัง btoa ซึ่งแมปทุกสามไบต์กับอักขระ Base64 สี่ตัวจากตัวอักษร A–Z, a–z, 0–9, + และ /
- ประเภท MIME ของไฟล์ (image/png, image/jpeg เป็นต้น) ถูกอ่านจาก File object และเติมไว้เป็นคำนำหน้า data: เพื่อสร้าง URI ที่สมบูรณ์แบบ data:image/…;base64,…
- หน้าเว็บประกอบเอาต์พุตสี่รายการจาก URI นั้น — data URI แบบเต็ม, Base64 ดิบไม่มีคำนำหน้า, แท็ก
พร้อมวาง และสนิปเปต CSS background-image — แต่ละรายการมีปุ่มคัดลอก
ทำไมต้องเข้ารหัสรูปภาพเป็น data URI?
- การฝังโลโก้หรือไอคอนขนาดเล็กเป็น data URI จะขจัดการส่งคำขอเครือข่ายแยกต่างหาก ทำให้หน้าเว็บหรืออีเมลแสดงเฟรมแรกได้เร็วขึ้นเล็กน้อย
- หน้าเว็บหรือสไตล์ชีตที่มีรูปภาพแบบอินไลน์เป็นแบบ self-contained ใช้ได้แบบออฟไลน์ และคุณสามารถคัดลอกโดยไม่ต้องลากโฟลเดอร์ทรัพยากรไปด้วย
- ไคลเอนต์อีเมลจำนวนมากบล็อกรูปภาพระยะไกลที่เชื่อมโยงตามค่าเริ่มต้น ฝังโลโก้เป็น Base64 และจะแสดงทันทีที่เปิดข้อความ ไม่ต้องดึงข้อมูลระยะไกล
- การเข้ารหัสเกิดขึ้นในเบราว์เซอร์ทั้งหมด ดังนั้นรูปภาพที่ละเอียดอ่อนจึงไม่ถูกส่งไปยังเซิร์ฟเวอร์บุคคลที่สาม ครอบคลุมภาพหน้าจอ, การสแกน ID และแผนภาพภายใน
การใช้งานทั่วไปสำหรับรูปภาพ Base64
data URI ปรากฏในที่ที่รูปภาพเล็กพอที่คำขอแยกต่างหากมีต้นทุนมากกว่าขนาดที่พองขึ้น ~33% ที่ Base64 เพิ่ม สามรูปแบบที่พบบ่อยคือ:
- ไอคอน CSS แบบอินไลน์: สไปรท์หรือไอคอนขนาด 1–2 KB ที่ฝังในสไตล์ชีตเป็น background-image: url(data:…) เพื่อให้กฎนั้น self-contained อย่างสมบูรณ์
- ลายเซ็นอีเมลและจดหมายข่าว: โลโก้ที่ฝังเป็น
ที่มี data URI src จะแสดงผลแม้ไคลเอนต์บล็อกรูปภาพระยะไกล
- การฝังของเครื่องมือสร้าง: บันเดิลเลอร์อย่าง Webpack และ Vite ฝัง assets ที่ต่ำกว่าขีดจำกัดไบต์โดยอัตโนมัติ และเครื่องมือนี้ช่วยให้คุณดูตัวอย่างว่าเอาต์พุตนั้นมีหน้าตาอย่างไร
รูปภาพ Base64 มีหน้าตาอย่างไร?
ลองดู PNG โปร่งใสขนาด 1×1 ไบต์ดิบของมันมีเพียง 67 ไบต์ แต่เมื่อเข้ารหัสแล้วจะกลายเป็นสตริง iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= และ data URI แบบเต็มคือ data:image/png;base64,iVBORw0KGgo… สังเกตว่าแบบที่เข้ารหัสแล้วใหญ่กว่าต้นฉบับประมาณหนึ่งในสาม นั่นคือสิ่งที่ต้องแลกเพื่อให้ฝังข้อมูลไบนารีลงในข้อความได้อย่างปลอดภัย
รูปภาพของฉันถูกอัปโหลดไปที่ใดหรือไม่?
ไม่ การแปลงใช้ File API ของเบราว์เซอร์และฟังก์ชัน btoa แบบเนทีฟเพื่อเข้ารหัสรูปภาพบนอุปกรณ์ของคุณทั้งหมด คุณสามารถยืนยันด้วยตนเอง: เปิดเครื่องมือนักพัฒนาของเบราว์เซอร์, สลับไปที่แผง Network แล้วแปลงรูปภาพ — คำขอเดียวที่คุณจะเห็นคือการโหลดหน้าเว็บและโฆษณา ไม่มีรูปภาพใดถูกส่งไปยังเซิร์ฟเวอร์ ทำให้ปลอดภัยสำหรับภาพหน้าจอ, เอกสาร ID และแผนภาพภายใน
ทำไมเอาต์พุต Base64 จึงใหญ่กว่ารูปภาพต้นฉบับ?
Base64 แสดงข้อมูลไบนารีทุกสามไบต์ด้วยอักขระ ASCII สี่ตัว ดังนั้นข้อความที่เข้ารหัสแล้วจะใหญ่กว่าไฟล์ต้นฉบับประมาณ 33% การอ่านขนาด data URI บนหน้านี้แสดงความยาวที่พองขึ้นอย่างแม่นยำ นั่นคือสาเหตุที่ data URI เหมาะกับรูปภาพขนาดเล็กเท่านั้น — การฝังรูปภาพขนาด 2 MB จะทำให้ HTML หรือ CSS ของคุณพองขึ้นมากกว่าที่คำขอแยกต่างหากจะเสียค่าใช้จ่ายมาก กฎง่ายๆ คือฝังรูปภาพที่ต่ำกว่าประมาณ 4 KB และลิงก์ไปยังรูปภาพที่ใหญ่กว่า
ฉันสามารถแปลงรูปแบบรูปภาพใดได้บ้าง?
รูปแบบใดก็ตามที่เบราว์เซอร์ของคุณรู้จักเป็นรูปภาพจะทำงานได้ เพราะเครื่องมือนี้อ่านไบต์ดิบแทนที่จะถอดรหัสรูปภาพ ซึ่งครอบคลุม PNG, JPEG, GIF, WebP, SVG และ BMP ประเภท MIME ถูกอ่านตรงจากไฟล์ ดังนั้นคำนำหน้า data: จะตรงกับรูปแบบจริงเสมอ — JPEG สร้าง data:image/jpeg และ SVG สร้าง data:image/svg+xml SVG มีข้อสังเกตพิเศษ: มันเป็นข้อความอยู่แล้ว ดังนั้นสำหรับ SVG data URI แบบ URL-encoded มักจะเล็กกว่าเวอร์ชัน Base64 แม้ว่าเครื่องมือนี้จะส่งออกในรูปแบบ Base64 เพื่อความสม่ำเสมอ
วางรูปภาพ, คัดลอก data URI หรือสนิปเปตที่คุณต้องการ และวางลงใน HTML, CSS หรือเทมเพลตอีเมลของคุณ ทุกไบต์อยู่บนอุปกรณ์ของคุณ ไม่มีการอัปโหลด ไม่ต้องมีบัญชี ไม่มีการส่งคำขอไปยังเซิร์ฟเวอร์