Bộ giải mã Hình ảnh Base64 | Giải mã & Xem trước Hình ảnh Trực tuyến

Bộ giải mã hình ảnh base64 là gì?

Bộ giải mã hình ảnh base64 là công cụ chuyển một chuỗi văn bản được mã hóa bằng base64 trở lại thành hình ảnh. Base64 là cách biểu diễn dữ liệu nhị phân, chẳng hạn các byte của tệp hình ảnh, chỉ bằng 64 ký tự văn bản thuần túy (chữ cái, chữ số, +, / và = để đệm). Trình duyệt, email và nhiều API lưu trữ hình ảnh theo cách này để hình ảnh có thể được truyền bên trong văn bản thuần túy thay vì dưới dạng tệp riêng. Bộ giải mã đảo ngược quá trình đó: dán chuỗi vào, và hình ảnh gốc sẽ xuất hiện.

Định dạng URL dữ liệu

Trên web, hình ảnh base64 thường được viết dưới dạng URL dữ liệu. Mẫu là:

Ví dụ:

Mỗi phần có một chức năng:

• data: đánh dấu đây là URL dữ liệu, không phải địa chỉ web thông thường.
• image/png là kiểu MIME, cho trình duyệt biết đây là loại tệp nào.
• ;base64 cho biết dữ liệu sau dấu phẩy được mã hóa bằng base64.
• Mọi thứ sau dấu phẩy chính là hình ảnh đã mã hóa.

Cách bộ giải mã hoạt động

Việc giải mã diễn ra qua bốn bước.

1. Công cụ kiểm tra xem chuỗi có bắt đầu bằng data: hay không. URL dữ liệu chỉ định một loại phương tiện không phải hình ảnh, chẳng hạn data:text/plain, sẽ bị từ chối ngay vì không thể hiển thị dưới dạng hình ảnh.
2. Công cụ loại bỏ mọi dấu cách, tab hoặc ngắt dòng, vì các chuỗi base64 dài đôi khi được chia thành nhiều dòng. Payload sử dụng mã hóa phần trăm thay vì base64, vốn cũng được RFC 2397 cho phép, sẽ được giữ nguyên.
3. Công cụ giải mã văn bản base64 trở lại thành các byte thô.
4. Công cụ xem xét vài byte đầu tiên của kết quả. Mọi định dạng hình ảnh phổ biến đều bắt đầu bằng một chuỗi byte cố định, gọi là chữ ký hoặc “số ma thuật”. Tệp PNG bắt đầu bằng 89 50 4E 47, tệp JPEG bắt đầu bằng FF D8 FF, v.v. Bộ giải mã đối chiếu các chữ ký này và gắn cho hình ảnh loại tương ứng.

Các byte được ưu tiên hơn nhãn. Nếu URL dữ liệu ghi data:image/png nhưng các byte bắt đầu bằng FF D8 FF, bộ giải mã dựng lại URL thành data:image/jpeg, để chuỗi do nút “Sao chép URL hình ảnh” cung cấp không bao giờ mô tả sai nội dung của chính nó.

Nếu chuỗi không có tiền tố data:, bộ giải mã coi đó là dữ liệu base64 thô, giải mã rồi đọc chữ ký theo cách tương tự. Nếu các byte không khớp với bất kỳ chữ ký hình ảnh nào đã biết và cũng không giống văn bản SVG, bộ giải mã báo cáo rằng chuỗi dường như không phải là hình ảnh. Công cụ không đoán định dạng hoặc chuyển sang bất kỳ kiểu mặc định nào.

SVG được xử lý khác vì SVG là định dạng văn bản (XML), không phải nhị phân, nên không có chữ ký byte cố định. Bộ giải mã kiểm tra 1024 byte đầu tiên của văn bản đã giải mã để tìm thẻ <svg, khai báo XML như <?xml version="1.0"?> theo sau bởi thẻ đó, hoặc khai báo kiểu tài liệu SVG theo sau bởi thẻ đó. Dấu thứ tự byte ở ngay đầu, được một số trình soạn thảo thêm vào tệp UTF-8, sẽ bị bỏ qua. Vì SVG không thể được nhận diện từ chữ ký byte, URL dữ liệu khai báo image/svg+xml sẽ giữ nguyên kiểu đã khai báo.

Công thức tính kích thước hình ảnh base64

Base64 chuyển mỗi 3 byte dữ liệu nhị phân thành 4 ký tự văn bản. Công thức tính độ dài sau mã hóa là:

Các ký hiệu ⌈ ⌉ có nghĩa là “làm tròn lên đến số nguyên tiếp theo”, vì base64 luôn hoạt động theo các nhóm 4 ký tự và đệm nhóm còn thiếu bằng các dấu =.

Với các tệp lớn, mức này tương đương khoảng 33% tăng kích thước, vì 4 ÷ 3 ≈ 1,33. Tệp nhỏ có thể cho thấy mức tăng phần trăm lớn hơn, vì việc làm tròn lên nhóm 4 ký tự tiếp theo có ảnh hưởng lớn hơn khi dữ liệu ban đầu không nhiều.

Ví dụ minh họa

Ví dụ PNG ở trên giải mã thành 85 byte dữ liệu hình ảnh. Áp dụng công thức:

Chuỗi base64 thực sự dài 116 ký tự, đúng như tính toán. Đây là mức tăng 36% so với 85 byte ban đầu (116 ÷ 85 ≈ 1,36), cao hơn một chút so với mức 33% vì tệp quá nhỏ.

Các định dạng hình ảnh được hỗ trợ

Bộ giải mã đọc chữ ký byte của dữ liệu đã giải mã để xác định định dạng. Công cụ nhận diện các loại sau:

Cách giải mã hình ảnh base64

1. Sao chép chuỗi base64, có hoặc không có tiền tố data:image/..., từ HTML, CSS, phản hồi API hoặc email.
2. Dán chuỗi vào ô nhập.
3. Hình ảnh được giải mã tự động một lúc sau khi ngừng nhập hoặc khi nhấn nút giải mã.
4. Hình ảnh đã giải mã xuất hiện trong vùng xem trước. Có thể sao chép URL dữ liệu bằng nút “Sao chép URL hình ảnh”, và có thể lưu chính hình ảnh bằng cách nhấp chuột phải vào hình ảnh trong vùng xem trước rồi chọn lưu hình ảnh, vì trình duyệt hiển thị nó như một phần tử hình ảnh thông thường.

Các cách sử dụng phổ biến của hình ảnh base64

• Nhúng vào HTML, CSS hoặc JavaScript: đưa trực tiếp dữ liệu hình ảnh vào mã giúp tránh phải yêu cầu một tệp riêng.
• Mẫu email: một số ứng dụng email mặc định chặn hình ảnh được liên kết từ bên ngoài, nhưng hình ảnh base64 được nhúng vẫn hiển thị.
• Công cụ HTML một tệp: toàn bộ trang, bao gồm cả hình ảnh, có thể được đóng gói trong một tệp độc lập duy nhất.
• Phản hồi API: hình ảnh có thể được truyền bên trong payload JSON thay vì cần một endpoint riêng.
• Nền và biểu tượng CSS: các biểu tượng nhỏ đôi khi được viết trực tiếp vào biểu định kiểu dưới dạng URL dữ liệu.

Đánh đổi khi sử dụng hình ảnh base64

Mã hóa base64 thuận tiện nhưng không miễn phí:

• Văn bản đã mã hóa lớn hơn khoảng một phần ba so với tệp gốc.
• Trình duyệt không thể lưu vào bộ nhớ đệm hình ảnh được nhúng theo cách lưu tệp được liên kết, nên hình ảnh được tải xuống lại mỗi khi trang hoặc biểu định kiểu chứa nó được tải.
• Trình duyệt phải giải mã văn bản base64 trước khi có thể hiển thị hình ảnh, việc này cần thêm một lượng nhỏ xử lý.
• Vì kích thước tăng và mất khả năng lưu vào bộ nhớ đệm, việc nhúng base64 phù hợp với hình ảnh nhỏ như biểu tượng và logo đơn giản. Ảnh lớn thường nên được cung cấp dưới dạng tệp hình ảnh thông thường.

Các câu hỏi thường gặp

Bộ giải mã hình ảnh base64 là gì?

Đây là công cụ chuyển một chuỗi văn bản được mã hóa bằng base64 trở lại thành hình ảnh có thể xem được, chẳng hạn tệp PNG, JPEG, GIF, WebP, BMP hoặc SVG.

Làm cách nào để giải mã hình ảnh base64?

Dán chuỗi base64, có hoặc không có tiền tố data:image/..., vào bộ giải mã. Công cụ sẽ đọc chuỗi, giải mã và hiển thị hình ảnh kết quả.

Có thể giải mã chuỗi base64 mà không có tiền tố URL dữ liệu không?

Có. Bộ giải mã coi đó là dữ liệu base64 thô, giải mã các byte rồi đọc vài byte đầu tiên để nhận diện định dạng từ chữ ký, chẳng hạn PNG, JPEG, GIF, WebP, BMP hoặc ICO. SVG được nhận diện bằng cách tìm thẻ <svg trong văn bản đã giải mã. Nếu không có định dạng nào khớp, bộ giải mã báo cáo rằng chuỗi dường như không phải là hình ảnh thay vì đoán một định dạng.

Vì sao hình ảnh base64 của tôi không giải mã được?

Ba nguyên nhân chiếm phần lớn các trường hợp. Chuỗi có thể chứa các ký tự nằm ngoài bảng chữ cái base64 tiêu chuẩn, gồm A–Z, a–z, 0–9, +, / và =; biến thể base64url được dùng trong một số mã thông báo web thay thế bằng - và _, nên không được chấp nhận. Chuỗi có thể đã bị cắt giữa chừng, khiến độ dài lớn hơn một đơn vị so với bội số của bốn, điều không bao giờ xảy ra với chuỗi base64 hợp lệ. Hoặc các byte đơn giản không thuộc một trong các định dạng hình ảnh được hỗ trợ. Việc thiếu phần đệm = tự nó không phải vấn đề, và dấu cách hoặc ngắt dòng sẽ được loại bỏ trước khi giải mã.

Mã hóa base64 có phải là một dạng bảo mật hoặc mã hóa không?

Không. Base64 chỉ là cách biểu diễn byte dưới dạng văn bản; nó không che giấu điều gì. Bất kỳ ai cũng có thể giải mã chuỗi base64 trong vài giây bằng một công cụ miễn phí, nên không bao giờ được dùng nó để bảo vệ hình ảnh riêng tư hoặc dữ liệu khác.

Chuỗi base64 lớn hơn hình ảnh gốc bao nhiêu?

Với các tệp lớn, chuỗi lớn hơn khoảng một phần ba, vì mỗi 3 byte dữ liệu gốc trở thành 4 ký tự văn bản. Hình ảnh 100 KB sẽ trở thành khoảng 133 KB sau khi mã hóa. Hình ảnh nhỏ có thể cho thấy mức tăng phần trăm cao hơn đôi chút do việc làm tròn.

Lịch sử

Base64 bắt nguồn từ các lược đồ mã hóa được xây dựng vào những năm 1970 và 1980 để gửi dữ liệu nhị phân qua các hệ thống thư chỉ xử lý văn bản thuần túy; chúng được chuẩn hóa cho email trong RFC 989 (1987) và sau đó là RFC 1421. Việc dùng mã hóa này để nhúng hình ảnh vào trang web trở nên khả thi sau khi lược đồ URL data: được định nghĩa trong RFC 2397 (1998), và trở nên phổ biến hơn vào giữa những năm 2000 khi các nhà phát triển tìm cách giảm số yêu cầu HTTP riêng biệt, đặc biệt trên các kết nối di động chậm.

Tài liệu tham khảo

1. RFC 4648: Các phương thức mã hóa dữ liệu Base16, Base32 và Base64
2. RFC 2397: Lược đồ URL “data”
3. Tài liệu MDN Web: URL dữ liệu
4. Tiêu chuẩn WHATWG về nhận diện MIME