Base64 Image Encoder/Decoder

Tính năng nổi bật

• Chọn ảnh từ máy và nhận ngay chuỗi data URI đầy đủ, nhận PNG, JPG, GIF và WebP
• Hiện tên tệp, dung lượng tính theo kilobyte và kiểu MIME của ảnh vừa chọn
• Ba nút sao chép riêng: chuỗi thô, data URI đầy đủ, và dòng CSS background-image dùng được ngay
• Dán chuỗi Base64 hoặc data URI vào để xem trước ảnh, tự nhận diện cả hai dạng
• Tải ảnh đã giải mã về máy dưới dạng tệp PNG
• Xem trước ảnh ngay khi dán, phát hiện chuỗi hỏng vì ảnh sẽ không hiện lên
• Xử lý hoàn toàn trong trình duyệt bằng bộ đọc tệp sẵn có, không gửi ảnh đi đâu

Base64 giải quyết vấn đề gì với ảnh

Có những nơi chỉ nhận được văn bản chứ không nhận được tệp nhị phân: một trường trong JSON gửi qua API, một ô trong tệp cấu hình, một khối CSS nội tuyến trong thư điện tử, hay một tệp HTML đơn lẻ cần gửi cho khách mà không kèm thư mục ảnh. Base64 là cách biểu diễn dữ liệu nhị phân bằng 64 ký tự an toàn, nhờ đó ảnh đi được qua những đường ống vốn chỉ dành cho chữ. Trong công việc hằng ngày, ba tình huống hay gặp nhất là nhúng biểu tượng nhỏ vào CSS để bớt một lượt tải, gắn ảnh chữ ký vào mẫu thư điện tử, và dựng bản mẫu HTML một tệp gửi qua tin nhắn. Cái giá phải trả là chuỗi Base64 luôn nặng hơn tệp gốc, nên đây là kỹ thuật dùng có chọn lọc chứ không phải cách tối ưu ảnh.

Lợi ích khi sử dụng

• •Nhúng được ảnh vào nơi chỉ nhận văn bản như JSON, YAML hay mẫu thư điện tử
• •Gửi một tệp HTML duy nhất mà ảnh vẫn hiển thị, không cần kèm thư mục
• •Lấy sẵn dòng CSS đúng cú pháp thay vì tự ghép chuỗi và dễ sai dấu nháy
• •Kiểm tra nhanh một chuỗi Base64 lạ xem nó thật sự là ảnh gì trước khi dùng
• •Ảnh chưa công bố vẫn an toàn vì không có bước tải lên máy chủ nào

Cách chuyển ảnh sang Base64 và ngược lại

1. 1Ở tab ảnh sang Base64, bấm vào khung nét đứt để chọn tệp ảnh từ máy của bạn.
2. 2Đọc thông tin tệp hiện ra gồm tên, dung lượng và kiểu MIME, rồi xem chuỗi kết quả trong ô bên phải.
3. 3Chọn đúng nút sao chép theo nhu cầu: chuỗi thô để đưa vào trường JSON, data URI để dán vào thuộc tính src, hoặc dòng CSS để dán thẳng vào biểu định kiểu.
4. 4Muốn làm chiều ngược lại, chuyển sang tab Base64 sang ảnh rồi dán chuỗi vào ô bên trái.
5. 5Kiểm tra ảnh hiện ở khung xem trước, nếu đúng thì bấm tải ảnh để lưu tệp về máy.

Cấu trúc một data URI và ba dạng chuỗi khác nhau

Một data URI đầy đủ có bốn phần nối liền: từ khóa data kèm dấu hai chấm, kiểu MIME của tệp, từ khóa base64 sau dấu chấm phẩy, rồi dấu phẩy và cuối cùng là chuỗi mã hóa. Ví dụ một ảnh PNG bắt đầu bằng data hai chấm image gạch chéo png chấm phẩy base64 phẩy rồi tới chuỗi ký tự. Ba nút sao chép trong công cụ cho ba dạng khác nhau và dùng nhầm là lỗi phổ biến. Nút sao chép Base64 cho chuỗi mà bộ đọc tệp trả về, tức đã có sẵn phần tiền tố data URI ở đầu. Nút sao chép data URI cho cùng chuỗi đó, và nếu bạn dán vào một chuỗi thô chưa có tiền tố thì nó tự thêm phần tiền tố của PNG vào. Nút sao chép CSS bọc data URI trong cú pháp url và dấu nháy đơn kèm thuộc tính background-image, dán vào biểu định kiểu là chạy. Khi cần đưa vào một trường JSON mà phía nhận đã tự biết kiểu ảnh, nhiều hệ thống chỉ muốn phần chuỗi sau dấu phẩy, lúc đó bạn phải tự cắt bỏ phần tiền tố.

Vì sao chuỗi Base64 luôn nặng hơn tệp gốc

Base64 biểu diễn mỗi 3 byte dữ liệu gốc bằng 4 ký tự, tức mỗi ký tự chỉ mang 6 bit thông tin thay vì 8. Tỷ lệ đó làm dữ liệu phình ra đúng một phần ba, cộng thêm phần đệm bằng dấu bằng ở cuối và phần tiền tố data URI. Trên thực tế bạn nên tính chuỗi kết quả nặng khoảng 1,33 tới 1,37 lần tệp gốc: ảnh 30 kilobyte cho chuỗi cỡ 40 kilobyte, ảnh 300 kilobyte cho chuỗi cỡ 400 kilobyte. Đây là lý do không nên nhúng ảnh lớn. Một điểm nữa ít người để ý: ảnh nhúng trong CSS hoặc HTML không được trình duyệt lưu đệm riêng như một tệp độc lập, nó bị lưu đệm chung với tệp chứa nó. Nghĩa là mỗi lần bạn sửa một dòng CSS, toàn bộ ảnh nhúng bên trong cũng phải tải lại. Với ảnh tách riêng thì ngược lại, chỉ tệp CSS được tải lại còn ảnh vẫn dùng bản đã lưu. Kết luận thực tế là chỉ nhúng những ảnh nhỏ và gần như không bao giờ thay đổi.

Khi nào nên nhúng và khi nào nên để ảnh riêng

Nên nhúng khi ảnh rất nhỏ, thường dưới khoảng 5 kilobyte, và xuất hiện ở phần hiển thị đầu tiên của trang, ví dụ biểu tượng mũi tên, hình nền lặp, hay logo đơn sắc; ở kích thước đó phần dữ liệu phình thêm còn nhỏ hơn chi phí thiết lập một lượt kết nối riêng. Nên nhúng khi tệp phải đứng độc lập: một trang HTML gửi qua tin nhắn, một báo cáo xuất ra một tệp duy nhất, một chữ ký thư điện tử. Nên nhúng khi ảnh phải đi kèm dữ liệu qua API dưới dạng JSON, chẳng hạn ảnh chụp giấy tờ gửi lên trong một biểu mẫu. Ngược lại, nên để ảnh riêng khi ảnh lớn, khi ảnh dùng lại ở nhiều trang, khi nội dung có thể thay đổi, hoặc khi bạn cần trình duyệt tải song song và tải trễ những ảnh nằm dưới màn hình. Với ảnh nội dung của website, việc để riêng còn cần thiết vì ảnh nhúng trong CSS không có địa chỉ riêng nên không xuất hiện được trong kết quả tìm kiếm ảnh và không đặt được thuộc tính mô tả thay thế.

SVG là ngoại lệ đáng lưu ý

Với ảnh vector dạng SVG, mã hóa Base64 thường là lựa chọn kém. Bản thân SVG đã là văn bản, nên bạn nhúng thẳng mã của nó vào data URI mà không cần qua Base64, chỉ cần thay vài ký tự dành riêng như dấu thăng và dấu nhỏ hơn bằng dạng mã hóa phần trăm. Cách này cho chuỗi ngắn hơn bản Base64 khoảng 20 tới 30 phần trăm, đồng thời còn nén tốt hơn nhiều khi máy chủ bật nén gzip, vì gzip xử lý rất hiệu quả văn bản có cấu trúc lặp trong khi chuỗi Base64 gần như ngẫu nhiên và nén được rất ít. Ngoài ra SVG nhúng dạng văn bản còn đọc được và sửa được trực tiếp trong biểu định kiểu, ví dụ đổi màu tô. Một lưu ý bảo mật: SVG có thể chứa mã kịch bản, nên đừng nhúng tệp SVG lấy từ nguồn không tin cậy vào trang của bạn, nhất là khi tệp đó do người dùng tải lên. Riêng công cụ này nhận SVG như một tệp ảnh và mã hóa Base64 bình thường, nên nếu bạn cần dạng mã hóa phần trăm thì phải xử lý bằng công cụ khác.

Những chỗ dễ sai khi giải mã chuỗi Base64 về ảnh

Lỗi hay gặp nhất là chuỗi bị cắt cụt khi sao chép, nhất là khi lấy từ một tệp nhật ký hoặc từ khung xem mã có giới hạn hiển thị. Chuỗi thiếu đuôi vẫn nhìn giống chuỗi đủ nhưng ảnh sẽ hỏng hoặc chỉ hiện được nửa trên. Lỗi thứ hai là chuỗi bị chèn ký tự xuống dòng khi đi qua thư điện tử hoặc tệp cấu hình; ở dạng này phần lớn trình giải mã vẫn chấp nhận nhưng một số nơi thì không, nên hãy nối lại thành một dòng. Lỗi thứ ba là nhầm giữa Base64 tiêu chuẩn và biến thể an toàn cho địa chỉ mạng, trong đó dấu cộng và dấu gạch chéo được thay bằng dấu trừ và gạch dưới; chuỗi lấy từ một mã thông báo web thường ở biến thể này và cần đổi ngược lại trước khi giải mã. Lỗi thứ tư là kiểu MIME không khớp: công cụ mặc định coi chuỗi thô là PNG, nên một ảnh JPEG dán vào dạng thô có thể không hiện. Cách xử lý là dán data URI đầy đủ có ghi đúng kiểu, hoặc tự thêm phần tiền tố tương ứng vào đầu chuỗi. Tệp tải về luôn mang đuôi PNG dù nội dung là định dạng khác, nên bạn có thể cần đổi lại đuôi cho đúng.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• chuyển ảnh sang base64
• base64 sang ảnh online
• mã hóa ảnh base64
• giải mã base64 thành ảnh
• data uri là gì
• nhúng ảnh vào css
• background image base64 css
• base64 image encoder online
• chuyển png sang base64
• chuyển jpg sang base64
• base64 làm ảnh nặng bao nhiêu
• nhúng ảnh vào email html
• gửi ảnh qua json api
• svg data uri thay vì base64
• base64 có bảo mật không
• xem trước chuỗi base64
• tải ảnh từ chuỗi base64
• ảnh base64 và seo
• công cụ base64 miễn phí
• chuyển đổi ảnh không cần upload