HTML Code
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>CSS image-rendering Compare Example</title>

  <style>

    body {

      font-family: system-ui, sans-serif;

      padding: 1.5rem;

      line-height: 1.6;

    }



    .demo {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));

      gap: 1rem;

      max-width: 40rem;

    }



    figure {

      margin: 0;

      text-align: center;

    }



    figcaption {

      margin-top: 0.5rem;

      font-size: 0.875rem;

      font-weight: 600;

      color: #64748b;

    }



    img {

      width: 120px;

      height: 120px;

      border: 1px solid #cbd5e1;

      border-radius: 0.35rem;

    }



    .auto { image-rendering: auto; }

    .smooth { image-rendering: smooth; }

    .crisp { image-rendering: crisp-edges; }

    .pixel { image-rendering: pixelated; }

  </style>

</head>

<body>

  <h1>Rendering Values Compared</h1>

  <div class="demo">

    <figure>

      <img class="auto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%232563eb'/%3E%3Crect x='8' width='8' height='8' fill='%2393c5fd'/%3E%3Crect y='8' width='8' height='8' fill='%237c3aed'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23f59e0b'/%3E%3C/svg%3E" alt="auto">

      <figcaption>auto</figcaption>

    </figure>

    <figure>

      <img class="smooth" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%232563eb'/%3E%3Crect x='8' width='8' height='8' fill='%2393c5fd'/%3E%3Crect y='8' width='8' height='8' fill='%237c3aed'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23f59e0b'/%3E%3C/svg%3E" alt="smooth">

      <figcaption>smooth</figcaption>

    </figure>

    <figure>

      <img class="crisp" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%232563eb'/%3E%3Crect x='8' width='8' height='8' fill='%2393c5fd'/%3E%3Crect y='8' width='8' height='8' fill='%237c3aed'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23f59e0b'/%3E%3C/svg%3E" alt="crisp-edges">

      <figcaption>crisp-edges</figcaption>

    </figure>

    <figure>

      <img class="pixel" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%232563eb'/%3E%3Crect x='8' width='8' height='8' fill='%2393c5fd'/%3E%3Crect y='8' width='8' height='8' fill='%237c3aed'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23f59e0b'/%3E%3C/svg%3E" alt="pixelated">

      <figcaption>pixelated</figcaption>

    </figure>

  </div>

</body>

</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
CSS image-rendering Property - compare values
