Chuyển ảnh sang Base64
Biến một ảnh thành chuỗi Base64 để dán thẳng vào code.
Văn bản Base64 nặng hơn khoảng 37% so với file gốc. Phù hợp với icon nhỏ, không hợp với ảnh chụp đầy đủ.
Chạy ngay trên trình duyệt. File của bạn không bao giờ rời khỏi thiết bị.
- Xuất ra data URL, CSS và HTML
- Dùng được với mọi loại ảnh
- Không tải lên
Cách chuyển ảnh sang Base64
- Thả ảnh vào đây, hoặc bấm Chọn file.
- Sao chép data URL, Base64 thô, hoặc đoạn mã CSS hay HTML dựng sẵn.
- Dán vào code của bạn.
Cách hoạt động của việc mã hóa
Base64 biến mỗi 3 byte của ảnh thành 4 ký tự văn bản, dùng bảng 64 ký tự gồm A đến Z, a đến z, 0 đến 9, dấu cộng và dấu gạch chéo, theo chuẩn RFC 4648.
Data URL là đoạn văn bản đó cộng thêm một tiền tố ngắn, như data:image/png;base64, để trình duyệt hoặc ứng dụng biết mình đang đọc gì mà không cần file riêng.
| File gốc | Văn bản Base64 (nặng hơn khoảng 37%) |
|---|---|
| Icon 5 KB | Khoảng 6,9 KB |
| Logo 20 KB | Khoảng 27 KB |
| Ảnh 100 KB | Khoảng 137 KB |
Phần dư đó là lý do data URL phù hợp nhất với đồ họa nhỏ, không hợp với ảnh chụp đầy đủ.
Data URL được dùng ở đâu
- Trong CSS, ở thuộc tính background-image, để icon nhỏ tải cùng stylesheet thay vì tốn một request riêng.
- Trong HTML, ở thuộc tính src của thẻ img hoặc mã SVG nhúng trực tiếp.
- Trong response JSON API và các trường dữ liệu lưu ảnh dưới dạng văn bản.
- Trong HTML của email, vì một số trình email chặn ảnh dẫn link nhưng vẫn cho phép dữ liệu nhúng sẵn.
Khi nào nên giữ file bình thường thay vì Base64
Data URL không được cache riêng khỏi trang chứa nó, nên một ảnh dùng ở mười trang sẽ bị tải mười lần thay vì một lần. Với bất cứ thứ gì lớn hơn icon nhỏ, một file ảnh bình thường có cache của trình duyệt sẽ tải nhanh hơn.
Câu hỏi thường gặp về Ảnh sang Base64
Data URL Base64 là gì?
Đó là dữ liệu byte của một ảnh được viết thành văn bản, nên bạn có thể dán thẳng ảnh vào HTML, CSS hoặc JSON mà không cần file riêng.
Base64 có làm file nặng hơn không?
Có, nặng hơn khoảng 37%, vì mã hóa biến mỗi 3 byte của ảnh thành 4 ký tự văn bản.
Khi nào nên dùng data URL thay vì file?
Với icon nhỏ và đồ họa đơn giản, khi việc bớt một request mạng quan trọng hơn dung lượng trang. Với ảnh chụp, hãy giữ nguyên dạng file ảnh bình thường.
Ảnh của tôi có bị tải lên đâu không?
Không. Việc mã hóa diễn ra ngay trong trình duyệt, nên ảnh không bao giờ rời khỏi thiết bị.
Chuyển sang Base64 có làm đổi chất lượng ảnh không?
Không. Dữ liệu điểm ảnh không bị đụng tới, chỉ được viết lại thành văn bản, nên giải mã lại sẽ cho đúng byte gốc.
Có giới hạn dung lượng cho data URL không?
Trình duyệt không đặt giới hạn cứng, nhưng một data URL dài không thể được cache riêng và làm chậm việc phân tích trang, nên chỉ hợp với icon và đồ họa nhỏ.
Trình duyệt nào cũng hỗ trợ data URL chứ?
Có. Data URL đã hoạt động trên mọi trình duyệt lớn từ thời Internet Explorer 8, kể cả mọi trình duyệt di động hiện nay.
Tôi có thể dùng cái này cho favicon không?
Một favicon nhỏ có thể nhúng thẳng dưới dạng data URL trong phần head của HTML, dù cách phổ biến hơn vẫn là dùng file favicon.ico kèm các kích thước PNG.