Làm theo ví dụ đã thực hiện này, sau đó điều chỉnh các điều khiển tương tự cho hình ảnh của riêng bạn. Mở Bộ chuyển đổi hình ảnh sang Base64.
Chọn một hình ảnh và xem trước danh tính của nó
Mở Trình chuyển đổi Hình ảnh sang Base64. Chọn một hình ảnh hoặc Thử một mẫu. Ví dụ sử dụng favicon-orbit.png 512 × 512 pixel, chứa 202,491 byte. Trình chỉnh sửa hiển thị hình ảnh phía trên mã của nó để bạn có thể xác nhận rằng bạn đã chọn đúng tài nguyên.
PNG, JPG, WebP, GIF, BMP và AVIF được hỗ trợ khi trình duyệt của bạn có thể giải mã chúng để xem trước. Kích thước tệp tối đa là 25 MB, với giới hạn 60 megapixel và 16,000 pixel mỗi cạnh. Mã đánh dấu SVG không được chấp nhận bởi trình chuyển đổi raster này.
Công cụ đọc các byte tệp gốc. Nó không sử dụng bản xem trước để xây dựng lại hình ảnh, thay đổi kích thước hoặc nén lại. Do đó, siêu dữ liệu hiện có và hoạt ảnh GIF được giữ lại trong dữ liệu đã mã hóa.
Trước khi mã hóa, hãy sử dụng Thay đổi kích thước hình ảnh hoặc Trình nén hình ảnh nếu bạn cần một tài nguyên nhỏ hơn. Bản thân Base64 không làm giảm kích thước hình ảnh.
Chọn định dạng mà dự án của bạn mong đợi
Mở Cài đặt và chọn hình ảnh HTML trong Định dạng mã cho ví dụ này. Kết quả là một thẻ img chứa một data URL Base64. Thuộc tính alt ban đầu trống; hãy viết văn bản thay thế hữu ích khi hình ảnh truyền đạt thông tin.
Data URL bắt đầu bằng một tiền tố như data:image/png;base64, theo sau là dữ liệu đã mã hóa. Plain Base64 chỉ chứa dữ liệu. Nền CSS bao bọc data URL trong một khai báo background-image. Các định dạng này phục vụ các mục đích khác nhau, vì vậy hãy sao chép định dạng mà ứng dụng của bạn yêu cầu thay vì chỉ thay đổi tên tệp.
Bảng mã cập nhật ngay lập tức sau khi bạn thay đổi Định dạng mã. Biểu tượng sao chép sẽ sao chép định dạng hiện tại và hiển thị xác nhận đã sao chép. Khi quyền truy cập vào bảng tạm bị chặn, mã sẽ được chọn để sao chép thủ công.
Thẻ HTML img hoàn chỉnh không giống với một URL dữ liệu. Chỉ sử dụng giá trị src khi trường yêu cầu URL.
Ví dụ trong hướng dẫn này
Thử một mẫu: favicon-orbit.png, 512 × 512 px, 202,491 byte. Chọn ảnh HTML trong định dạng Mã. Chọn Bắt đầu và tải xuống favicon-orbit-base64.txt.
- PNG gốc
- 512 × 512 px · 202,491 byte
- Đầu ra văn bản HTML
- 270,029 byte
- Mã hóa
- Byte gốc; không nén lại
Tải xuống mã và tìm hiểu kích thước của nó
Chọn Bắt đầu, sau đó chọn Tải xuống. Ví dụ này lưu favicon-orbit-base64.txt chứa mã hình ảnh HTML. 270,029 byte của nó lớn hơn nguồn 202,491 byte. Phần so sánh trong bài viết hiển thị phần đầu thực tế của văn bản đã tải xuống, được rút gọn để dễ đọc hơn.
Base64 thường chuyển đổi ba byte nguồn thành bốn ký tự văn bản, thêm khoảng một phần ba trước phần bao bọc nhỏ. Việc nhúng một biểu tượng nhỏ có thể làm cho tài liệu trở nên độc lập, nhưng việc đặt các chuỗi hình ảnh lớn bên trong HTML hoặc CSS cũng làm cho tài liệu đó lớn hơn và ngăn hình ảnh được lưu vào bộ nhớ đệm dưới dạng tệp riêng biệt.
Mã hóa không phải là bảo mật. Bất kỳ ai có chuỗi Base64 hoàn chỉnh đều có thể khôi phục hình ảnh gốc. Hãy xử lý mã này cẩn thận như tệp nguồn nếu nó chứa thông tin cá nhân.
Đoạn trích bị cắt bớt trong bài viết này chỉ mang tính giải thích. Hãy sử dụng TXT đã tải xuống hoàn chỉnh hoặc sao chép toàn bộ mã từ công cụ.
Câu hỏi thường gặp
Việc mã hóa có làm giảm chất lượng hình ảnh không?
Không. Mã hóa bảo toàn các byte gốc. Nó không thay đổi kích thước, nén hoặc vẽ lại hình ảnh.
Tại sao chuỗi Base64 lại lớn hơn hình ảnh?
Base64 biểu diễn ba byte đầu vào bằng bốn ký tự văn bản, vì vậy nó thường thêm khoảng một phần ba trước khi có trình bao bọc hoặc tiền tố.
Các hoạt ảnh GIF có được bảo toàn không?
Mã hóa bảo toàn các byte GIF gốc, bao gồm cả hoạt ảnh. Bản xem trước có thể hiển thị một khung hình tĩnh trong khi dữ liệu được mã hóa vẫn giữ lại tất cả các khung hình.
Base64 có an toàn cho hình ảnh bí mật không?
Base64 không phải là mã hóa bảo mật. Hãy giữ chuỗi này ở chế độ riêng tư nếu hình ảnh cơ bản là riêng tư. Bản thân bộ chuyển đổi xử lý nó cục bộ trong trình duyệt của bạn.
Biến hình ảnh phù hợp thành mã phù hợp.
Thử một mẫu hoặc sử dụng tệp của riêng bạn, và xem lại kết quả trước khi chia sẻ.
