Base64
Image Data URL
⚠️ Large image may freez the browser
เข้ารหัสภาพเป็น Base64 สำหรับ HTML
แปลงรูปภาพเป็นรูปแบบ Base64 หรือ DataURL สำหรับใส่ในโปรเจกต์ HTML อัปโหลดไฟล์รูปภาพของคุณ เลือกแท็บที่เหมาะสม และสร้างโค้ดที่เข้ารหัส ใช้ปุ่ม 'Copy' เพื่อรวมภาพที่เข้ารหัสลงในเว็บไซต์ของคุณ โดยให้ถูกฝังไว้โดยตรงโดยไม่มีลิงก์ภายนอก วิธีนี้ช่วยให้คุณสามารถรวมภาพเป็นส่วนหนึ่งของเนื้อหา HTML ของคุณ ทำให้การนำไปใช้งานง่ายขึ้นและลดการพึ่งพาทรัพยากรภายนอก
Image → Base64 / Data URL
Click or Drag & Drop an Image
แปลงรูปภาพเป็นรหัส Base64
1
อัปโหลดรูปภาพของคุณ
อัปโหลดรูปภาพของคุณโดยคลิกหรือลากและวางลงในพื้นที่ที่กำหนด
2
เลือกรูปแบบการเข้ารหัส
เลือกแท็บ 'Base64' หรือ 'DataURL' เพื่อเลือกรูปแบบการเข้ารหัสที่ต้องการ
3
ดูรหัสฐานข้อมูล
รหัส Base64 หรือ DataURL สำหรับรูปภาพของคุณจะปรากฏในพื้นที่ข้อความด้านล่างแท็บ
4
คัดลอกโค้ดที่สร้างขึ้น
คลิกปุ่ม 'คัดลอก' เพื่อคัดลอกโค้ดที่สร้างขึ้นอย่างรวดเร็วเพื่อใช้ในโครงการ HTML ของคุณ
ใส่ภาพลงใน HTML โดยตรง
ฝังรูปภาพลงใน HTML โดยตรงโดยไม่ใช้ไฟล์ภายนอก โดยการแปลงเป็นสตริง Base64 หรือ DataURL วิธีนี้ช่วยให้สามารถรวมรูปภาพแบบออนไลน์ ซึ่งจะช่วยลดคำขอ HTTP และอาจปรับปรุงเวลาในการโหลดหน้า หากมีประโยชน์สำหรับไอคอนขนาดเล็ก ภาพขนาดย่อ หรือองค์ประกอบตกแต่งอื่นๆ ที่การลดการพึ่งพาไฟล์เป็นสิ่งสำคัญ
คัดลอกข้อมูลภาพที่เข้ารหัสอย่างรวดเร็ว
เครื่องมือนี้ช่วยให้คุณฝังรูปภาพลงใน HTML โดยการสร้างสตริง Base64 หรือ DataURL มันช่วยลดความจำเป็นในการใช้ไฟล์รูปภาพภายนอก ซึ่งจะช่วยให้การจัดการไฟล์ง่ายขึ้นและทำให้เวลาในการโหลดเร็วขึ้น อัปโหลดรูปภาพของคุณ สร้างสตริงที่เข้ารหัส และคัดลอกโค้ดเพื่อฝังลงในหน้าเว็บของคุณ วิธีนี้มีประโยชน์สำหรับโครงการที่ต้องการการจัดการไฟล์ขั้นต่ำหรือการโหลดทรัพยากรที่ปรับให้เหมาะสม
คำถามที่พบบ่อย
Base64 DataURL คืออะไร และทำไมฉันถึงต้องการมัน
ข้อมูล Base64 DataURL ช่วยให้คุณสามารถฝังรูปภาพภายในโค้ด HTML ของคุณได้โดยตรง โดยไม่จำเป็นต้องใช้ไฟล์รูปภาพแยกต่างหาก สิ่งนี้มีประโยชน์สำหรับรูปภาพขนาดเล็กหรือเมื่อคุณต้องการให้แน่ใจว่ารูปภาพพร้อมใช้งานเสมอ แม้ว่าผู้ใช้จะมีการเชื่อมต่ออินเทอร์เน็ตที่ไม่พร้อมก็ตาม
วิธีใช้เครื่องมือนี้เพื่อรับ Base64 DataURL คืออะไร
อัปโหลดไฟล์รูปภาพของคุณ เลือกแท็บ 'Base64' หรือ 'DataURL' เครื่องมือจะสร้างสตริงที่เข้ารหัส จากนั้นคลิกปุ่ม 'Copy' เพื่อคัดลอกรหัสที่สร้างขึ้นไปยังคลิปบอร์ดของคุณได้อย่างง่ายดาย
ฉันสามารถใช้เครื่องมือนี้กับภาพขนาดใหญ่ได้ไหม
ในขณะที่คุณสามารถทำได้ รูปภาพขนาดใหญ่อาจทำให้คอมพิวเตอร์ของคุณช้าลงอย่างมากในระหว่างกระบวนการแปลง หากเป็นไปได้ ควรใช้เครื่องมือนี้กับรูปภาพขนาดเล็กถึงกลาง
อะไรคือความแตกต่างระหว่าง Base64 และ DataURL
ทั้งสองแสดงภาพเป็นสตริงข้อความในรูปแบบ HTML ข้อมูล URL รวมทั้งมีคำนำหน้าบอกชนิด MIME ในขณะที่ Base64 เพียงแค่เข้ารหัสข้อมูลภาพ
ฉันสามารถใช้รหัส Base64 หรือ DataURL ที่สร้างขึ้นได้ที่ไหน
คุณสามารถใช้โค้ดที่คัดลอกได้โดยตรงภายใน attribute src ของ tag <img> ใน HTML หรือภายในคุณสมบัติ CSS เช่น background-image