Hình ảnh tới Base64
Base64 mã hóa byte hình ảnh nhị phân dưới dạng văn bản ASCII mà bạn có thể dán vào tải trọng HTML img src, CSS url() hoặc JSON. Hữu ích cho các biểu tượng nhỏ, URI dữ liệu trong nguyên mẫu và API yêu cầu hình ảnh nội tuyến. Quá trình mã hóa diễn ra cục bộ — không có gì được tải lên.
Cách mã hóa hình ảnh sang Base64
1. Tải tệp hình ảnh lên (giữ kích thước nhỏ — dưới ~100 KB là phù hợp).
2. Sao chép chuỗi Base64 đã tạo hoặc URL dữ liệu đầy đủ.
3. Dán vào HTML, CSS hoặc cấu hình của bạn.
4. Kiểm tra trong môi trường mục tiêu — một số ứng dụng email giới hạn URI dữ liệu.
Ví dụ mã hóa
Biểu tượng nội tuyến trong email HTML
Biểu tượng PNG 2 KB dưới dạng data:image/png;base64,... tránh chặn hình ảnh bên ngoài trong các hộp thư đến nghiêm ngặt của công ty.
Nền CSS cho nguyên mẫu
Dán họa tiết Base64 vào bản demo một tệp không cần lưu trữ nội dung.
Bản cố thử nghiệm API
Bao gồm một JPEG Base64 nhỏ trong nội dung yêu cầu JSON để kiểm tra điểm cuối tải lên hình ảnh.
Khi nào nên dùng ảnh Base64
• Đối với các nội dung rất nhỏ trong đó một yêu cầu HTTP có chi phí cao hơn chi phí kích thước nội tuyến.
• Đối với HTML tệp đơn ngoại tuyến nguyên mẫu.
• Khi không thể sử dụng dịch vụ lưu trữ bên ngoài trong môi trường bị khóa.
Khi nào nên tránh hình ảnh Base64
• Đối với ảnh lớn — Base64 tăng ~33% và làm phồng bộ nhớ đệm HTML.
• Khi có bộ nhớ đệm CDN và srcset phản hồi.
• Khi nhiều ứng dụng email chặn URI dữ liệu — hãy dùng hình ảnh được lưu trữ thay vào đó.
Base64 trong ngân sách hiệu suất
Nội tuyến loại bỏ các chuyến đi khứ hồi nhưng ngăn trình duyệt lưu riêng hình ảnh vào bộ nhớ đệm. Sử dụng một cách tiết kiệm cho các biểu tượng nhỏ quan trọng trong màn hình đầu tiên; lười tải phương tiện lớn bình thường.
Những thắc mắc của ứng dụng email
Máy tính để bàn Outlook trước đây có hỗ trợ URI dữ liệu rất hạn chế. Kiểm tra Gmail, Apple Mail và Outlook trước khi dựa vào hình ảnh nội tuyến trong chiến dịch.
Bảo mật
Không dán Base64 không đáng tin cậy vào các trang mà không hiểu nội dung — đây vẫn là ngữ cảnh có thể thực thi được trong HTML. Chỉ mã hóa nội dung của riêng bạn.
Câu hỏi thường gặp
Tại sao Base64 lớn hơn tệp?
Mã hóa sử dụng 4 ký tự cho mỗi 3 byte — chi phí khoảng 33% cộng với tiền tố URL dữ liệu.
URL dữ liệu là gì?
Định dạng: data:image/png;base64,iVBORw0KG... — Loại MIME cộng với tải trọng được mã hóa.
Kích thước tối đa cho email?
Giữ tổng mức tăng trưởng thư dưới 10–20 KB; nhiều khách hàng cảm thấy khó chịu với những hình ảnh nội tuyến khổng lồ.
Giải mã trở lại tệp?
Sử dụng công cụ mã hóa/giải mã Base64 để đảo ngược ASCII sang nhị phân nếu cần.
Hình ảnh có được tải lên không?
Không — FileReader đọc cục bộ trong trình duyệt.
SVG to Base64?
Có thể dùng cho văn bản SVG nhỏ; Các định dạng raster phổ biến hơn đối với URI dữ liệu.