Softonic

ตัวเข้ารหัสรูปภาพ Base64

ขั้นตอน 1 / 3 วางรูปภาพของคุณที่นี่

กำลังประมวลผล...

การฝังภาพเล็กแบบ Base64 data URI อาจลด HTTP request ได้หนึ่งครั้งและทำให้ทรัพยากรเดินทางไปพร้อม HTML หรือ CSS ตัวเข้ารหัสนี้รับไฟล์ PNG, JPEG, GIF, WebP และ SVG ที่รองรับขนาดไม่เกิน 5 MiB ภาพราสเตอร์ที่ถอดรหัสแล้วต้องมีความยาวแต่ละด้านไม่เกิน 16,384 พิกเซล และมีจำนวนรวมไม่เกิน 33,554,432 พิกเซล ตัวเข้ารหัสตรวจสอบการถอดรหัสภาพราสเตอร์ในเบราว์เซอร์ และตรวจเฉพาะโครงสร้าง UTF-8 ของ SVG ก่อนสร้างผลลัพธ์ Base64, CSS, HTML หรือ JSON ควรทดสอบกับระบบปลายทาง และถือว่า SVG ที่ไม่น่าเชื่อถือยังเป็นเนื้อหาแบบแอ็กทีฟแม้เข้ารหัสแล้ว

วิธีเข้ารหัสภาพ

  1. 1

    วางภาพของคุณ

    เลือกไฟล์ PNG, JPG, GIF, WebP หรือ SVG ขนาดไม่เกิน 5 MiB ภาพราสเตอร์ต้องมีความยาวแต่ละด้านไม่เกิน 16,384 พิกเซล และมีจำนวนรวมไม่เกิน 33,554,432 พิกเซล ข้อความที่เข้ารหัสต้องมีขนาดต่ำกว่า 7 MiB

  2. 2

    การเข้ารหัสทำงานในเบราว์เซอร์

    อ่านไบต์ของภาพ เข้ารหัส Base64 และเติมส่วนหัว `data:` URI ที่ถูกต้อง

  3. 3

    เลือกรูปแบบผลลัพธ์

    Base64 ดิบ, กฎ CSS `background-image`, แท็ก HTML `<img>` หรือสตริงที่ปลอดภัยสำหรับ JSON

  4. 4

    คัดลอกผลลัพธ์

    วางหลังจากตรวจสอบการรองรับ data URI ขีดจำกัดขนาด และความปลอดภัยของเนื้อหาในระบบปลายทาง

เมื่อใดที่การฝังภาพแบบ inline คุ้มค่า

ภาพที่เหมาะกับการฝัง inline:

  • ไอคอนต่ำกว่า 2 KB, ประหยัด HTTP request หนึ่งครั้งโดยมีค่าใช้จ่ายเพิ่มแทบไม่มี
  • เทมเพลตอีเมล - โปรแกรมอีเมลรองรับ data URI ไม่สม่ำเสมอ ควรทดสอบกับโปรแกรมเป้าหมายและใช้ภาพแบบ CID หรือภาพที่โฮสต์ไว้เมื่อจำเป็น
  • ภาพตัวอย่างส่วนหัว (LQIP), ฝังเวอร์ชันเบลอคุณภาพต่ำไว้ก่อน แล้วค่อยโหลดภาพเต็มภายหลัง
  • SVG ที่ใช้เพียงครั้งเดียว, data URI แบบเข้ารหัสเปอร์เซ็นต์อาจสั้นกว่า Base64 หากเข้ารหัสอักขระสงวนอย่างถูกต้อง และยังต้องถือว่า SVG ที่ไม่น่าเชื่อถือเป็นเนื้อหาแบบแอ็กทีฟ

ภาพที่ไม่เหมาะ:

  • ภาพขนาดใหญ่, การขยาย 33% สำหรับภาพ 500 KB คือการสูญเปล่า 166 KB
  • ภาพที่ใช้ซ้ำในหลายหน้า, การฝัง inline ทำให้แคชของเบราว์เซอร์ข้ามเส้นทางใช้ไม่ได้
  • CSS วิกฤต, การฝังภาพหนักแบบ inline ทำให้เส้นทางวิกฤตบวมขึ้น

ขนาดที่คาดได้

ขนาดภาพ ขนาดสตริง Base64
500 ไบต์ ~680 อักขระ
2 KB ~2.7 KB
20 KB ~27 KB
200 KB ~270 KB

รูปแบบ Data URI

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
  • สคีม data:
  • ชนิด MIME
  • ตัวบ่งชี้ ;base64,
  • ไบต์ที่เข้ารหัสแล้ว

SVG เป็นกรณีพิเศษ

SVG เป็นข้อความ แต่ขนาดเมื่อเทียบกับ Base64 ขึ้นอยู่กับเนื้อหาและจำนวนอักขระที่ต้องเข้ารหัสเปอร์เซ็นต์ สำหรับรูปแบบที่ไม่ใช้ Base64 ให้ใช้ data:image/svg+xml, และเข้ารหัสอักขระสงวนอย่างถูกต้อง พารามิเตอร์ ;utf8 ที่พบได้ทั่วไปไม่ใช่พารามิเตอร์มาตรฐานและใช้แทนการเข้ารหัสเปอร์เซ็นต์ไม่ได้ เครื่องมือนี้ไม่แสดงตัวอย่าง SVG และตรวจเฉพาะโครงสร้าง UTF-8 ดังนั้น SVG ที่ไม่น่าเชื่อถือยังเป็นเนื้อหาแบบแอ็กทีฟ และ Base64 ไม่ใช่การทำให้ปลอดภัย

คำถามที่พบบ่อย

Base64 เพิ่มขนาดข้อมูลไบนารีประมาณหนึ่งในสามก่อนนับส่วนห่อ data URI และการบีบอัดระหว่างส่ง ไม่มีเกณฑ์ขนาดตายตัวที่ได้เปรียบเสมอ ควรเปรียบเทียบจำนวน request แคช การบีบอัด และการนำกลับมาใช้ แล้ววัดผลกับเว็บไซต์จริง

data URI ไม่ได้ให้ประโยชน์ด้าน SEO โดยอัตโนมัติ เครื่องมือค้นหาพิจารณา HTML โดยรอบ แต่ภาพพื้นหลัง CSS ไม่มีข้อความทางเลือกแบบแอตทริบิวต์ alt หากภาพสื่อความหมายให้ใช้ <img> พร้อมข้อความทางเลือกที่เหมาะสม และประเมินประสิทธิภาพแยกต่างหาก

ไม่ ตัวเข้ารหัสอ่านไฟล์ในเครื่องด้วย FileReader API และสร้างสตริง Base64 ภายในเบราว์เซอร์ ไม่มีอะไรออกจากเครื่องของคุณ

ได้ ใช้เครื่องมือ Base64 to Image เพื่อเปลี่ยน data:image/... URI กลับเป็นไฟล์ที่ดาวน์โหลดได้

เครื่องมือที่เกี่ยวข้อง

สร้างกระดาษบรรทัดห้าเส้น

สร้างกระดาษบรรทัดห้าเส้นสำหรับพิมพ์ ทั้งบรรทัดเปล่า กุญแจซอลหรือกุญแจฟา บรรทัดคู่สำหรับเปียโน หรือแท็บกีตาร์ เลือกจำนวน ระยะห่างเส้น A4 หรือ Letter และขอบกระดาษ แล้วดาวน์โหลด PDF หรือ SVG

เครื่องมือทำภาพโมเสกจากตัวต่อ LEGO

เปลี่ยนรูปถ่ายเป็นแบบโมเสกจัตุรัส 16, 32, 48 หรือ 64 ช่องต่อด้าน ดูสีโดยประมาณ นับแผ่นตัวต่อ 1×1 และดาวน์โหลดคู่มือประกอบที่มีหมายเลขกำกับ

ตัวเลือกสี Material Design

สำรวจพาเลตสีของ Material Design คัดลอกเฉดสีใดก็ได้ (ตั้งแต่ 50 ถึง A700) ในรูปแบบ HEX, RGB หรือ HSL เพียงแตะครั้งเดียว

ปรับขนาด PNG

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

โปรแกรมแปลงรูปแบบภาพ

แปลงรูปภาพเป็น JPG, PNG หรือ WebP ได้ทันทีในเบราว์เซอร์ พร้อมควบคุมคุณภาพสำหรับรูปแบบบีบอัดและรักษาความโปร่งใสใน PNG และ WebP

เครื่องอ่านบาร์โค้ด

เลือกรูปภาพบาร์โค้ดเพื่ออ่านค่าที่เข้ารหัสและชนิดของบาร์โค้ด รองรับ EAN-13, UPC-A และ Code 128 พร้อมผลตรวจเลขตรวจสอบของ EAN และ UPC

เครื่องมือนี้มีให้บริการในภาษาอื่น