Hình ảnh
Chuyển ảnh sang Base64 (Data URI)
Chuyển ảnh thành chuỗi data URI để nhúng thẳng vào HTML hoặc CSS, kèm sẵn đoạn mã dùng ngay.
Kéo thả ảnh vào đây hoặc bấm để chọn
Hỗ trợ JPG, PNG, WebP, GIF, AVIF, SVG
Chuyển ảnh sang Base64 (Data URI) là gì?
Data URI cho phép nhúng nội dung tệp thẳng vào mã nguồn thay vì trỏ tới một đường dẫn. Với ảnh, điều đó nghĩa là trình duyệt không phải gửi thêm một yêu cầu mạng nào để tải ảnh — nó đã nằm sẵn trong HTML hoặc CSS rồi.
Kỹ thuật này chỉ đáng dùng với ảnh nhỏ. Base64 làm dữ liệu phình khoảng 33%, và ảnh nhúng không được cache riêng nên mỗi lần tải lại trang là tải lại cả ảnh. Với biểu tượng nhỏ vài KB thì việc tiết kiệm một lượt kết nối là đáng; với ảnh lớn thì lợi bất cập hại.
Cách sử dụng
- Kéo thả ảnh vào khung hoặc bấm để chọn tệp.
- Công cụ tạo sẵn ba dạng: chuỗi data URI thuần, thẻ img cho HTML, và thuộc tính background-image cho CSS.
- Bấm Sao chép ở dạng bạn cần rồi dán thẳng vào mã nguồn.
- Kiểm tra dòng kích thước sau mã hoá để cân nhắc có nên nhúng hay không.
Câu hỏi thường gặp
Vì sao chuỗi Base64 lại dài hơn tệp gốc?
Vì mỗi 3 byte dữ liệu nhị phân được biểu diễn bằng 4 ký tự văn bản, làm dung lượng tăng khoảng 33%. Đây là cái giá cố hữu của việc biểu diễn dữ liệu nhị phân bằng văn bản.
Khi nào nên dùng ảnh nhúng Base64?
Khi ảnh rất nhỏ và xuất hiện trên mọi trang — biểu tượng, hoa văn nền, ảnh giữ chỗ. Ngưỡng thường được khuyến nghị là dưới 10 KB. Trên mức đó, dùng tệp ảnh riêng sẽ nhanh hơn nhờ được cache.
Ảnh SVG có nhúng được không?
Được, nhưng với SVG thì nhúng thẳng mã SVG vào HTML thường tốt hơn — vừa ngắn hơn Base64, vừa cho phép đổi màu bằng CSS.