แปลงรูปเป็น Base64
เปลี่ยนรูปเป็นโค้ดที่ฝังลงใน HTML หรือ CSS ได้โดยตรง และแปลงกลับเป็นรูปได้
ลากรูปมาวางที่นี่
รูปถูกอ่านในเบราว์เซอร์ของคุณเท่านั้น ไม่มีการอัปโหลดขึ้นเซิร์ฟเวอร์
เกี่ยวกับเครื่องมือนี้
เครื่องมือ แปลงรูปเป็น Base64 เปลี่ยนไฟล์รูปให้เป็นข้อความ data URI ที่ฝังลงใน HTML หรือ CSS ได้โดยตรง และแปลงกลับจากโค้ดเป็นรูปได้ด้วย
ประโยชน์ของการฝังคือ ลดการเรียกไฟล์ หน้าเว็บไม่ต้องดาวน์โหลดรูปเป็นคำขอแยกอีกหนึ่งครั้ง ซึ่งช่วยได้จริงกับไอคอนเล็ก ๆ ที่มีหลายอัน
แต่มี ข้อแลกเปลี่ยนที่ต้องรู้ Base64 ใหญ่กว่าไฟล์เดิมประมาณหนึ่งในสามเสมอ และเมื่อรูปกลายเป็นส่วนหนึ่งของไฟล์ HTML หรือ CSS แล้ว เบราว์เซอร์จะแคชมันแยกไม่ได้อีกต่อไป — แก้ CSS นิดเดียวผู้ใช้ต้องโหลดรูปใหม่ทั้งหมด เครื่องมือนี้จึงแสดงเปอร์เซ็นต์ที่ใหญ่ขึ้นให้เห็นชัด และเตือนเมื่อรูปใหญ่เกินกว่าที่การฝังจะคุ้ม
โดยทั่วไปการฝังคุ้มกับรูปที่ ต่ำกว่าประมาณ 10 KB โดยเฉพาะไอคอน SVG ส่วนรูปใหญ่กว่านั้นควรใช้เป็นไฟล์แยกตามปกติ ทุกอย่างทำงานในเบราว์เซอร์ รูปไม่ถูกอัปโหลด
วิธีใช้งาน
- 1ลากรูปมาวางหรือกดเลือกรูปจากเครื่อง
- 2ดูขนาดก่อน-หลัง และเปอร์เซ็นต์ที่ใหญ่ขึ้น
- 3คัดลอกโค้ด data URI หรือบรรทัด CSS ที่เตรียมไว้ให้
- 4สลับไปโหมดถอดรหัสเพื่อวางโค้ด Base64 แล้วดูว่าเป็นรูปอะไร
คำถามที่พบบ่อย
- ทำไม Base64 ถึงใหญ่กว่าไฟล์เดิม
- เพราะ Base64 เข้ารหัสข้อมูล 3 ไบต์เป็นตัวอักษร 4 ตัว จึงใหญ่ขึ้นประมาณหนึ่งในสามเสมอ นี่เป็นคุณสมบัติของรูปแบบ ไม่ใช่ข้อบกพร่อง
- ควรฝังรูปเป็น Base64 เมื่อไหร่
- คุ้มกับไอคอนหรือรูปเล็กมาก ๆ ที่ต่ำกว่าประมาณ 10 KB เพราะประหยัดการเรียกไฟล์เพิ่มหนึ่งครั้ง แต่กับรูปใหญ่จะเสียมากกว่าได้ เพราะไฟล์ HTML หรือ CSS จะใหญ่ตาม และเบราว์เซอร์แคชรูปแยกไม่ได้อีกต่อไป
- ฝังใน CSS หรือ HTML ต่างกันไหม
- ใช้ได้ทั้งคู่ ใน HTML ใส่ในแอตทริบิวต์ src ของแท็ก img ส่วนใน CSS ใส่ใน url() ของ background-image เครื่องมือนี้เตรียมบรรทัด CSS ไว้ให้คัดลอกเลย
- รองรับไฟล์รูปแบบไหนบ้าง
- รองรับทุกรูปแบบที่เบราว์เซอร์อ่านได้ ทั้ง PNG, JPEG, GIF, WebP, SVG และ AVIF โดย SVG มักได้ประโยชน์จากการฝังมากที่สุดเพราะไฟล์เล็ก
- รูปของฉันถูกอัปโหลดไหม
- ไม่ การแปลงทำในเบราว์เซอร์ของคุณทั้งหมด รูปไม่ถูกส่งขึ้นเซิร์ฟเวอร์