แปลง Image เป็น Base64 ออนไลน์สำหรับ CSS และ HTML
Base64 ช่วยให้ภาพขนาดเล็กฝังในโค้ดได้โดยตรง เปลี่ยนไฟล์เป็นข้อความโดยไม่ต้องส่งไปยังเซิร์ฟเวอร์
Base64 เปลี่ยน ข้อมูล ไบนารี ของ ภาพ เป็น ข้อความ ที่ ฝัง ใน CSS, HTML หรือ JSON ได้ ใช้ เครื่องมือ แปลง Image เป็น Base64 เพื่อ รับ สตริง ที่ พร้อม วาง
เมื่อ ไร ควร ใช้
เทคนิค นี้ เหมาะ กับ ไอคอน เล็ก โลโก้ เรียบ ง่าย และ แอสเซ็ต ที่ ต้อง อยู่ ใน ไฟล์ HTML เดียว data URI ยัง ช่วย ให้ การ ทำ ต้นแบบ และ อีเมล HTML พื้นฐาน ง่าย ขึ้น
- ใช้ กับ ภาพ ขนาด เล็ก เพื่อ ไม่ ให้ ไฟล์ บวม
- เลือก WebP หรือ SVG เมื่อ รอง รับ
- หลีกเลี่ยง Base64 กับ ภาพถ่าย ขนาดใหญ่
- เก็บ ไฟล์ ต้นฉบับ ไว้ สำหรับ การ แก้ไข
ระวัง ขนาด
Base64 เพิ่ม ขนาด ข้อมูล ประมาณ หนึ่ง ใน สาม และ ภาพ ที่ ฝัง ไว้ อาจ ไม่ ถูก แคช แยก ส่วน สำหรับ แอสเซ็ต ใหญ่ ให้ ใช้ ไฟล์ภาพ ปกติ ต่อ ไป หลัง แปลง ให้ วาง สตริง ลง ใน โค้ด และ ทดสอบ หน้าเว็บ ใน เบราว์เซอร์
ทางเลือก สำหรับ แอสเซ็ต ใหญ่
สำหรับ ภาพ ที่ เปลี่ยน บ่อย ให้ เก็บ เป็น ไฟล์ แยก เพื่อให้ เบราว์เซอร์ แคช ได้ Base64 เหมาะ กับ แอสเซ็ต เล็ก ที่ ไม่ ค่อย เปลี่ยน และ ต้อง มา ใน คำขอ เดียว ทดสอบ ความเร็ว ของ หน้าเว็บ หลัง วาง สตริง
คำถามที่พบบ่อย
Base64 เหมาะ กับ ภาพถ่าย ขนาดใหญ่ ไหม
ไม่ เหมาะ ข้อมูล มี ขนาดใหญ่ ขึ้น และ หน้าเว็บ อาจ ช้า
รอง รับ รูปแบบ ใด บ้าง
PNG, JPG, WebP, GIF และ SVG ขึ้นอยู่ กับ ไฟล์ ที่ เลือก
ขนาด ข้อมูล เพิ่ม ขึ้น ไหม
เพิ่ม ขึ้น ประมาณ หนึ่ง ใน สาม เมื่อ เทียบ กับ ไฟล์ ต้นฉบับ
ภาพ ถูก อัปโหลด ไหม
ไม่ การ แปลง เกิด ใน เบราว์เซอร์ และ ไฟล์ ไม่ ถูก ส่ง ไป ยัง เซิร์ฟเวอร์