UltKit
รูปภาพ11
PDF13
เอกสารและข้อมูล7
วิดีโอ6
เสียง4
เครื่องมืออื่น ๆ22

แปลงรูปเป็น Base64

เปลี่ยนไฟล์รูปภาพให้เป็นข้อความหนึ่งบรรทัดที่วางลงใน HTML, CSS, คำขอ JSON หรือไฟล์ Markdown ได้ทันที โดยมีคำนำหน้า Data URI ใส่ไว้ให้แล้ว จึงใช้งานได้ทันทีที่วาง

แปลงไฟล์ข้อมูล

หรือลากไฟล์ CSV, TSV, TXT … มาวางที่นี่ ·

สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที

ผลลัพธ์

ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที

วิธีใช้เครื่องมือนี้

  1. 1

    เพิ่มรูปภาพ

    วางไฟล์ PNG, JPG, GIF, WebP หรือ SVG ลงในพื้นที่อัปโหลด ได้ครั้งละไม่เกิน 20 ไฟล์ ไฟล์ละไม่เกิน 95 MB

  2. 2

    เลือกใส่หรือตัดคำนำหน้า

    ตัวเลือก คำนำหน้า Data URI เปิดอยู่ ผลลัพธ์จึงขึ้นต้นด้วย data:image/png;base64, หรือชนิดที่ตรงกับไฟล์ หากต้องการเพียงสตริง Base64 เปล่า ๆ สำหรับ API ให้ปิดตัวเลือกนี้ใน การตั้งค่าขั้นสูง

  3. 3

    แปลงแล้วคัดลอก

    กด แปลงเป็น Base64 text แล้วดาวน์โหลดไฟล์ .txt ของแต่ละรูป พร้อมวางลงในโค้ดของคุณ

อัปโหลดรูปแล้วกด แปลงเป็น Base64 text คุณจะได้ไฟล์ที่เข้ารหัสเป็นตัวอักษรธรรมดา ขึ้นต้นด้วย data:image/…;base64, นำไปใส่ใน img src หรือ CSS url() ได้ทันที ภาพไม่มีการเปลี่ยนแปลงใด ๆ

รูปภาพแบบ Base64 มีประโยชน์ในกรณีใดบ้าง

Base64 กำหนดไว้ใน RFC 4648 (2006) โดยแปลงข้อมูลไบนารีทุก 3 ไบต์เป็นตัวอักษร 4 ตัวจากชุดอักขระ 64 ตัว คือ A–Z, a–z, 0–9, + และ / ผลลัพธ์ส่งผ่านช่องทางใดก็ได้ที่ออกแบบมาสำหรับข้อความ ส่วนสคีม data URI ซึ่ง Larry Masinter เขียนไว้เป็น RFC 2397 ในปี 1998 ทำให้เบราว์เซอร์ถือข้อความนั้นเป็นไฟล์ได้

นักพัฒนาฝั่งหน้าเว็บฝังไอคอนเล็ก ๆ ตัวหมุนโหลด และรูปตัวอย่างไว้ในโค้ด เพื่อให้หน้าเว็บแสดงผลได้โดยไม่ต้องร้องขอเพิ่ม นักพัฒนาฝั่งเซิร์ฟเวอร์ส่งรูปภายใน JSON เพราะ API จำนวนมาก รวมถึงบริการวิเคราะห์ภาพและ OCR รับรูปเป็นฟิลด์ Base64 ผู้ทดสอบเก็บข้อมูลทดสอบไว้ในซอร์สโค้ด และผู้ที่ทำรายงาน HTML แบบไฟล์เดียวหรือโน้ต Markdown ก็ฝังภาพหน้าจอเพื่อให้ไฟล์สมบูรณ์ในตัวเองเมื่อส่งอีเมลหรือเก็บถาวร

ผลลัพธ์ Base64 มีหน้าตาอย่างไร

PNG โปร่งใสขนาด 1 × 1 (68 ไบต์) เป็น data URI ภายในแท็ก img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="ภาพตัวอย่างขนาด 1×1 พิกเซล">

ไฟล์ไอคอน PNG

24 KB

ชุดไอคอนแถบเครื่องมือทั่วไป 96 × 96 px

ขนาดใหญ่ขึ้น 33% คุณภาพไม่เปลี่ยน

ข้อความ Base64

32 KB

3 ไบต์ต่อ 4 ตัวอักษร บวกคำนำหน้า

ANY I

รูปภาพทุกประเภท

เครื่องมือนี้รองรับรูปแบบภาพทั่วไป รวมถึง JPG, PNG, WebP, HEIC, GIF, BMP และ TIFF ระบบจะตรวจหารูปแบบจากไฟล์โดยอัตโนมัติ คุณจึงไม่จำเป็นต้องทราบว่าภาพของคุณเป็นไฟล์ประเภทใด

ตัวแปลงไฟล์ Any image

BASE64

ข้อความเข้ารหัส Base64

Base64 คือการเข้ารหัสตามข้อกำหนด RFC 4648 ที่แปลงข้อมูลไบนารีใด ๆ ให้เป็นสตริงจากอักขระข้อความที่ปลอดภัย 64 ตัว ใช้ฝังรูปภาพใน HTML และ CSS ในรูปแบบ data URI แนบไฟล์ในอีเมล และส่งข้อมูลไบนารีใน JSON หรือ XML การเข้ารหัสย้อนกลับได้ทั้งหมดแต่ทำให้ข้อมูลใหญ่ขึ้นประมาณ 33% Base64 ไม่ใช่การเข้ารหัสลับและไม่มีความปลอดภัยใด ๆ ใครก็ถอดรหัสได้

การบีบอัด
แบบไม่สูญเสียข้อมูล
พื้นหลังโปร่งใส
–
ภาพเคลื่อนไหว
–
เปิดตัว
–
ตัวแปลงไฟล์ BASE64

รูปภาพถูกแปลงเป็นข้อความ Base64 เมื่อต้องส่งไปในสิ่งที่รองรับเฉพาะข้อความ เช่น ไฟล์ HTML หรือ CSS ที่ไม่ต้องร้องขอไฟล์แยก ฟิลด์ JSON ของการเรียก API ข้อมูลทดสอบ หรือรายงานแบบไฟล์เดียว

เมื่อใดที่การฝังรูปลงในโค้ดช่วยให้หน้าเว็บดีขึ้น และเมื่อใดที่ส่งผลเสีย

การฝังรูปช่วยลดการร้องขอหนึ่งครั้ง ซึ่งสำคัญมากในยุค HTTP/1.1 ที่เบราว์เซอร์เปิดการเชื่อมต่อต่อเว็บไซต์ได้เพียงไม่กี่ช่อง เมื่อมี multiplexing ของ HTTP/2 และ HTTP/3 การร้องขอเล็ก ๆ เพิ่มจึงมีต้นทุนต่ำ ประโยชน์จึงลดลงขณะที่ข้อเสียยังอยู่ คือรูปที่เข้ารหัสแล้วแคชแยกไม่ได้ ต้องดาวน์โหลดใหม่ทุกครั้งที่ HTML หรือ CSS เปลี่ยน และทำให้การแยกวิเคราะห์ไฟล์ที่ฝังอยู่ช้าลง

หลักที่เหมาะสมคือฝังเฉพาะรูปขนาดไม่กี่กิโลไบต์ที่ปรากฏในทุกหน้า เช่น โลโก้หรือสไปรต์ไอคอน ส่วนที่เหลือให้ใช้เป็นไฟล์ รูปถ่ายแทบไม่เหมาะกับการฝัง หากสิ่งที่คุณต้องการจริง ๆ คือเปลี่ยนชนิดไฟล์ ไม่ใช่ข้อความ ให้ใช้ แปลงไฟล์รูปภาพ

จุดแข็งของรูป Base64

  • ไฟล์ HTML, CSS หรือ JSON เดียวที่สมบูรณ์ในตัว
  • ไม่ต้องร้องขอเพิ่มสำหรับไอคอนขนาดเล็ก
  • ใช้ใน JSON, XML และฟอร์แมตข้อความอื่นได้อย่างปลอดภัย
  • ไม่สูญเสียข้อมูลและย้อนกลับได้

ข้อเสียของรูป Base64

  • ใหญ่กว่าไฟล์ไบนารีประมาณ 33%
  • เบราว์เซอร์ไม่แคชแยกต่างหาก
  • โปรแกรมอีเมลจำนวนมากบล็อกไม่ให้แสดงเป็นรูป
  • ตรวจทานในส่วนต่างของโค้ดได้ยาก

คำถามเกี่ยวกับการแปลงรูปเป็น Base64

Base64 กับ Data URI ต่างกันอย่างไร

Base64 คือตัวอักษรที่เข้ารหัสแล้วเท่านั้น ส่วน data URI จะห่อตัวอักษรเหล่านั้นด้วยสคีมและชนิดไฟล์ คือ data:image/png;base64, ตามด้วยตัวอักษร เพื่อให้เบราว์เซอร์รู้วิธีถอดรหัสและแสดงผล HTML และ CSS ต้องใช้ data URI แบบเต็ม ส่วน API แบบ JSON ส่วนใหญ่ต้องการเฉพาะส่วน Base64 เปล่า ๆ

รูปที่แปลงเป็น Base64 จะใหญ่ขึ้นเท่าไร

Base64 เขียนข้อมูล 3 ไบต์เป็นตัวอักษร 4 ตัว ข้อความจึงใหญ่กว่าไฟล์ประมาณหนึ่งในสาม บวกคำนำหน้าสั้น ๆ อีกเล็กน้อย ไฟล์ PNG ขนาด 30 KB จะกลายเป็นข้อความราว 40 KB หาก HTML หรือ CSS ถูกส่งแบบบีบอัด gzip ส่วนที่เพิ่มขึ้นนี้จะลดลงได้บางส่วนระหว่างการส่ง

ใช้รูป Base64 ในลายเซ็นอีเมลได้หรือไม่

ไม่น่าเชื่อถือ Gmail ไม่แสดงรูปแบบ data URI และโปรแกรมอีเมลบนเดสก์ท็อปหลายตัวก็ตัดทิ้งเช่นกัน ผู้รับจะเห็นเป็นไอคอนรูปเสีย ควรฝากรูปไว้บนเว็บเซิร์ฟเวอร์หรือแนบไฟล์ไปกับอีเมล และใช้ Base64 กับหน้าเว็บและแอปเท่านั้น

ไอคอน SVG ควรแปลงเป็น Base64 หรือไม่

ทำได้ แต่ SVG เป็นข้อความอยู่แล้ว การเข้ารหัสมาร์กอัปแบบ URL แทน Base64 มักได้ data URI ที่สั้นกว่าและยังอ่านได้ง่าย หากเป็นไฟล์ที่ใหญ่กว่าไอคอนเล็ก ๆ ควรใช้ไฟล์ SVG แยกต่างหากที่เบราว์เซอร์แคชได้จะดีกว่า

แปลงข้อความ Base64 กลับเป็นรูปภาพได้หรือไม่

ได้ การเข้ารหัสไม่สูญเสียข้อมูลและย้อนกลับได้เต็มที่ การถอดรหัสจะได้ไบต์ต้นฉบับเหมือนเดิมทุกประการ ทุกภาษาโปรแกรมมีตัวถอดรหัสให้ และการวาง data URI แบบสมบูรณ์ลงในแถบที่อยู่ของเบราว์เซอร์ก็จะแสดงรูปได้

การแปลงเป็น Base64 ทำให้คุณภาพของภาพเปลี่ยนหรือไม่

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