Chuyển đổi ảnh ↔ Base64
Biến ảnh thành data URL Base64 và ngược lại — kèm đoạn mã CSS và HTML
Về công cụ này
Kéo thả, chọn hoặc dán một tấm ảnh và nhận về dạng Base64 của nó ở mọi kiểu bạn có thể cần: một data URL dùng được ngay, một khai báo background-image cho CSS, một thẻ <img> hoàn chỉnh kèm kích thước gốc, và phần Base64 thô. Chiều ngược lại cũng chạy — dán một data URL hay một khối Base64 trần vào, ảnh sẽ được giải mã, xem trước và tải về thành tệp.
Định dạng được nhận ra từ các byte đặc trưng chứ không phải từ phần mở rộng tệp hay kiểu MIME khai báo, nên một tệp PNG bị đổi tên thành .jpg (hoặc một data URL gắn nhãn sai) vẫn chuyển đổi đúng. Bảng kích thước rất sòng phẳng về cái giá phải trả: Base64 làm dữ liệu phình thêm khoảng một phần ba, và kích thước sau mã hóa hiện ngay cạnh bản gốc để bạn tự quyết có đáng nhúng thẳng hay không.
Khác với đa số trang chuyển ảnh sang Base64, ở đây không có gì được tải lên — tệp được đọc bằng FileReader API của trình duyệt và mã hóa ngay trong trang. Nhờ vậy nó an toàn cho ảnh chụp bảng điều khiển nội bộ, ảnh sản phẩm chưa ra mắt, hay bất cứ thứ gì bạn không muốn trao cho máy chủ của người lạ.
Câu hỏi thường gặp
- Khi nào nên nhúng ảnh dạng Base64 thay vì liên kết tới tệp?
- Khi ảnh nhỏ (đại khái dưới 10 KB), hiếm khi thay đổi, và nếu để riêng thì lại tốn thêm một request HTTP — chẳng hạn icon, logo trong email, hay tài liệu HTML một tệp. Với ảnh lớn hơn thì để riêng vẫn hơn: nó được lưu đệm độc lập, tải song song, và không làm HTML hay CSS của bạn phình thêm 33%.
- Vì sao bản Base64 lớn hơn tệp gốc khoảng một phần ba?
- Base64 biểu diễn mỗi 3 byte nhị phân bằng 4 ký tự ASCII, tức phần dôi ra +33% mang tính cấu trúc (cộng tối đa hai ký tự đệm). Gzip hay Brotli trên máy chủ giành lại được một phần, nhưng độ phình vốn nằm sẵn trong phép mã hóa — nó đánh đổi kích thước để lấy khả năng nhúng dữ liệu nhị phân vào văn bản.
- Tôi có giải mã được một data URL nhặt từ stylesheet hay HTML không?
- Được — hãy chuyển sang chế độ Base64 → ảnh rồi dán nguyên cả cụm, kể cả tiền tố data:. Những data URL chứa SVG mã hóa phần trăm (loại không có ;base64) cũng giải mã được, còn ngắt dòng hay khoảng trắng bên trong phần dữ liệu sẽ tự động bị loại bỏ. Kết quả hiện ra ngay trong trang và tải về với đúng phần mở rộng.
- Công cụ có dùng được với SVG, GIF và ICO không, hay chỉ PNG với JPEG?
- Mọi thứ mà bộ dò nhận ra đều chuyển được sang Base64: PNG, JPEG, WebP, GIF, SVG, BMP, ICO và AVIF. Riêng với SVG, hãy cân nhắc rằng mã XML gốc nhúng thẳng thường nhỏ hơn và dễ đọc hơn — mã hóa SVG sang Base64 chủ yếu có lý khi việc đặt dấu nháy hay thoát ký tự trở nên phiền phức.