Base64
Image Data URL
⚠️ Large image may freez the browser
Mã hóa PNG thành Base64 cho CSS
Chuyển đổi ảnh PNG thành định dạng Base64 hoặc DataURL. Nhúng trực tiếp vào CSS hoặc JavaScript mà không cần tệp tin bên ngoài. Các tệp tin lớn có thể ảnh hưởng đến hiệu suất; kích thước nhỏ hơn được khuyến nghị. Mã hóa Base64 giúp quá trình tích hợp với tài sản web diễn ra suôn sẻ, giảm sự phụ thuộc vào các tài nguyên bên ngoài. Định dạng DataURL đơn giản hóa cấu trúc mã cho việc cung cấp nội dung động.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Chuyển đổi hình ảnh thành mã Base64
1
Tải lên ảnh PNG
Tải hình ảnh PNG của bạn bằng cách nhấp hoặc kéo thả nó vào khu vực tải lên.
2
Chọn Định Dạng Mã hóa
Chọn cả tab 'Base64' hoặc 'DataURL' để chọn định dạng mã hóa mong muốn của bạn.
3
Xem Dữ liệu Base64
Biểu diễn Base64 hoặc DataURL của hình ảnh sẽ hiển thị trong khu vực văn bản bên dưới các tab.
4
Sao chép Văn bản Mã hóa
Nhấn nút 'Sao chép' để sao chép văn bản đã mã hóa vào clipboard để sử dụng trong CSS hoặc JavaScript của bạn.
Tích hợp hình PNG trực tiếp vào CSS
Bao gồm một hình ảnh nhỏ trực tiếp trong CSS mà không quản lý các tệp riêng biệt có thể đạt được bằng cách chuyển đổi PNG thành định dạng Base64 hoặc DataURL. Công cụ encode-png-to-base64-for-css làm luồng công việc phát triển web của bạn và giảm số lượng yêu cầu HTTP. Điều này dẫn đến mã sạch hơn, hiệu quả hơn và thời gian tải trang nhanh hơn.
Giảm kích thước tệp tin và số lượng yêu cầu HTTP
Công cụ này giảm số lượng tệp tin mà trang web của bạn cần tải xuống bằng cách chuyển đổi hình ảnh PNG thành định dạng Base64 hoặc DataURL. Tích hợp hình ảnh trực tiếp vào CSS hoặc JavaScript làm giảm số lượng yêu cầu HTTP, điều này có thể cải thiện tốc độ tải trang. Phương pháp này tối ưu hóa hiệu suất trang web bằng cách giảm thiểu sự phụ thuộc vào tệp bên ngoài.
Câu Hỏi Thường Gặp
Dữ liệu Base64 là gì và tại sao tôi nên sử dụng nó?
Một DataURL dựa trên Base64 là một cách để biểu diễn hình ảnh dưới dạng chuỗi ký tự. Nó cho phép bạn nhúng hình ảnh trực tiếp vào mã CSS hoặc JavaScript của mình, tránh việc tải chúng từ các tệp bên ngoài. Điều này có thể hữu ích cho các biểu tượng hoặc hình ảnh nhỏ.
Tôi sử dụng Base64 hoặc DataURL đã được tạo ra như thế nào?
Chỉ cần sao chép mã được cung cấp sau khi chuyển đổi hình ảnh của bạn và dán nó vào CSS hoặc JavaScript của bạn. Ví dụ, trong CSS, bạn có thể sử dụng nó như sau: background-image: url('data:image/png;base64,...');
Công cụ này hỗ trợ định dạng ảnh nào?
Công cụ này được thiết kế đặc biệt cho ảnh PNG. Các định dạng khác có thể không chuyển đổi chính xác.
Tại sao hình ảnh lớn không được khuyến khích?
Các hình ảnh lớn tạo ra các chuỗi Base64 rất dài, điều này có thể làm chậm máy tính và tăng thời gian tải trang. Tốt nhất nên sử dụng công cụ này cho các hình ảnh nhỏ hơn.
Có giới hạn kích thước ảnh tôi có thể tải lên không?
Mặc dù không có giới hạn kích thước tệp nghiêm ngặt nào, hiệu suất sẽ giảm khi sử dụng hình ảnh lớn hơn. Chúng tôi khuyên bạn nên sử dụng các tệp PNG nhỏ hơn để có kết quả tốt nhất.