Ảnh sang Base64
Chuyển ảnh thành data URI, kèm sẵn đoạn CSS và HTML để dán.
Việc mã hoá diễn ra ngay trong trình duyệt. Ảnh không bao giờ được tải lên, thứ bạn dán vào để giải mã cũng vậy.
Data URI đặt luôn tấm ảnh vào bên trong tài liệu đang dùng nó, dưới dạng văn bản. Thay vì một thuộc tính `src` trỏ tới tệp mà trình duyệt phải đi lấy về, các byte được ghi thẳng vào trang, mã hoá bằng Base64. Đó là lời giải cho một bài toán hẹp nhưng có thật: một trang HTML gói gọn trong đúng một tệp, một mẫu email, một tệp CSS không được phép phụ thuộc vào lượt tải thứ hai.
Tìm hiểu thêm về Ảnh sang Base64
Công cụ này mã hoá ảnh thành mọi dạng bạn có thể cần — chuỗi Base64 thô, data URI đầy đủ, một dòng `background-image` cho CSS, một thẻ `<img>` và một ảnh Markdown — để bạn chép đúng dạng hợp với nơi nó sẽ đến thay vì tự ghép bằng tay.
Nó cũng nói thật về lúc không nên làm vậy. Base64 chứa ba byte trong bốn ký tự, nên dạng mã hoá luôn lớn hơn tệp gốc chừng một phần ba, và data URI thì không được lưu đệm riêng: nó được tải lại cùng mọi trang có tham chiếu tới nó, và chỉ cần đổi ảnh là cả trang đổi theo. Quá vài kilobyte thì một tệp riêng đơn giản là tốt hơn, và công cụ này nói thẳng ra chứ không để bạn phát hiện qua một báo cáo hiệu năng.
Chỗ nó thực sự có lợi là những thứ nhỏ: một biểu tượng, một dải màu, một điểm ảnh đệm, một cái logo trong email phải hiện được cả khi ảnh bị chặn. Dưới một hai kilobyte, tiết kiệm hẳn một lượt đi về thường đáng giá hơn phần dôi ra một phần ba kia.
Chiều ngược lại cũng chạy. Dán một data URI bạn nhặt được trong tệp CSS hay trong một bản xuất, ảnh sẽ được xem trước và tải về được. Dán bị cụt là chuyện thường gặp — trình soạn thảo hay ngắt dòng và cắt bớt — nên phần dữ liệu bị cụt sẽ được báo là cụt chứ không đổ ra một lỗi giải mã khó hiểu.
- Base64, data URI, dòng CSS, thẻ HTML và Markdown, mỗi dạng đều sao chép được ngay
- Hiện kích thước sau mã hoá và mức phình thêm khoảng một phần ba
- Cảnh báo khi ảnh quá lớn để việc nhúng thẳng còn là ý hay
- Giải mã một data URI được dán vào, kèm xem trước và tải về
- Báo bản dán bị cụt là cụt, chứ không báo lỗi giải mã
- Chấp nhận cả các dấu xuống dòng mà trình soạn thảo thêm vào khi ngắt dòng
- Chạy trong trình duyệt: ảnh không bao giờ được tải lên
Cách sử dụng
- 1Thả một tấm ảnh vào, hoặc chọn từ máy của bạn.
- 2Đọc phần so sánh kích thước và ghi chú về việc có nên nhúng thẳng hay không.
- 3Sao chép dạng bạn cần: data URI, CSS, HTML hoặc Markdown.
- 4Muốn làm chiều ngược lại thì chuyển sang giải mã và dán data URI vào.
Câu hỏi thường gặp
Khi nào nhúng thẳng ảnh mới thật sự đáng?
Khi ảnh nhỏ — một biểu tượng hay một dải màu chừng một hai kilobyte — và việc tiết kiệm một lượt yêu cầu quan trọng hơn việc lưu đệm. Lớn hơn thế thì tệp riêng thắng, vì trình duyệt lưu đệm nó độc lập với trang.
Vì sao chuỗi Base64 lại lớn hơn ảnh của tôi?
Base64 mã hoá ba byte thành bốn ký tự, nên nó luôn lớn hơn chừng 33%. Phần dôi ra đó là cái giá của việc nhét dữ liệu nhị phân vào một tài liệu văn bản.
Data URI có chạy trong email không?
Ở phần lớn ứng dụng thư hiện đại thì có, và đó là cách thông dụng để ảnh vẫn hiện khi ảnh từ xa bị chặn. Gmail bản web là ngoại lệ đáng chú ý với một số nội dung, nên hãy thử trước khi tin hẳn vào nó.
Vì sao data URI tôi dán vào lại không giải mã được?
Gần như luôn là do bản chép bị cắt cụt: data URI là một dòng rất dài và trình soạn thảo hay cắt hoặc ngắt nó. Công cụ này chấp nhận việc ngắt dòng và nói rõ khi phần dữ liệu bị thiếu.
Data URI có rủi ro bảo mật không?
Một data URI chứa ảnh là dữ liệu trơ, không phải mã chạy được. Rủi ro nằm ở data URI chứa SVG vì SVG có thể chứa script, nên công cụ này chỉ xử lý các định dạng ảnh điểm.