Chuyển Đổi Ảnh Sang Chuỗi Base64 (Data URI) & Ngược Lại

Mã hóa hình ảnh sang Base64 (Data URL) là gì?

Mã hóa Base64 là quá trình chuyển đổi dữ liệu nhị phân (Binary) của một file ảnh (PNG, JPG, SVG) thành một chuỗi văn bản (String) rất dài bao gồm các ký tự ASCII (chữ cái, số và vài ký tự đặc biệt). Chuỗi thu được được gọi là Data URI, có định dạng kiểu: data:image/png;base64,iVBORw0KGgo.... Bạn có thể nhúng trực tiếp chuỗi text khổng lồ này vào trong file HTML hoặc CSS để trình duyệt hiển thị thành bức ảnh mà không cần tạo thêm một đường link ảnh độc lập.

Khi nào nên và không nên sử dụng ảnh Base64 trong lập trình web?

✅ NÊN SỬ DỤNG KHI:

• Hình ảnh / Icon đó cực kỳ nhỏ (Dưới 5KB - 10KB).
• Cần nhúng sẵn hình nền (Background-image) dạng Pattern nhẹ vào file CSS để tối ưu tốc độ render (Tránh tạo thêm HTTP request kết nối tới server).
• Các bức ảnh placeholder load ban đầu.

❌ KHÔNG NÊN SỬ DỤNG KHI:

• Ảnh lớn hơn 10KB. Mã hóa Base64 sẽ khiến chuỗi text phình to thêm khoảng 33% dung lượng so với file ảnh gốc. Nếu dùng quá nhiều sẽ làm file HTML phình to tới hàng Megabyte, gây lỗi treo trình duyệt người dùng.
• Không thể tận dụng được bộ đệm ảnh (Image Caching) của trình duyệt.

Hướng dẫn nhúng chuỗi Base64 vào thẻ img HTML và background CSS

• Trong thẻ HTML img: <img src="data:image/png;base64,chuoi_text_base64..." alt="ảnh" />
• Trong file CSS: .box { background-image: url("data:image/jpeg;base64,chuoi_text_base64..."); }