<div>
  <div>
    <div>4000px / image-rendering: pixelated;</div>
    <img src="https://assets.codepen.io/3/landscape.png" alt="" />
  </div>
  <div>
    <div>4000px / 46 KB / image-rendering: crisp-edges;</div>
    <img src="https://assets.codepen.io/3/landscape.png" alt="" />
  </div>
</div>

<div>
  <div>
    <div>1000px / 18 KB / image-rendering: pixelated;</div>
    <img src="https://assets.codepen.io/3/landscape.png?width=1000&format=auto" alt="" />
  </div>
  <div>
    <div>1000px / 18 KB / image-rendering: crisp-edges;</div>
    <img src="https://assets.codepen.io/3/landscape.png?width=1000&format=auto" alt="" />
  </div>
</div>

<div>
  <div>
    <div>600px / 11 KB / image-rendering: pixelated;</div>
    <img src="https://assets.codepen.io/3/landscape.png?width=600&format=auto" alt="" />
  </div>
  <div>
    <div>600px / 11 KB / image-rendering: crisp-edges;</div>
    <img src="https://assets.codepen.io/3/landscape.png?width=600&format=auto" alt="" />
  </div>
</div>

body {
  font-family: "SF Mono", SFMono-Regular, ui-monospace, monospace;
  margin: 0;
  padding: 3rem;
  display: grid;
  gap: 3rem;
  > div {
    max-inline-size: 100%;
    margin-inline: auto;
    display: flex;
    gap: 1rem;
  }
}
img {
  inline-size: 600px;
  max-inline-size: 100%;
  image-rendering: pixelated;

  + img {
    image-rendering: crisp-edges;
  }
}