Giữ chất lượng ảnh khi transform & scale với image-rendering

Thuộc tính image-rendering kiểm soát thuật toán scale ảnh: mượt (smooth), nét (crisp-edges), pixelated.

Cú pháp

selector { image-rendering: auto | smooth | crisp-edges | pixelated; }

Ví dụ so sánh 3 chế độ

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      height: 200px;
      width: 200px;
      image-rendering: auto; /* mặc định */
    }
    #smooth { image-rendering: smooth; }
    #pixelated { image-rendering: pixelated; }
    #crisp { image-rendering: crisp-edges; }
  </style>
</head>
<body>
  <h3>Smooth (mặc định - bilinear)</h3>
  <img id="smooth" src="small-image.jpg" alt="Smooth">
  
  <h3>Pixelated (nearest-neighbor - giữ pixel art)</h3>
  <img id="pixelated" src="pixel-art.png" alt="Pixelated">
  
  <h3>Crisp-edges (cạnh nét - cho diagram/text)</h3>
  <img id="crisp" src="diagram.png" alt="Crisp">
</body>
</html>

Khi nào dùng cái nào?

Lưu ý

• pixelated chỉ làm ảnh phóng to vẫn thấy rõ pixel vuông
• crisp-edges ít được hỗ trợ nhất quán, thường fallback về smooth
• Kết hợp với transform: scale() cho hiệu ứng zoom