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 กลับเป็นไฟล์ที่ดาวน์โหลดได้

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

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

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

เครื่องสร้างกระดาษเส้นบรรทัด

สร้างกระดาษเส้นบรรทัดพร้อมพิมพ์ได้ฟรี เลือกเส้นแบบวิทยาลัย กว้าง หรือแคบ ตั้งระยะห่างบรรทัดเป็นมิลลิเมตร ขนาดกระดาษ และเส้นขอบ แล้วพิมพ์หรือดาวน์โหลดเป็น SVG

เครื่องมือสร้างธง

ออกแบบธงแบบกำหนดเองอัตราส่วน 3:2 อย่างเรียบง่ายในเบราว์เซอร์ ด้วยเลย์เอาต์ 6 แบบ สี ข้อความ และสัญลักษณ์ ดาวน์โหลด SVG หรือ PNG หรือเปิดกล่องโต้ตอบการพิมพ์ของเบราว์เซอร์ได้

เครื่องมือสร้างคอนแทคชีต

จัดภาพเป็นคอนแทคชีต A4 หรือ Letter พร้อมคำบรรยาย การครอป และตัวอย่างหน้า แล้วดาวน์โหลด JPEG หรือ PDF

ครอปตามขนาดโซเชียล

ครอปรูปเดียวให้ได้ 10 ขนาดโซเชียลมีเดียสำเร็จรูปในครั้งเดียว: Instagram, X, Facebook, LinkedIn, YouTube และ Pinterest เลือกแบบเต็มกรอบหรือพอดี ปรับคุณภาพ แล้วดาวน์โหลดแต่ละขนาดหรือเป็นไฟล์ zip ทุกอย่างเกิดขึ้นในเบราว์เซอร์ของคุณ

ตัวแปลง ARW เป็น JPG

แปลงภาพถ่าย Sony ARW RAW เป็น JPG รับไฟล์ JPEG ที่แชร์ได้และเข้ากันได้ทั่วโลกจากไฟล์ RAW ของกล้องโดยไม่ต้องเปิด Lightroom

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