Cách chuyển ảnh sang Base64
- Thả ảnh vào khung phía trên hoặc bấm Chọn ảnh. File PNG, JPG, GIF, WebP, SVG, AVIF, ICO và BMP đều dùng được.
- Công cụ hiển thị ảnh xem trước, dung lượng ảnh và độ dài của chuỗi Base64.
- Chọn định dạng bạn cần bằng các thẻ: Data URL (toàn bộ chuỗi
data:image/…;base64,…), Base64 (chỉ phần đã mã hóa), HTML <img>, CSS (một dòngbackground-image) hoặc Markdown. - Với đoạn mã HTML và Markdown, hãy nhập văn bản thay thế mô tả ảnh, và để bật Thêm chiều rộng và chiều cao để trang không bị giật khi tải ảnh.
- Bấm Sao chép rồi dán đoạn mã vào nơi bạn cần. Chuỗi quá dài được rút gọn trong khung để trang chạy nhanh, nhưng nút Sao chép luôn chép toàn bộ nội dung.
Mọi thao tác chạy trong trình duyệt. Ảnh không bao giờ được tải lên, không cần đăng ký, và file gốc của bạn không bị thay đổi.
Ảnh Base64 là gì
Base64 là cách viết dữ liệu nhị phân bất kỳ chỉ bằng 64 ký tự văn bản an toàn: chữ cái, chữ số, dấu cộng và dấu gạch chéo. Cứ 3 byte của file thành 4 ký tự, vì vậy chuỗi dài hơn file khoảng một phần ba. Data URL đặt chuỗi đó sau một phần đầu ngắn, data:image/png;base64,, cho trình duyệt biết loại file và cách mã hóa. Trình duyệt coi nó như một địa chỉ ảnh bình thường, nên dùng được trong thuộc tính <img src>, trong url() của CSS và trong ảnh Markdown.
Quá trình chuyển đổi không nén lại gì cả. Các byte của file được mã hóa nguyên vẹn, nên giải mã chuỗi sẽ trả lại đúng bức ảnh ban đầu.
Khi nào nên nhúng ảnh trực tiếp
- Biểu tượng và logo nhỏ vài kilobyte, khi tiết kiệm được một yêu cầu tải đáng với phần dung lượng tăng thêm.
- Trang chỉ có một file như báo cáo đã lưu, bản demo mã nguồn hay file HTML gửi cho người khác, cần chạy được mà không kèm file nào khác.
- File CSS và JavaScript cần một ảnh giữ chỗ nhỏ hoặc họa tiết nền.
- Dữ liệu thử nghiệm và tài liệu, nơi một đoạn văn bản ngắn tiện hơn một file.
Hãy tránh dùng cho ảnh chụp và ảnh lớn: chuỗi dài hơn file một phần ba, làm HTML hoặc CSS tải và xử lý chậm hơn, và trình duyệt không thể lưu đệm ảnh tách khỏi trang. Nhiều ứng dụng email, trong đó có Gmail, cũng không hiển thị ảnh data URL. Nếu trang web của bạn dùng Content Security Policy, cần cho phép data: trong img-src.
Ví dụ thực tế
Bạn có một biểu tượng PNG nặng 3.000 byte, kích thước 40×20 điểm ảnh, và muốn đặt nó trong một nút bấm của file HTML duy nhất. Thả ảnh vào công cụ: chuỗi Base64 dài 4.000 ký tự, nhiều hơn file 33%, vì 3.000 ÷ 3 × 4 = 4.000. Ở thẻ HTML, nhập văn bản thay thế Tải về rồi sao chép kết quả, trông như sau:
<img src="data:image/png;base64,iVBORw0KGgo…" alt="Tải về" width="40" height="20">
Dán vào trong nút bấm là biểu tượng trở thành một phần của trang, không cần đăng tải thêm file nào. Nếu muốn dùng làm ảnh nền, hãy sang thẻ CSS và dán background-image: url("data:…"); vào quy tắc của bạn.
Mẹo và các sự cố thường gặp
- Ảnh SVG. SVG vốn là văn bản nên có thể dùng data URL đã escape không cần Base64 và ngắn hơn, nhưng bản Base64 chạy ở mọi nơi và đơn giản nhất.
- Giảm dung lượng trước. Nếu chuỗi Base64 quá dài, hãy nén hoặc thu nhỏ ảnh trước khi chuyển.
- Kiểm tra loại ảnh. Phần đầu data URL phải ghi đúng loại ảnh; công cụ này tự đặt theo file của bạn.
- Xuống dòng. Data URL phải nằm trên một dòng. Hãy sao chép nguyên văn, không thêm khoảng trắng hay xuống dòng.
- Khả năng tiếp cận. Luôn đặt văn bản thay thế có ích, hoặc để trống với ảnh chỉ để trang trí.
Câu hỏi thường gặp
Ảnh của tôi có bị tải lên máy chủ không?
Không. File được đọc và chuyển đổi ngay trong trình duyệt, trên chính thiết bị của bạn. Ảnh và chuỗi Base64 không bao giờ rời khỏi máy.
Data URL Base64 là gì?
Đó là toàn bộ bức ảnh được viết thành văn bản dạng data:image/png;base64,… để đặt thẳng vào thuộc tính src của HTML, url() trong CSS hoặc ảnh Markdown, thay vì liên kết đến một file riêng.
Vì sao chuỗi Base64 dài hơn file ảnh?
Base64 viết mỗi 3 byte thành 4 ký tự, nên chuỗi dài hơn file khoảng 33%. Ảnh nhúng cũng không được trình duyệt lưu đệm riêng, vì vậy chỉ nên dùng cho ảnh nhỏ như biểu tượng và để ảnh lớn ở dạng file bình thường.
Có dùng data URL trong email được không?
Thường là không. Nhiều ứng dụng email, trong đó có Gmail, không hiển thị ảnh nhúng dạng data URL. Với email HTML, hãy dùng liên kết đến ảnh đã đăng tải hoặc đính kèm ảnh.
Chất lượng ảnh có thay đổi không?
Không. Các byte của file được mã hóa nguyên vẹn, không nén lại, nên ảnh giải mã từ chuỗi Base64 giống hệt ảnh gốc.