Cách chuyển đổi ảnh sang Base64 hoạt động
Toàn bộ quá trình chuyển đổi chạy trong trình duyệt của bạn bằng File API và hàm btoa tích hợp sẵn — không có thư viện codec nào được tải xuống và không có máy chủ nào nhìn thấy ảnh. Đây là quy trình từ đầu đến cuối:
- Bạn kéo hoặc chọn một ảnh. Trình duyệt đọc nó dưới dạng Blob từ ổ đĩa cục bộ, không bao giờ sao chép byte lên máy chủ.
- Tệp được đọc theo từng khối 1 MB và các byte của mỗi khối được nối vào một chuỗi nhị phân. Việc chia khối giúp các ảnh lớn không làm tràn ngăn xếp lời gọi JavaScript.
- Chuỗi nhị phân được truyền cho btoa, hàm này ánh xạ mỗi ba byte thành bốn ký tự Base64 từ bảng chữ cái A–Z, a–z, 0–9, cộng /.
- Loại MIME của tệp (image/png, image/jpeg, v.v.) được đọc từ đối tượng File và được thêm vào làm tiền tố data:, tạo ra data:image/…;base64,… URI hoàn chỉnh.
- Trang lắp ráp bốn đầu ra từ URI đó — data URI đầy đủ, Base64 thô không có tiền tố, thẻ
sẵn sàng dán, và đoạn CSS background-image — mỗi cái có nút sao chép riêng.
Tại sao mã hóa ảnh dưới dạng data URI?
- Nhúng nội tuyến một logo hoặc biểu tượng nhỏ dưới dạng data URI loại bỏ một yêu cầu mạng riêng biệt, giúp trang hoặc email hiển thị khung đầu tiên nhanh hơn một chút.
- Một trang hoặc stylesheet có ảnh nội tuyến là tự đủ. Nó hoạt động offline và bạn có thể di chuyển nó mà không cần kéo theo thư mục tài nguyên.
- Nhiều ứng dụng email chặn ảnh từ xa theo mặc định. Nhúng logo dưới dạng Base64 nội tuyến và nó hiển thị ngay khi mở thư, không cần tải từ xa.
- Quá trình mã hóa diễn ra hoàn toàn trong trình duyệt, vì vậy ảnh nhạy cảm không bao giờ đến máy chủ của bên thứ ba. Điều này bao gồm ảnh chụp màn hình, quét giấy tờ tùy thân và sơ đồ nội bộ.
Các ứng dụng phổ biến cho ảnh Base64
Data URI xuất hiện ở bất cứ đâu một ảnh đủ nhỏ để yêu cầu riêng biệt tốn kém hơn lạm phát kích thước ~33% mà Base64 thêm vào. Ba mẫu xuất hiện liên tục:
- Biểu tượng CSS nội tuyến: sprite hoặc biểu tượng 1–2 KB được thả vào stylesheet dưới dạng background-image: url(data:…) để quy tắc hoàn toàn tự đủ.
- Chữ ký email và bản tin: logo được nhúng dưới dạng
với src là data URI hiển thị ngay cả khi ứng dụng email chặn ảnh từ xa.
- Nhúng nội tuyến bằng công cụ build: các bundler như Webpack và Vite tự động nhúng tài nguyên dưới ngưỡng byte, và công cụ này cho phép bạn xem trước chính xác đầu ra đó trông như thế nào.
Ảnh Base64 trông như thế nào?
Lấy một PNG trong suốt 1×1 nhỏ. Các byte thô của nó chỉ có 67 byte, nhưng khi mã hóa nó trở thành chuỗi iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII=, và data URI đầy đủ là data:image/png;base64,iVBORw0KGgo…. Hãy chú ý rằng dạng được mã hóa lớn hơn khoảng một phần ba so với bản gốc. Đó là sự đánh đổi để làm cho dữ liệu nhị phân an toàn khi nhúng trực tiếp vào văn bản.
Ảnh của tôi có được tải lên đâu đó không?
Không. Quá trình chuyển đổi sử dụng File API của trình duyệt và hàm btoa gốc để mã hóa ảnh hoàn toàn trên thiết bị của bạn. Bạn có thể tự xác minh điều này: mở công cụ phát triển của trình duyệt, chuyển sang bảng Mạng và chuyển đổi một ảnh — các yêu cầu duy nhất bạn thấy là tải trang và bất kỳ quảng cáo nào. Không có gì có hình dạng ảnh được gửi đến máy chủ, điều này làm cho nó an toàn cho ảnh chụp màn hình, tài liệu ID và sơ đồ nội bộ.
Tại sao đầu ra Base64 lớn hơn ảnh gốc của tôi?
Base64 biểu diễn mỗi ba byte dữ liệu nhị phân bằng bốn ký tự ASCII, vì vậy văn bản được mã hóa lớn hơn khoảng 33% so với tệp nguồn. Số đọc kích thước data URI trên trang này hiển thị độ dài chính xác đã tăng. Đó là lý do tại sao data URI chỉ có ý nghĩa với các ảnh nhỏ — nhúng nội tuyến ảnh 2 MB sẽ làm phình HTML hoặc CSS của bạn nhiều hơn so với một yêu cầu riêng biệt. Theo nguyên tắc chung, nhúng nội tuyến các ảnh dưới khoảng 4 KB và liên kết đến bất kỳ thứ gì lớn hơn.
Tôi có thể chuyển đổi những định dạng ảnh nào?
Bất kỳ định dạng nào trình duyệt nhận ra là ảnh đều hoạt động, vì công cụ đọc byte thô thay vì giải mã hình ảnh. Điều này bao gồm PNG, JPEG, GIF, WebP, SVG và BMP. Loại MIME được đọc trực tiếp từ tệp, vì vậy tiền tố data: luôn khớp với định dạng thực — JPEG tạo ra data:image/jpeg và SVG tạo ra data:image/svg+xml. SVG xứng đáng có ghi chú đặc biệt: nó đã là văn bản, vì vậy đối với SVG data URI mã hóa URL thường nhỏ hơn phiên bản Base64, mặc dù công cụ này tạo ra dạng Base64 để nhất quán.
Kéo ảnh vào, sao chép data URI hoặc đoạn mã bạn cần và dán vào mẫu HTML, CSS hoặc email. Mỗi byte ở lại trên thiết bị của bạn. Không tải lên, không tài khoản, không mất thời gian chờ máy chủ.