Base64
Image Data URL
⚠️ Large image may freez the browser
สร้าง CSS พื้นหลัง Base64
แปลงรูปภาพเป็นรูปแบบ Base64 หรือ DataURL สำหรับใช้เป็นพื้นหลัง CSS หรือแอปพลิเคชันเว็บอื่นๆ อัปโหลดรูปภาพของคุณ เลือกแท็บที่ต้องการ และคัดลอกรหัสที่สร้างขึ้น เหมาะสำหรับการฝังรูปภาพลงในโค้ดเว็บไซต์โดยตรง แต่รูปภาพขนาดใหญ่อาจส่งผลกระทบต่อประสิทธิภาพ
Image → Base64 / Data URL
Click or Drag & Drop an Image
แปลงรูปภาพเป็นรหัส Base64
1
อัปโหลดรูปภาพของคุณ
อัปโหลดรูปภาพของคุณโดยคลิกหรือลากไฟล์ไปยังพื้นที่อัปโหลด
2
เลือก Base64 หรือ DataURL
เลือกแท็บ 'Base64' หรือ 'DataURL' เพื่อเลือกรูปแบบที่ต้องการ
3
ดูโค้ด Base64
โค้ด Base64 หรือ DataURL จะปรากฏในพื้นที่ข้อความด้านล่างแท็บ
4
คัดลอกโค้ดที่สร้างขึ้น
คลิกปุ่ม 'คัดลอก' เพื่อคัดลอกโค้ดที่สร้างขึ้นไปยังคลิปบอร์ดของคุณ
ใส่รูปภาพโดยตรงใน CSS
ฝังรูปภาพโดยตรงใน CSS โดยใช้การเข้ารหัส Base64 หรือ DataURL เพื่อลดจำนวนคำขอ HTTP และปรับปรุงประสิทธิภาพของเว็บไซต์ วิธีนี้ช่วยลดเวลาในการโหลดโดยการกำจัดไฟล์รูปภาพแยกต่างหาก โดยยังคงรักษาองค์ประกอบภาพ เช่น ไอคอนขนาดเล็กหรือภาพตกแต่ง รองรับการรวมสินทรัพย์ขนาดเล็กได้อย่างมีประสิทธิภาพ โดยไม่กระทบต่อความเร็วของเว็บไซต์
ภาพพื้นหลัง CSS อย่างรวดเร็วด้วยภาพที่เข้ารหัส
เข้ารหัสรูปภาพเป็นรูปแบบ Base64 หรือ DataURL เพื่อตั้ง CSS backgrounds วิธีการนี้ช่วยให้กระบวนการทำงานเป็นระบบมากขึ้นโดยการผสานรวมภาพเข้าไปในโค้ดโดยตรง การลดความจำเป็นในการใช้ไฟล์รูปภาพภายนอกสามารถลดจำนวนคำขอ HTTP และปรับปรุงประสิทธิภาพของเว็บไซต์ เหมาะสำหรับใช้ภาพขนาดเล็กเพื่อเพิ่มประสิทธิภาพ
คำถามที่พบบ่อย
Base64 คืออะไร และ DataURL คืออะไร
Base64 และ DataURLs เป็นวิธีในการแสดงรูปภาพเป็นสตริงข้อความ สิ่งนี้ช่วยให้คุณสามารถฝังรูปภาพลงในโค้ดเว็บไซต์ของคุณโดยตรง โดยไม่ต้องใช้ไฟล์รูปภาพแยกต่างหาก
ฉันสามารถใช้ Base64 หรือ DataURL ที่สร้างขึ้นได้อย่างไร
โค้ดที่สร้างขึ้นสามารถใช้เป็นภาพพื้นหลัง CSS, ในคุณสมบัติ HTML หรือในบริบทใดๆ ที่ยอมรับ data URI ตัวอย่างเช่น คุณสามารถใช้ใน CSS ได้ดังนี้ background-image url('data:image/png;base64,...');
ทำไมฉันถึงควรใช้เครื่องมือนี้แทนวิธีอื่น?
เครื่องมือนี้ให้วิธีที่ง่ายและสะดวกในการแปลงรูปภาพเป็น Base64 หรือ DataURL ด้วยการคลิกเดียวและปุ่มคัดลอก มันรวดเร็วและใช้งานง่าย
มีข้อจำกัดใดๆ เมื่อใช้เครื่องมือนี้ไหม
รูปภาพขนาดใหญ่อาจไม่เหมาะสมเพราะอาจทำให้คอมพิวเตอร์ทำงานช้าลงในระหว่างกระบวนการแปลง
รูปแบบไฟล์ใดบ้างที่รองรับ
เครื่องมือนี้รองรับรูปแบบไฟล์รูปภาพทั่วไป เช่น PNG, JPG และ GIF