ตัวแปลงและดูภาพจาก Base64 | แปลง Base64 เป็นภาพ

ถอดรหัสและดูตัวอย่างสตริงภาพที่เข้ารหัสด้วย base64 ได้ทันที รองรับ JPEG, PNG, GIF และรูปแบบทั่วไปอื่น ๆ พร้อมการจัดการข้อผิดพลาดสำหรับข้อมูลที่ไม่ถูกต้อง

ตัวถอดรหัสและดูภาพ Base64

วางสตริงภาพที่เข้ารหัสด้วย base64 และถอดรหัสเพื่อดูภาพ.

ตัวอย่างภาพ

ไม่มีภาพให้แสดง วางสตริง base64 เพื่อดูการถอดรหัสโดยอัตโนมัติ.

รองรับ JPEG, PNG, GIF และรูปแบบภาพทั่วไปอื่นๆ.

คำแนะนำ

1. วางสตริงภาพที่เข้ารหัสด้วย base64 ในพื้นที่ข้อความด้านบน.

2. ภาพจะถูกถอดรหัสโดยอัตโนมัติขณะที่คุณพิมพ์ หรือคลิกปุ่ม 'ถอดรหัสภาพ'.

3. ภาพที่ถอดรหัสจะปรากฏในพื้นที่ตัวอย่างด้านล่าง.

หมายเหตุ: สตริงควรเริ่มต้นด้วย 'data:image/' เพื่อผลลัพธ์ที่ดีที่สุด แต่เครื่องมือจะพยายามถอดรหัสสตริงที่ไม่มีคำนำหน้านี้ด้วย.

📚

เอกสารประกอบการใช้งาน

Base64 รูปภาพ ตัวถอดรหัสและผู้ดู

บทนำ

Base64 เป็นโครงการเข้ารหัสจากไบนารีเป็นข้อความที่แสดงข้อมูลไบนารีในรูปแบบสตริง ASCII มักใช้ในการฝังข้อมูลรูปภาพโดยตรงภายใน HTML, CSS, JavaScript, JSON และรูปแบบข้อความอื่น ๆ ที่ไม่สามารถรวมข้อมูลไบนารีได้โดยตรง เครื่องมือนี้ช่วยให้คุณถอดรหัสสตริงรูปภาพที่เข้ารหัสด้วย base64 และดูรูปภาพที่ได้ในเบราว์เซอร์ของคุณโดยตรง

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

เครื่องมือ Base64 รูปภาพของเรามีอินเทอร์เฟซที่เรียบง่ายที่คุณสามารถวางสตริงรูปภาพที่เข้ารหัสด้วย base64 และเห็นรูปภาพที่ถอดรหัสได้ทันที รองรับรูปแบบรูปภาพทั่วไปทั้งหมดรวมถึง JPEG, PNG, GIF, WebP และ SVG และสามารถจัดการทั้งรูปแบบ URL ข้อมูล (ด้วยคำนำหน้า data:image/...) และสตริง base64 ดิบ

รายละเอียดทางเทคนิค

รูปแบบการเข้ารหัส Base64

การเข้ารหัส Base64 จะแปลงข้อมูลไบนารีเป็นชุดของอักขระ ASCII 64 ตัว (A-Z, a-z, 0-9, +, และ /) โดยใช้ = สำหรับการเติม สำหรับรูปภาพบนเว็บ ข้อมูล base64 มักจะจัดรูปแบบเป็น URL ข้อมูลด้วยโครงสร้างดังต่อไปนี้:

1data:[<media type>][;base64],<data>
2

ตัวอย่างเช่น รูปภาพ PNG ที่เข้ารหัสด้วย base64 อาจมีลักษณะดังนี้:

1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2

ส่วนประกอบของรูปแบบนี้คือ:

  • data: - สคีมาของ URL
  • image/png - ชนิด MIME ของข้อมูล
  • ;base64 - วิธีการเข้ารหัส
  • , - ตัวแบ่งระหว่างส่วนหัวและข้อมูล
  • ข้อมูลที่เข้ารหัส base64 จริง

กระบวนการถอดรหัส

เมื่อถอดรหัสสตริงรูปภาพ base64 จะมีขั้นตอนดังนี้:

  1. สตริงจะถูกวิเคราะห์เพื่อตรวจสอบว่ามีคำนำหน้า URL ข้อมูลหรือไม่
  2. หากมีคำนำหน้าอยู่ ชนิด MIME จะถูกดึงออกมาเพื่อตัดสินใจเกี่ยวกับรูปแบบรูปภาพ
  3. ส่วนข้อมูล base64 จะถูกแยกออกและถอดรหัสเป็นข้อมูลไบนารี
  4. ข้อมูลไบนารีจะถูกแปลงเป็น Blob หรือ URL ของวัตถุที่สามารถแสดงเป็นรูปภาพได้

หากข้อมูลนำเข้ามิได้รวมคำนำหน้า URL ข้อมูล ตัวถอดรหัสจะพยายามจัดการกับข้อมูลนั้นเป็นข้อมูล base64 ดิบและอนุมานประเภทของรูปภาพจากส่วนหัวไบนารีที่ถอดรหัสหรือใช้ PNG เป็นค่าเริ่มต้น

รูปแบบรูปภาพที่รองรับ

เครื่องมือนี้รองรับรูปแบบรูปภาพทั่วไปทั้งหมดบนเว็บ:

รูปแบบชนิด MIMEกรณีการใช้งานทั่วไป
JPEGimage/jpegรูปภาพ, รูปภาพที่ซับซ้อนที่มีสีหลายสี
PNGimage/pngรูปภาพที่ต้องการความโปร่งใส, การจับภาพหน้าจอ, กราฟิก
GIFimage/gifการเคลื่อนไหวที่ง่าย, รูปภาพที่มีสีจำกัด
WebPimage/webpรูปแบบทันสมัยที่มีการบีบอัดดีกว่ารูปแบบ JPEG/PNG
SVGimage/svg+xmlกราฟิกเวกเตอร์, ไอคอนและภาพประกอบที่ปรับขนาดได้

กรณีการใช้งาน

รูปภาพที่เข้ารหัสด้วย base64 มีการใช้งานที่หลากหลายในการพัฒนาเว็บและอื่น ๆ:

  1. ฝังรูปภาพใน HTML/CSS/JS: ลดคำขอ HTTP โดยการรวมรูปภาพไว้ในโค้ดของคุณ ซึ่งสามารถปรับปรุงเวลาโหลดหน้าเว็บสำหรับรูปภาพขนาดเล็ก

  2. เทมเพลตอีเมล: ทำให้แน่ใจว่ารูปภาพแสดงผลอย่างถูกต้องในไคลเอนต์อีเมลที่บล็อกรูปภาพภายนอกตามค่าเริ่มต้น

  3. แอปพลิเคชันไฟล์เดียว: สร้างแอปพลิเคชัน HTML ที่มีความเป็นอิสระซึ่งทรัพยากรทั้งหมดถูกฝังอยู่ในไฟล์เดียว

  4. การตอบสนอง API: รวมข้อมูลรูปภาพโดยตรงใน JSON โดยไม่ต้องการจุดสิ้นสุดรูปภาพแยกต่างหาก

  5. Data URIs ใน CSS: ฝังไอคอนและรูปภาพพื้นหลังขนาดเล็กโดยตรงในไฟล์ CSS

  6. การจัดการ Canvas: ช่วยในการบันทึกและถ่ายโอนข้อมูลรูปภาพจาก canvas

  7. แอปพลิเคชันออฟไลน์: เก็บรูปภาพเป็นสตริงข้อความใน localStorage หรือ IndexedDB

การพิจารณาด้านประสิทธิภาพ

แม้ว่าการเข้ารหัส base64 จะเสนอความสะดวก แต่ก็มีข้อแลกเปลี่ยน:

  • ขนาดไฟล์ที่เพิ่มขึ้น: การเข้ารหัส base64 จะเพิ่มขนาดข้อมูลประมาณ 33%
  • ไม่มีการแคชของเบราว์เซอร์: รูปภาพที่ฝังไม่สามารถแคชแยกต่างหากได้เหมือนไฟล์รูปภาพภายนอก
  • ค่าใช้จ่ายในการวิเคราะห์: เบราว์เซอร์ต้องถอดรหัสสตริง base64 ก่อนที่จะเรนเดอร์
  • ความท้าทายในการบำรุงรักษา: รูปภาพที่ฝังยากที่จะอัปเดตมากกว่าที่อ้างอิงจากไฟล์

เพื่อประสิทธิภาพที่ดีที่สุด การเข้ารหัส base64 มักแนะนำเฉพาะสำหรับรูปภาพขนาดเล็ก (ต่ำกว่า 10KB) รูปภาพขนาดใหญ่จะดีกว่าที่จะให้บริการเป็นไฟล์แยกต่างหากที่สามารถแคชและปรับให้เหมาะสมได้อย่างเหมาะสม

ทางเลือก

มีทางเลือกหลายประการสำหรับการเข้ารหัส base64 สำหรับกรณีการใช้งานที่แตกต่างกัน:

  1. การฝัง SVG แบบในบรรทัด: สำหรับกราฟิกเวกเตอร์, SVG แบบในบรรทัดมักให้ประสิทธิภาพและความยืดหยุ่นที่ดีกว่าการเข้ารหัส base64 SVG

  2. WebP และรูปแบบภาพทันสมัย: รูปแบบเหล่านี้ให้การบีบอัดที่ดีกว่ารูปแบบ JPEG/PNG ที่เข้ารหัสด้วย base64

  3. ภาพสไปรต์: รวมรูปภาพขนาดเล็กหลาย ๆ รูปในไฟล์เดียวและใช้การจัดตำแหน่ง CSS

  4. CDN (เครือข่ายการจัดส่งเนื้อหา): สำหรับเว็บไซต์การผลิต, การให้บริการรูปภาพที่ปรับให้เหมาะสมจาก CDN มักมีประสิทธิภาพมากกว่า

  5. การบีบอัดข้อมูล: สำหรับการถ่ายโอนข้อมูลไบนารีจำนวนมาก, อัลกอริธึมการบีบอัดเฉพาะทางเช่น gzip หรือ Brotli มีประสิทธิภาพมากกว่าการเข้ารหัส base64

ตัวอย่างโค้ด

นี่คือตัวอย่างการทำงานกับรูปภาพที่เข้ารหัสด้วย base64 ในหลายภาษาโปรแกรม:

1// แปลงรูปภาพเป็น base64 ใน JavaScript (เบราว์เซอร์)
2function imageToBase64(imgElement) {
3  const canvas = document.createElement('canvas');
4  canvas.width = imgElement.width;
5  canvas.height = imgElement.height;
6  
7  const ctx = canvas.getContext('2d');
8  ctx.drawImage(imgElement, 0, 0);
9  
10  // รับเป็น URL ข้อมูล (สตริง base64)
11  return canvas.toDataURL('image/png');
12}
13
14// แสดงรูปภาพ base64
15function displayBase64Image(base64String) {
16  const img = new Image();
17  
18  // จัดการกับสตริงที่ไม่มีคำนำหน้า URL ข้อมูล
19  if (!base64String.startsWith('data:')) {
20    base64String = `data:image/png;base64,${base64String}`;
21  }
22  
23  img.src = base64String;
24  document.body.appendChild(img);
25}
26

การใช้งาน HTML

นี่คือวิธีการฝังรูปภาพ base64 โดยตรงใน HTML:

1<!-- การฝังรูปภาพ base64 โดยตรงใน HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="รูปภาพที่เข้ารหัสด้วย Base64">
3
4<!-- ใช้ CSS กับรูปภาพพื้นหลัง base64 -->
5<style>
6.base64-bg {
7  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8  width: 100px;
9  height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13

ประวัติ

การเข้ารหัส Base64 มีรากฐานมาจากการพัฒนาระบบอีเมลอิเล็กทรอนิกส์ในปี 1970 มันถูกออกแบบมาเพื่อแก้ปัญหาการส่งข้อมูลไบนารีผ่านระบบที่ออกแบบมาเพื่อจัดการเฉพาะข้อความ ASCII

โครงการเข้ารหัสถูกกำหนดให้เป็นทางการในปี 1987 ด้วยการเผยแพร่ RFC 989 ซึ่งกำหนดมาตรฐาน Privacy Enhanced Mail (PEM) ซึ่งต่อมาได้รับการปรับปรุงใน RFC 1421 และมาตรฐานที่เกี่ยวข้องอื่น ๆ คำว่า "base64" เองมาจากความจริงที่ว่าโครงการเข้ารหัสใช้ตัวอักษร ASCII 64 ตัวเพื่อแสดงข้อมูลไบนารี

ในบริบทของการพัฒนาเว็บ การเข้ารหัส base64 สำหรับรูปภาพได้รับความนิยมมากขึ้นเมื่อการเกิดขึ้นของ URL ข้อมูลซึ่งถูกเสนอครั้งแรกใน RFC 2397 ในปี 1998 ซึ่งอนุญาตให้ข้อมูลไบนารีถูกฝังโดยตรงใน HTML, CSS และเอกสารเว็บอื่น ๆ

การใช้รูปภาพที่เข้ารหัสด้วย base64 ในการพัฒนาเว็บกลายเป็นที่แพร่หลายมากขึ้นในช่วงกลางปี 2000 ขณะที่นักพัฒนามองหาวิธีการลดคำขอ HTTP และปรับปรุงเวลาโหลดหน้าเว็บ เทคนิคนี้ได้รับการยอมรับโดยเฉพาะในช่วงการเพิ่มขึ้นของการพัฒนาเว็บบนมือถือซึ่งการลดคำขอเป็นสิ่งสำคัญสำหรับประสิทธิภาพในเครือข่ายมือถือที่ช้ากว่า

ในปัจจุบัน การเข้ารหัส base64 ยังคงเป็นเครื่องมือที่สำคัญในการพัฒนาเว็บแม้ว่าการใช้งานจะกลายเป็นเป้าหมายมากขึ้นเมื่อแนวทางปฏิบัติที่ดีที่สุดได้พัฒนาไป รูปแบบการเข้ารหัส base64 มักใช้เฉพาะสำหรับรูปภาพขนาดเล็กที่สำคัญในขณะที่ใช้วิธีการส่งมอบที่มีประสิทธิภาพมากขึ้นเช่น HTTP/2 สำหรับทรัพย์สินที่ใหญ่กว่า

อ้างอิง

  1. RFC 4648: The Base16, Base32, and Base64 Data Encodings
  2. RFC 2397: The "data" URL scheme
  3. MDN Web Docs: data URIs
  4. CSS-Tricks: Data URIs
  5. Base64 Image Encoder
  6. Can I Use: Data URIs
  7. Web Performance: When to Base64 Encode Images (and When Not To)
🔗

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

ค้นพบเครื่องมือเพิ่มเติมที่อาจมีประโยชน์สำหรับการทำงานของคุณ