Chuyển đổi hình ảnh sang định dạng BASE64

Việc nhúng định dạng Base64 giúp tiết kiệm một yêu cầu HTTP nhưng làm tăng kích thước dữ liệu lên 33%, điều này có thể đáng giá đối với một số tài nguyên, nhưng lại rất lãng phí đối với những tài nguyên khác.

Phép tính kích thước

Hướng dẫn đưa ra quyết định

Định dạng URI dữ liệu

data:[<mediatype>][;base64],<data>

Ví dụ:

• data:image/png;base64,iVBORw0KGgo..., PNG
• data:image/svg+xml;utf8,<svg>...</svg>, định dạng SVG; thường phù hợp hơn khi hiển thị trực tiếp trong văn bản mà không sử dụng mã hóa Base64
• data:image/jpeg;base64,/9j/4AAQS..., JPG

Những mẹo nhỏ

• SVG thường là lựa chọn tốt hơn khi sử dụng url() kết hợp với mã hóa utf8 thay vì định dạng base64; nó ngắn gọn và dễ đọc hơn.
• Quá trình mã hóa không kiểm tra hay làm sạch nội dung hình ảnh. Chỉ nhúng tệp đáng tin cậy, đặc biệt là SVG vì tệp này có thể chứa nội dung hoạt động hoặc tham chiếu bên ngoài.
• Các hình ảnh lớn trong payload JSON có thể gây trở ngại cho quá trình phân tích nếu kích thước quá lớn; nên cân nhắc sử dụng định dạng multipart hoặc các tham chiếu từ bên ngoài.
• Tập hợp hình nền CSS sử dụng định dạng Base64 có thể hiển thị rõ ràng nhưng làm mất khả năng lưu bộ nhớ đệm trên nhiều trang.