ตัวถอดรหัสและดูภาพ 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 ข้อมูลด้วยโครงสร้างดังต่อไปนี้:
data:[<media type>][;base64],<data>
ตัวอย่างเช่น รูปภาพ PNG ที่เข้ารหัสด้วย base64 อาจมีลักษณะดังนี้:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
ส่วนประกอบของรูปแบบนี้คือ:
data:
- สคีมาของ URLimage/png
- ชนิด MIME ของข้อมูล;base64
- วิธีการเข้ารหัส,
- ตัวแบ่งระหว่างส่วนหัวและข้อมูล- ข้อมูลที่เข้ารหัส base64 จริง
กระบวนการถอดรหัส
เมื่อถอดรหัสสตริงรูปภาพ base64 จะมีขั้นตอนดังนี้:
- สตริงจะถูกวิเคราะห์เพื่อตรวจสอบว่ามีคำนำหน้า URL ข้อมูลหรือไม่
- หากมีคำนำหน้าอยู่ ชนิด MIME จะถูกดึงออกมาเพื่อตัดสินใจเกี่ยวกับรูปแบบรูปภาพ
- ส่วนข้อมูล base64 จะถูกแยกออกและถอดรหัสเป็นข้อมูลไบนารี
- ข้อมูลไบนารีจะถูกแปลงเป็น Blob หรือ URL ของวัตถุที่สามารถแสดงเป็นรูปภาพได้
หากข้อมูลนำเข้ามิได้รวมคำนำหน้า URL ข้อมูล ตัวถอดรหัสจะพยายามจัดการกับข้อมูลนั้นเป็นข้อมูล base64 ดิบและอนุมานประเภทของรูปภาพจากส่วนหัวไบนารีที่ถอดรหัสหรือใช้ PNG เป็นค่าเริ่มต้น
รูปแบบรูปภาพที่รองรับ
เครื่องมือนี้รองรับรูปแบบรูปภาพทั่วไปทั้งหมดบนเว็บ:
รูปแบบ | ชนิด MIME | กรณีการใช้งานทั่วไป |
---|---|---|
JPEG | image/jpeg | รูปภาพ, รูปภาพที่ซับซ้อนที่มีสีหลายสี |
PNG | image/png | รูปภาพที่ต้องการความโปร่งใส, การจับภาพหน้าจอ, กราฟิก |
GIF | image/gif | การเคลื่อนไหวที่ง่าย, รูปภาพที่มีสีจำกัด |
WebP | image/webp | รูปแบบทันสมัยที่มีการบีบอัดดีกว่ารูปแบบ JPEG/PNG |
SVG | image/svg+xml | กราฟิกเวกเตอร์, ไอคอนและภาพประกอบที่ปรับขนาดได้ |
กรณีการใช้งาน
รูปภาพที่เข้ารหัสด้วย base64 มีการใช้งานที่หลากหลายในการพัฒนาเว็บและอื่น ๆ:
-
ฝังรูปภาพใน HTML/CSS/JS: ลดคำขอ HTTP โดยการรวมรูปภาพไว้ในโค้ดของคุณ ซึ่งสามารถปรับปรุงเวลาโหลดหน้าเว็บสำหรับรูปภาพขนาดเล็ก
-
เทมเพลตอีเมล: ทำให้แน่ใจว่ารูปภาพแสดงผลอย่างถูกต้องในไคลเอนต์อีเมลที่บล็อกรูปภาพภายนอกตามค่าเริ่มต้น
-
แอปพลิเคชันไฟล์เดียว: สร้างแอปพลิเคชัน HTML ที่มีความเป็นอิสระซึ่งทรัพยากรทั้งหมดถูกฝังอยู่ในไฟล์เดียว
-
การตอบสนอง API: รวมข้อมูลรูปภาพโดยตรงใน JSON โดยไม่ต้องการจุดสิ้นสุดรูปภาพแยกต่างหาก
-
Data URIs ใน CSS: ฝังไอคอนและรูปภาพพื้นหลังขนาดเล็กโดยตรงในไฟล์ CSS
-
การจัดการ Canvas: ช่วยในการบันทึกและถ่ายโอนข้อมูลรูปภาพจาก canvas
-
แอปพลิเคชันออฟไลน์: เก็บรูปภาพเป็นสตริงข้อความใน localStorage หรือ IndexedDB
การพิจารณาด้านประสิทธิภาพ
แม้ว่าการเข้ารหัส base64 จะเสนอความสะดวก แต่ก็มีข้อแลกเปลี่ยน:
- ขนาดไฟล์ที่เพิ่มขึ้น: การเข้ารหัส base64 จะเพิ่มขนาดข้อมูลประมาณ 33%
- ไม่มีการแคชของเบราว์เซอร์: รูปภาพที่ฝังไม่สามารถแคชแยกต่างหากได้เหมือนไฟล์รูปภาพภายนอก
- ค่าใช้จ่ายในการวิเคราะห์: เบราว์เซอร์ต้องถอดรหัสสตริง base64 ก่อนที่จะเรนเดอร์
- ความท้าทายในการบำรุงรักษา: รูปภาพที่ฝังยากที่จะอัปเดตมากกว่าที่อ้างอิงจากไฟล์
เพื่อประสิทธิภาพที่ดีที่สุด การเข้ารหัส base64 มักแนะนำเฉพาะสำหรับรูปภาพขนาดเล็ก (ต่ำกว่า 10KB) รูปภาพขนาดใหญ่จะดีกว่าที่จะให้บริการเป็นไฟล์แยกต่างหากที่สามารถแคชและปรับให้เหมาะสมได้อย่างเหมาะสม
ทางเลือก
มีทางเลือกหลายประการสำหรับการเข้ารหัส base64 สำหรับกรณีการใช้งานที่แตกต่างกัน:
-
การฝัง SVG แบบในบรรทัด: สำหรับกราฟิกเวกเตอร์, SVG แบบในบรรทัดมักให้ประสิทธิภาพและความยืดหยุ่นที่ดีกว่าการเข้ารหัส base64 SVG
-
WebP และรูปแบบภาพทันสมัย: รูปแบบเหล่านี้ให้การบีบอัดที่ดีกว่ารูปแบบ JPEG/PNG ที่เข้ารหัสด้วย base64
-
ภาพสไปรต์: รวมรูปภาพขนาดเล็กหลาย ๆ รูปในไฟล์เดียวและใช้การจัดตำแหน่ง CSS
-
CDN (เครือข่ายการจัดส่งเนื้อหา): สำหรับเว็บไซต์การผลิต, การให้บริการรูปภาพที่ปรับให้เหมาะสมจาก CDN มักมีประสิทธิภาพมากกว่า
-
การบีบอัดข้อมูล: สำหรับการถ่ายโอนข้อมูลไบนารีจำนวนมาก, อัลกอริธึมการบีบอัดเฉพาะทางเช่น gzip หรือ Brotli มีประสิทธิภาพมากกว่าการเข้ารหัส base64
ตัวอย่างโค้ด
นี่คือตัวอย่างการทำงานกับรูปภาพที่เข้ารหัสด้วย base64 ในหลายภาษาโปรแกรม:
// แปลงรูปภาพเป็น base64 ใน JavaScript (เบราว์เซอร์)
function imageToBase64(imgElement) {
const canvas = document.createElement('canvas');
canvas.width = imgElement.width;
canvas.height = imgElement.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(imgElement, 0, 0);
// รับเป็น URL ข้อมูล (สตริง base64)
return canvas.toDataURL('image/png');
}
// แสดงรูปภาพ base64
function displayBase64Image(base64String) {
const img = new Image();
// จัดการกับสตริงที่ไม่มีคำนำหน้า URL ข้อมูล
if (!base64String.startsWith('data:')) {
base64String = `data:image/png;base64,${base64String}`;
}
img.src = base64String;
document.body.appendChild(img);
}
การใช้งาน HTML
นี่คือวิธีการฝังรูปภาพ base64 โดยตรงใน HTML:
<!-- การฝังรูปภาพ base64 โดยตรงใน HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="รูปภาพที่เข้ารหัสด้วย Base64">
<!-- ใช้ CSS กับรูปภาพพื้นหลัง base64 -->
<style>
.base64-bg {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
width: 100px;
height: 100px;
}
</style>
<div class="base64-bg"></div>
ประวัติ
การเข้ารหัส 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 สำหรับทรัพย์สินที่ใหญ่กว่า