จะแปลงรูปภาพเป็น Base64 data URI สำหรับ CSS ได้อย่างไร

วางหรือแปะรูปภาพ (Ctrl+V) จากนั้นเปิดแท็บ CSS แล้วคลิก Copy คุณจะได้กฎ background-image: url(...) ที่ฝัง data URI ไว้ แท็บ HTML, Markdown, Raw Base64 และ JSON ใช้งานได้แบบเดียวกัน

ทำไมผลลัพธ์ Base64 ถึงใหญ่กว่ารูปภาพของฉันประมาณหนึ่งในสาม

Base64 แปลงทุก 3 ไบต์เป็นตัวอักษร 4 ตัว ข้อความจึงใหญ่กว่าไฟล์ประมาณ 33% นั่นคือเหตุผลที่ data URI เหมาะกับไอคอนและโลโก้ขนาดเล็ก ไม่เหมาะกับภาพถ่ายขนาดใหญ่

จะทำให้สตริง Base64 สั้นลงได้อย่างไร

เปิด Shrink ก่อนแล้วตั้ง Max width หรือ Format (WebP, JPEG หรือ PNG) และลด Quality สำหรับ WebP หรือ JPEG ไฟล์ SVG และ GIF ย่อด้วยวิธีนี้ไม่ได้ SVG มีแท็บ SVG (URL-encoded) แยกต่างหาก

แปลงสตริง Base64 กลับเป็นรูปภาพได้ไหม

ได้ เปลี่ยน Direction เป็น Base64 to Image แล้ววาง data URI หรือ Base64 เปล่า ระบบรู้จัก PNG, JPEG, GIF, WebP, SVG, BMP, ICO และ AVIF แล้วมีให้ดาวน์โหลด หากอินพุตไม่ถูกต้องจะแสดงข้อผิดพลาด

ทำไม Copy ถึงล้มเหลวหรือตัวอย่างดูถูกตัดเมื่อใช้รูปใหญ่

ตัวอย่างแสดงเพียง 2000 ตัวอักษรแรก แต่ Copy และ Download จะให้ค่าทั้งหมด สตริงที่ใหญ่มากอาจเกินขีดจำกัดคลิปบอร์ดของเบราว์เซอร์ ให้ใช้ Download หรือย่อรูปก่อน

ฟรีจริงหรือ

ใช่ ทุกเครื่องมือใช้งานได้ฟรี ไม่ต้องมีบัญชีและไม่ต้องใช้บัตรเครดิต การทำงานเกิดขึ้นบนอุปกรณ์ของคุณแทนที่จะเป็นเซิร์ฟเวอร์ของเรา ซึ่งเป็นสิ่งที่ทำให้ใช้งานได้ฟรี

ไฟล์ของฉันถูกอัปโหลดหรือไม่

ไม่ ไฟล์ของคุณถูกเปิดและประมวลผลภายในเบราว์เซอร์ และไม่ถูกส่งไปยัง LibraTool เครื่องมือบางตัวจะดาวน์โหลดเอนจินประมวลผลหรือโมเดล AI มาที่เบราว์เซอร์ก่อน การดาวน์โหลดนั้นไม่มีข้อมูลของคุณ

ใช้งานได้บนมือถือหรือไม่?

ได้ ใช้งานได้บนเบราว์เซอร์มือถือรุ่นปัจจุบันทั้ง iOS และ Android โดยไม่ต้องติดตั้งอะไร ไฟล์ขนาดใหญ่มากอาจช้าหรือหน่วยความจำไม่พอบนโทรศัพท์ ควรใช้คอมพิวเตอร์สำหรับไฟล์เหล่านั้น

🖼️

รูปภาพเป็น Base64 ฟรี

แปลงรูปภาพเป็น Base64 data URI สำหรับใช้แบบ inline ใน CSS, HTML หรือ Markdown คัดลอก snippet ที่พร้อมใช้งาน เข้ารหัสในเบราว์เซอร์ ไม่มีการอัปโหลด

ขนาดไฟล์ขึ้นอยู่กับอุปกรณ์ของคุณไฟล์ยังคงเป็นส่วนตัวไม่ต้องเข้าสู่ระบบฟรีตลอดไป

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว

วางไฟล์ที่นี่ หรือคลิกเพื่อเลือก

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · ประมวลผลบนอุปกรณ์ของคุณ

หรือกด Ctrl+V เพื่อวางจากคลิปบอร์ด

เรียกดูไฟล์

เคล็ดลับ: คุณยังสามารถวางภาพจากคลิปบอร์ด (Ctrl+V)

ไฟล์ของคุณไม่เคยออกจากอุปกรณ์ การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ

แปลงรูปภาพเป็น Base64 data URI ที่วางได้ใน CSS, HTML หรือ Markdown โดยตรง — ไม่ต้องใช้ไฟล์แยก เข้ารหัสในเบราว์เซอร์ ไม่อัปโหลดเลย

การใช้งานทั่วไป

ฝังรูปภาพใน CSSฝังไอคอนเล็ก ๆ หรือพื้นหลังเป็น data URI ในสไตลชีต
ฝังรูปภาพใน HTMLฝังโลโก้หรือไอคอนโดยตรงใน HTML แบบสอบถาม
แปลง SVG หรือไอคอนเป็น Base64เปลี่ยนไอคอนเล็ก ๆ เป็น data URI เพื่อฝัง
ฝังรูปภาพใน Markdownฝังรูปภาพเล็ก ๆ ในไฟล์ Markdown ด้วย data URI
รับข้อมูล URI ของรูปภาพสร้าง data: URI ดิบที่คุณสามารถใช้ได้ทุกที่

วิธีการทำงาน

Data URI ฝังรูปภาพลงในโค้ดของคุณเป็นข้อความ เพื่อให้โหลดโดยไม่ต้องขอไฟล์แยกต่างหาก - ใช้ได้ดีกับไอคอนขนาดเล็กและ HTML แบบไฟล์เดียว ทั้งนี้เข้ารหัสในเบราว์เซอร์ของคุณ

1
คุณปล่อยภาพลงมา
อ่านในเครื่องด้วย FileReader API - ไม่มีการอัปโหลด
2
เข้ารหัส Base64
ไบต์ของภาพกลายเป็น data: URI (data:image/...;base64,…) ในเบราว์เซอร์ของคุณ
3
คุณเลือกโค้ดที่ต้องการ
คัดลอก data URI ดิบ หรือโค้ดสำเร็จรูปสำหรับ CSS (background-image), HTML (<img>) หรือ Markdown
4
วางลงในโค้ดของคุณ
ตอนนี้รูปภาพฝังอยู่ใน CSS/HTML ของคุณโดยตรง - ไม่ต้องโฮสต์ไฟล์เพิ่ม

ภาพจะถูกเข้ารหัสบนอุปกรณ์ของคุณทั้งหมด โปรดทราบว่า Base64 มีขนาดใหญ่กว่าต้นฉบับประมาณ 33% ดังนั้น data URI จึงเหมาะที่สุดสำหรับภาพขนาดเล็ก

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

🖼️

Steganography รูปภาพ (ซ่อนข้อความในรูป)

ซ่อนข้อความลับใน PNG ด้วย least-significant-bit steganography พร้อมการเข้ารหัส AES-256-GCM ด้วยรหัสผ่านแบบเลือกได้ ดึงออกในภายหลังด้วยเครื่องมือเดียวกัน ทุกอย่างทำงานในเบราว์เซอร์

ลองใช้ไฟล์อยู่ในเครื่อง

🔢

เข้ารหัสและถอดรหัส Base64

เข้ารหัสข้อความหรือไฟล์เป็น Base64 หรือถอดรหัสสตริง Base64 กลับเป็นข้อความธรรมดา รวดเร็ว ปลอดภัย และฟรี

ลองใช้

🔗

ตัวเข้ารหัสและถอดรหัส URL

เข้ารหัสและถอดรหัส URL และสตริงคิวรี รองรับ encodeURIComponent, decodeURIComponent และการแยกวิเคราะห์สตริงคิวรี