Bộ mã hóa ảnh Base64

Thả ảnh của bạn vào đây

Đang xử lý...

Inline ảnh nhỏ dưới dạng Base64 data URI có thể bớt một HTTP request và đưa tài nguyên đi cùng HTML hoặc CSS. Bộ mã hóa nhận các tệp PNG, JPEG, GIF, WebP và SVG được hỗ trợ, tối đa 5 MiB. Sau khi giải mã, ảnh raster không được vượt quá 16.384 pixel ở bất kỳ cạnh nào hoặc 33.554.432 pixel tổng cộng. Ảnh raster được kiểm tra khả năng giải mã trong trình duyệt, còn SVG chỉ được kiểm tra cấu trúc UTF-8, rồi công cụ tạo Base64, CSS, HTML hoặc JSON. Hãy thử kết quả trong hệ thống đích và vẫn coi SVG không đáng tin là nội dung chủ động sau khi mã hóa.

Cách mã hóa ảnh

  1. 1

    Thả ảnh của bạn

    Chọn tệp PNG, JPG, GIF, WebP hoặc SVG không quá 5 MiB. Ảnh raster không được vượt quá 16.384 pixel ở bất kỳ cạnh nào hoặc 33.554.432 pixel tổng cộng, còn văn bản đã mã hóa phải dưới 7 MiB.

  2. 2

    Mã hóa chạy trong trình duyệt

    Byte ảnh được đọc, mã hóa Base64 và thêm tiền tố URI `data:` chính xác.

  3. 3

    Chọn định dạng đầu ra

    Base64 thô, quy tắc CSS `background-image`, thẻ HTML `<img>`, hoặc chuỗi an toàn cho JSON.

  4. 4

    Sao chép kết quả

    Chỉ dán sau khi kiểm tra hỗ trợ data URI, giới hạn kích thước và độ an toàn nội dung ở hệ thống đích.

Khi inline ảnh đáng làm

Ứng viên tốt để inline:

  • Biểu tượng dưới 2 KB, Tiết kiệm một HTTP request với chi phí tăng thêm không đáng kể.
  • Mẫu email - Mức hỗ trợ data URI không đồng nhất giữa các trình email. Hãy thử trên các trình đích và dùng ảnh CID hoặc ảnh được lưu trữ khi cần.
  • Ảnh giữ chỗ cho màn hình đầu (LQIP), Phiên bản mờ chất lượng thấp đặt inline, ảnh đầy đủ tải sau.
  • SVG dùng một lần, data URI được mã hóa phần trăm đúng cách có thể ngắn hơn Base64; các ký tự dành riêng phải được mã hóa và SVG không đáng tin vẫn là nội dung chủ động.

Ứng viên xấu:

  • Ảnh lớn, Tăng 33% cho ảnh 500 KB là lãng phí 166 KB.
  • Ảnh dùng lại trên nhiều trang, Inline làm mất cache trình duyệt giữa các tuyến.
  • CSS quan trọng, Inline ảnh nặng làm phình đường dẫn render quan trọng.

Kỳ vọng kích thước

Kích thước ảnh Kích thước chuỗi Base64
500 byte ~680 ký tự
2 KB ~2.7 KB
20 KB ~27 KB
200 KB ~270 KB

Định dạng Data URI

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
  • lược đồ data:
  • loại MIME
  • chỉ báo ;base64,
  • các byte đã mã hóa

SVG là trường hợp đặc biệt

SVG vốn là văn bản, nhưng so sánh kích thước với Base64 phụ thuộc vào nội dung và lượng mã hóa phần trăm cần thiết. Với dạng không dùng Base64, hãy dùng data:image/svg+xml, và mã hóa đúng các ký tự dành riêng. Tham số ;utf8 thường gặp không phải tham số chuẩn và không thay thế mã hóa phần trăm. Công cụ không xem trước SVG và chỉ kiểm tra cấu trúc UTF-8, nên SVG không đáng tin vẫn là nội dung chủ động; Base64 không phải biện pháp làm sạch.

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

Base64 làm dữ liệu nhị phân tăng khoảng một phần ba trước khi tính phần bọc data URI và nén khi truyền. Không có ngưỡng kích thước cố định luôn có lợi; hãy so sánh số request, cache, nén và tần suất tái sử dụng, rồi đo trên trang thực tế.

data URI không tự tạo lợi thế SEO. Công cụ tìm kiếm xem xét HTML xung quanh, còn ảnh nền CSS không có văn bản thay thế như thuộc tính alt. Với ảnh truyền đạt thông tin, hãy dùng <img> kèm văn bản thay thế phù hợp và đánh giá hiệu năng riêng.

Không. Bộ mã hóa đọc tệp cục bộ bằng FileReader API và tạo chuỗi Base64 trong trình duyệt. Không có gì rời khỏi máy của bạn.

Có, dùng công cụ Base64 to Image để biến URI data:image/... trở lại thành tệp có thể tải xuống.

Công cụ liên quan