Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style> 
.image {
  height: 100px;
  width: 100px;  
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast; /* Chrome, Edge, Opera, and Safari */
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
.smooth {
  image-rendering: smooth;
}
.high-quality {
  image-rendering: high-quality;
}
</style>
</head>
<body>
<h1>The image-rendering Property</h1>
<p>image-rendering: auto;</p>
<img class="image" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>image-rendering: crisp-edges;</p>
<img class="image crisp-edges" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>image-rendering: pixelated;</p>
<img class="image pixelated" src="smiley.gif" alt="Smiley" width="32" height="32">