ตัวแปลง CSS Data URI
วางสไตล์ชีต เลือกไฟล์ หรือป้อน URL ของไฟล์ CSS ระยะไกล ตัวแปลงจะค้นหาการอ้างอิง url(...) ทุกตัว ดาวน์โหลดทรัพยากรที่เล็กกว่าขนาดที่กำหนด และแทนที่ด้วย Base64 data URI
| ทรัพยากร | ขนาด | ผลลัพธ์ |
|---|
เมื่อใดที่การฝังรูปภาพใน CSS มีประโยชน์
รูปภาพภายนอกแต่ละรูปต้องใช้หนึ่งคำขอ สำหรับไอคอนขนาดเล็ก การฝังเป็น Base64 data URI ช่วยลดคำขอนั้นและป้องกันการกะพริบ แต่เมื่อเกินไม่กี่กิโลไบต์ ขนาดที่เพิ่มขึ้น 33% และการสูญเสียแคชจะมากกว่าประโยชน์ที่ได้ ตัวแปลงจึงมีการจำกัดขนาด ส่งผลลัพธ์ด้วยgzip หรือ Brotli เพื่อลดส่วนเกินของ Base64 ได้เกือบทั้งหมด
คำถามที่พบบ่อย
ควรฝังรูปภาพทุกรูปใน CSS หรือไม่?
ไม่ ควรฝังเฉพาะไอคอนและพื้นหลังขนาดเล็กเท่านั้น รูปภาพขนาดใหญ่ทำให้ CSS บวม บล็อกการแสดงผล และแคชแยกไม่ได้
ความคิดเห็น (0)
มีคำถาม ไอเดีย หรือพบข้อผิดพลาดใน “ตัวแปลง CSS Data URI” ใช่ไหม? แสดงความคิดเห็น ให้คะแนนเครื่องมือ หรือตอบกลับผู้อื่นได้เลย
ยังไม่มีความคิดเห็น มาเป็นคนแรกที่แสดงความคิดเห็นสิ!