Chuyển PNG Sang Base64 - Miễn Phí, Tức Thì, Ngay Trên Trình Duyệt
Công Cụ Chuyển PNG Sang Base64
Tối đa 10 MB. Không có gì được tải lên — tệp không bao giờ rời khỏi thiết bị của bạn.
Dùng trong thuộc tính <img src> hoặc url() của CSS.
Không có tiền tố data: — dùng cho dữ liệu JSON và API.
Tệp của bạn được giữ riêng tư
Việc chuyển đổi này chạy hoàn toàn trong trình duyệt của bạn. Ảnh không bao giờ được tải lên, nên không có thứ gì bạn mã hóa ở đây đến được máy chủ của chúng tôi hay bất kỳ ai khác.
Về Việc Chuyển PNG Sang Base64
PNG là định dạng được nhúng nội tuyến nhiều nhất — biểu tượng, logo, sprite nhỏ, những mảnh giao diện tí hon mà nếu không thì mỗi cái sẽ tốn một lượt yêu cầu mạng riêng. Mã hóa một tệp như vậy sang Base64 biến nó thành văn bản bạn có thể dán thẳng vào bảng kiểu hoặc thuộc tính HTML. Việc đó có phải ý hay không thì gần như hoàn toàn phụ thuộc vào tệp nhỏ đến mức nào.
Cách chuyển PNG sang Base64
- 1 Thả tệp .png vào vùng tải lên.
- 2 Kết quả hiện ra ngay lập tức — không có nút nào để bấm và không phải chờ gì cả.
- 3 Sao chép dạng bạn cần: data URI cho HTML và CSS, chuỗi thô cho JSON, hoặc quy tắc CSS dựng sẵn.
Khi nào nhúng nội tuyến thực sự đáng
Mỗi bức ảnh riêng lẻ trên trang đều tốn một lượt yêu cầu, và một lượt yêu cầu có chi phí vượt quá số byte nó mang theo. Với một biểu tượng 1 KB, chi phí đó có thể còn nặng hơn chính tệp ảnh, nên gấp nó vào bảng kiểu là cái lợi thật sự. Theo quy tắc thô, nhúng nội tuyến có ích khi dưới vài kilobyte và bắt đầu gây hại khi vượt quá mười. Điểm hòa vốn không phải con số cố định — nó dịch chuyển theo đường truyền, máy chủ và số thứ khác đang tranh nhau băng thông — nhưng bản chất của cuộc đánh đổi thì luôn như nhau: bạn đổi một vòng đi-về lấy thêm byte.
Bạn đánh mất điều gì
Ba thứ, và thứ hai khiến nhiều người bất ngờ. Thứ nhất là dung lượng: văn bản đã mã hóa lớn hơn tệp khoảng một phần ba. Thứ hai là bộ nhớ đệm: ảnh nhúng nội tuyến không thể được lưu đệm riêng, nên nó bị tải lại mỗi lần bảng kiểu chứa nó thay đổi — mà bảng kiểu thì thay đổi thường xuyên hơn một cái logo rất nhiều. Thứ ba, trình duyệt phải giải mã chuỗi trước khi vẽ; với một biểu tượng thì không đáng kể, với thứ gì lớn thì đo được. Ít nhất độ trong suốt vẫn nguyên vẹn: kênh alpha là một phần dữ liệu PNG và Base64 sao chép nó từng byte một.
Với biểu tượng, hãy cân nhắc SVG trước
Nếu thứ bạn mã hóa là một biểu tượng phẳng hay một logo đơn giản, SVG thường đã nhỏ hơn PNG ngay từ trước khi mã hóa, và sau khi mã hóa thì càng nhỏ hơn nữa, bởi SVG vốn đã là văn bản và chẳng cần Base64 chút nào. Nó còn co giãn được với mọi mật độ màn hình mà không cần tệp thứ hai. Hãy chọn PNG khi hình có chi tiết kiểu ảnh chụp, chuyển màu mềm hoặc hiệu ứng mà vector xử lý kém — và khi đó, hãy làm nó nhỏ lại trước khi mã hóa chứ không phải sau. Base64 sẽ phóng to một cách trung thành bất cứ thứ gì bạn đưa cho nó.