รูปภาพเป็น Base64

ทำงานอย่างไร

Data URI ฝังรูปภาพลงในซอร์สโค้ดของคุณโดยตรง แทนที่จะอ้างอิงไฟล์แยก ซึ่งลดคำขอเครือข่ายหนึ่งครั้ง สำคัญกับรูปเล็กที่ไม่เช่นนั้นจะเสียการไปกลับครั้งละหนึ่งครั้ง

เมื่อใดคุ้มค่า

ไอคอนเล็ก โลโก้ และกราฟิกสีเดียว ต่ำกว่าประมาณ 2 KB คำขอที่ประหยัดได้มักคุ้มกว่าต้นทุน สูงกว่านั้น การอ้างอิงไฟล์ปกติชนะ

ผลเสียด้านขนาด

Base64 เข้ารหัสสามไบต์เป็นสี่อักขระ data URI จึงใหญ่กว่าไฟล์ประมาณ 33% และยังแคชแยกไม่ได้ ต้องดาวน์โหลดใหม่พร้อมทุกสำเนาของสไตล์ชีตหรือหน้าที่มี

วางที่ไหน

ลงใน url() ของ CSS หรือแอตทริบิวต์ src ของ img ได้เลย เอาต์พุตมีคำนำหน้าชนิดสื่อที่ถูกต้องอยู่แล้ว