ทำตามตัวอย่างการใช้งานนี้ จากนั้นปรับการตั้งค่าเดียวกันกับรูปภาพของคุณเอง เปิด ตัวแปลงรูปภาพเป็น Base64.
เลือรูปภาพและดูตัวอย่างข้อมูลประจำตัว
เปิดตัวแปลงรูปภาพเป็น Base64 เลือรูปภาพหรือลองใช้ตัวอย่าง ตัวอย่างนี้ใช้ favicon-orbit.png ขนาด 512 × 512 พิกเซล ซึ่งมีขนาด 202,491 ไบต์ ตัวแก้ไขจะแสดงรูปภาพเหนือโค้ดเพื่อให้คุณยืนยันว่าคุณได้เลือกไฟล์ที่ต้องการแล้ว
PNG, JPG, WebP, GIF, BMP และ AVIF ได้รับการรองรับเมื่อเบราว์เซอร์ของคุณสามารถถอดรหัสเพื่อดูตัวอย่างได้ ขนาดไฟล์สูงสุดคือ 25 MB โดยมีขีดจำกัดที่ 60 ล้านพิกเซลและ 16,000 พิกเซลต่อด้าน มาร์กอัป SVG ไม่ได้รับการยอมรับโดยตัวแปลงแรสเตอร์นี้
เครื่องมือจะอ่านไบต์ของไฟล์ต้นฉบับ โดยไม่ใช้ตัวอย่างเพื่อสร้างรูปภาพใหม่ ปรับขนาด หรือบีบอัดใหม่ ดังนั้นข้อมูลเมตาที่มีอยู่และแอนิเมชัน GIF จึงถูกเก็บไว้ในข้อมูลที่เข้ารหัส
ก่อนเข้ารหัส ให้ใช้ Resize Image หรือ Image Compressor หากคุณต้องการไฟล์ที่มีขนาดเล็กลง Base64 ไม่ได้ลดขนาดรูปภาพด้วยตัวเอง
เลือกรูปแบบที่โปรเจกต์ของคุณคาดหวัง
เปิด Settings และเลือกรูปภาพ HTML ภายใต้ Code format สำหรับตัวอย่างนี้ ผลลัพธ์คือแท็ก img ที่มี data URL แบบ Base64 แอตทริบิวต์ alt จะว่างเปล่าในตอนแรก ให้เขียนข้อความทางเลือกที่มีประโยชน์เมื่อรูปภาพสื่อสารข้อมูล
Data URL ขึ้นต้นด้วยคำนำหน้า เช่น data:image/png;base64 ตามด้วยข้อมูลที่เข้ารหัส Plain Base64 มีเฉพาะข้อมูลเท่านั้น พื้นหลัง CSS จะห่อหุ้ม data URL ไว้ในการประกาศ background-image รูปแบบเหล่านี้ให้บริการปลายทางที่แตกต่างกัน ดังนั้นให้คัดลอกรูปแบบที่แอปพลิเคชันของคุณร้องขอแทนที่จะเปลี่ยนเฉพาะชื่อไฟล์
แผงโค้ดจะอัปเดตทันทีหลังจากที่คุณเปลี่ยน Code format ไอคอนคัดลอกจะคัดลอกรูปแบบปัจจุบันและแสดงการยืนยันว่าคัดลอกแล้ว เมื่อการเข้าถึงคลิปบอร์ดถูกบล็อก โค้ดจะถูกเลือกไว้เพื่อให้คุณคัดลอกด้วยตนเอง
แท็ก HTML img ที่สมบูรณ์ไม่เหมือนกับ data URL ให้ใช้เฉพาะค่า src เมื่อฟิลด์ต้องการ URL
ตัวอย่างในคู่มือนี้
ลองใช้ตัวอย่าง: favicon-orbit.png, 512 × 512 px, 202,491 ไบต์ เลือกรูปภาพ HTML ภายใต้รูปแบบรหัส เลือก Start และดาวน์โหลด favicon-orbit-base64.txt
- ต้นฉบับ PNG
- 512 × 512 px · 202,491 ไบต์
- เอาต์พุตข้อความ HTML
- 270,029 ไบต์
- การเข้ารหัส
- ไบต์ต้นฉบับ; ไม่มีการบีบอัดใหม่
ดาวน์โหลดโค้ดและทำความเข้าใจขนาดของมัน
เลือก Start แล้วเลือก Download ตัวอย่างจะบันทึก favicon-orbit-base64.txt ที่มีโค้ดรูปภาพ HTML ขนาด 270,029 ไบต์ของมันจะใหญ่กว่าต้นฉบับ 202,491 ไบต์ การเปรียบเทียบในบทความแสดงจุดเริ่มต้นของข้อความที่ดาวน์โหลดมา ซึ่งถูกย่อไว้เพื่อให้อ่านง่ายขึ้นเท่านั้น
Base64 โดยทั่วไปจะแปลงไบต์ต้นฉบับสามไบต์เป็นอักขระข้อความสี่ตัว เพิ่มขนาดขึ้นประมาณหนึ่งในสามก่อนรวมส่วนห่อหุ้มขนาดเล็ก การฝังไอคอนขนาดเล็กช่วยให้เอกสารสมบูรณ์ในตัวเองได้ แต่การวางสตริงรูปภาพขนาดใหญ่ไว้ใน HTML หรือ CSS จะทำให้เอกสารนั้นใหญ่ขึ้นและป้องกันไม่ให้รูปภาพถูกแคชเป็นไฟล์แยกต่างหาก
การเข้ารหัสไม่ใช่การเข้ารหัสลับ ใครก็ตามที่มีสตริง Base64 ที่สมบูรณ์สามารถกู้คืนรูปภาพต้นฉบับได้ โปรดดูแลโค้ดนี้เช่นเดียวกับไฟล์ต้นฉบับหากมีข้อมูลส่วนตัว
ข้อความที่ตัดตอนมาในบทความนี้มีไว้เพื่ออธิบายเท่านั้น ให้ใช้ TXT ที่ดาวน์โหลดมาฉบับสมบูรณ์หรือคัดลอกโค้ดเต็มจากเครื่องมือ
คำถามที่พบบ่อย
การเข้ารหัสจะทำให้คุณภาพของรูปภาพลดลงหรือไม่?
ไม่ การเข้ารหัสจะรักษาไบต์ต้นฉบับไว้ โดยไม่มีการปรับขนาด บีบอัด หรือวาดรูปภาพใหม่
ทำไมสตริง Base64 ถึงมีขนาดใหญ่กว่ารูปภาพ?
Base64 ใช้ตัวอักษร 4 ตัวแทนไบต์อินพุต 3 ไบต์ ดังนั้นโดยปกติแล้วจะเพิ่มขนาดขึ้นประมาณหนึ่งในสามก่อนที่จะใส่ Wrapper หรือคำนำหน้า
ภาพเคลื่อนไหว GIF จะถูกเก็บรักษาไว้หรือไม่?
การเข้ารหัสจะรักษาไบต์ GIF ดั้งเดิมไว้ รวมถึงภาพเคลื่อนไหวด้วย ตัวอย่างอาจแสดงเพียงเฟรมเดียวในขณะที่ข้อมูลที่เข้ารหัสยังคงเก็บเฟรมทั้งหมดไว้
Base64 ปลอดภัยสำหรับรูปภาพที่เป็นความลับหรือไม่?
Base64 ไม่ใช่การเข้ารหัสลับ โปรดเก็บสตริงไว้เป็นส่วนตัวหากรูปภาพต้นฉบับเป็นความลับ ตัวแปลงจะประมวลผลข้อมูลภายในเบราว์เซอร์ของคุณเอง
เปลี่ยนรูปภาพที่ใช่ให้เป็นโค้ดที่เหมาะสม
ลองใช้ตัวอย่างหรือใช้ไฟล์ของคุณเอง และตรวจสอบผลลัพธ์ก่อนแชร์
