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