Chuyển đổi PNG sang Base64

Mã hóa tệp PNG thành Base64 mà vẫn giữ nguyên độ trong suốt. Thả hoặc dán một ảnh PNG rồi sao chép dưới dạng data URI, thẻ img HTML, nền CSS hoặc ảnh Markdown.

Chuyển sang Chiều rộng tối đa

Thả ảnh vào đây, nhấp để chọn hoặc dán từ bộ nhớ tạm PNG, JPEG, GIF, WebP, SVG, BMP, ICO, AVIF và nhiều định dạng khác. Xử lý cục bộ.

Chạy hoàn toàn trong trình duyệt của bạn. Không có gì được tải lên.

Cách sử dụng

Thả tệp PNG vào vùng thả, nhấp để chọn tệp hoặc dán ảnh chụp màn hình từ bộ nhớ tạm.
Chọn Giữ định dạng gốc để mã hóa đúng các byte PNG ban đầu, hoặc đặt Chiều rộng tối đa để thu nhỏ ảnh lớn.
So sánh dung lượng gốc với dung lượng sau mã hóa hiển thị cho ảnh.
Sao chép hoặc tải xuống đầu ra dạng data URI, Base64 thuần, thẻ img, CSS hoặc Markdown.

PNG và Base64

PNG (Portable Network Graphics, kiểu MIME image/png) là định dạng ảnh raster nén không mất dữ liệu, có kênh alpha đầy đủ, nên thường được chọn cho biểu tượng, logo, sơ đồ và ảnh chụp màn hình. Mọi tệp PNG đều bắt đầu bằng cùng một chữ ký 8 byte, vì vậy mọi data URI của PNG cũng bắt đầu giống nhau: data:image/png;base64,iVBORw0KGgo....

Base64 không động chạm đến điểm ảnh. Giải mã chuỗi sẽ cho lại tệp giống hệt đến từng byte, với cùng màu sắc và cùng những vùng trong suốt.

Những trường hợp nên dùng data URI PNG

Biểu tượng giao diện và logo nhỏ cần nền trong suốt.
Ảnh chụp màn hình trong báo cáo HTML tự chứa, báo cáo lỗi hoặc tài liệu được xuất ra.
Biểu đồ và mã QR được tạo trên máy chủ rồi trả về trong phản hồi JSON.
Ảnh tạo bằng canvas.toDataURL(), vốn mặc định đã cho ra data URI dạng PNG.

Ảnh chụp thì lại khác. PNG lưu chúng theo cách không mất dữ liệu nên tệp rất lớn; JPEG hoặc WebP sẽ cho chuỗi ngắn hơn nhiều.

Thu nhỏ PNG trước khi mã hóa

Mỗi byte bớt được trong tệp PNG giúp tiết kiệm khoảng 1,33 ký tự Base64. Trước tiên, hãy tối ưu tệp bằng các công cụ như oxipng hoặc zopflipng (không mất dữ liệu) hay pngquant (giảm bảng màu). Hãy kiểm tra cả kích thước điểm ảnh: một biểu tượng xuất ở kích thước gấp ba lần khi hiển thị thường có thể thu nhỏ bằng tùy chọn Chiều rộng tối đa.

Chuyển sang WebP vẫn giữ được độ trong suốt và thường nhỏ hơn đáng kể. Chuyển sang JPEG sẽ làm mất độ trong suốt, các vùng trong suốt trở thành một màu đặc. Việc mã hóa lại sang PNG trong trình duyệt không tối ưu khả năng nén, nên kết quả có thể lớn hơn một bản gốc đã được tối ưu kỹ; hãy so sánh dung lượng trước khi sao chép.

Sử dụng kết quả

<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">

.icon-settings {
  background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}

# Dòng lệnh: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.png

Câu hỏi thường gặp

Base64 có giữ được độ trong suốt của PNG không?

Có. Base64 mã hóa nguyên vẹn các byte của tệp, nên kênh alpha vẫn được giữ lại. Độ trong suốt chỉ mất đi khi bạn chuyển ảnh sang JPEG.

Vì sao mọi chuỗi Base64 của PNG đều bắt đầu bằng iVBORw0KGgo?

Các ký tự đó chính là dạng Base64 của chữ ký tệp PNG. Nếu một chuỗi được cho là PNG mà lại bắt đầu khác đi, thì đó là một định dạng khác hoặc dữ liệu đã bị hỏng.

Tôi có thể dán trực tiếp ảnh chụp màn hình không?

Có. Hãy sao chép ảnh chụp màn hình rồi dán vào trang. Trình duyệt thường chuyển ảnh chụp màn hình được dán vào dưới dạng PNG, nên bạn sẽ nhận được kết quả data:image/png.

Ảnh PNG lớn cỡ nào thì nên nhúng dưới dạng Base64?

Theo kinh nghiệm phổ biến là vài kilobyte, tối đa khoảng 10 KB. Ảnh lớn hơn nên được phục vụ dưới dạng tệp riêng để trình duyệt có thể lưu đệm và tải song song.