1. SVG – phù hợp cho hình ít chi tiết, dạng vector

• Dùng cho: icon, logo, hình minh họa đơn giản, hình vẽ bằng vector.
• Ưu điểm:
  • Nhẹ, dung lượng cực nhỏ.
  • Phóng to/thu nhỏ không bị vỡ hình.
  • Thay đổi màu sắc dễ dàng bằng CSS.
• Hạn chế:
  • Không phù hợp cho ảnh chụp hoặc hình có nhiều chi tiết phức tạp.

2. PNG – phù hợp cho hình nhiều chi tiết, cần nền trong suốt

• Dùng cho: hình minh họa có nhiều chi tiết, hình cần độ sắc nét cao, hoặc cần nền trong suốt.
• Cách export:
  • Chọn @3x, @4x để ảnh rõ nét hơn trên màn hình Retina.
• Ưu điểm:
  • Giữ chi tiết sắc nét.
  • Hỗ trợ nền trong suốt.
• Hạn chế:
  • Dung lượng nặng hơn JPEG và WebP.

3. JPEG – phù hợp cho ảnh chụp, ảnh thật nhiều màu sắc

• Dùng cho: ảnh chụp, banner nhiều màu, background có gradient.
• Ưu điểm:
  • Giữ được cảm giác “ảnh thật” với nhiều điểm ảnh.
  • Dung lượng nhẹ hơn PNG nếu cùng kích thước.
• Hạn chế:
  • Không hỗ trợ nền trong suốt.
  • Có thể bị giảm chất lượng khi nén quá nhiều.

4. WebP – lựa chọn tối ưu để ảnh nhẹ

• Dùng cho: ảnh cần giảm dung lượng nhưng vẫn giữ chất lượng tốt.
• Ưu điểm:
  • Nhẹ hơn PNG/JPEG.
  • Hỗ trợ cả trong suốt và ảnh động.
• Hạn chế:
  • Một số trình duyệt cũ có thể chưa hỗ trợ (nhưng hiện nay đa phần đã hỗ trợ tốt).

Kết luận

• SVG: icon, logo, hình vector ít chi tiết.
• PNG: ảnh minh họa nhiều chi tiết, cần trong suốt, export 3x hoặc 4x cho rõ nét.
• JPEG: ảnh chụp, banner nhiều màu, muốn ảnh thật và tự nhiên.
• WebP: tối ưu dung lượng, giữ chất lượng, dùng cho web hiện đại.