<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image-rendering</title>
</head>
<body>
<h2>1:1 size</h2>
<code>image-rendering: auto</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="image-rendering: auto;">
<code>image-rendering: pixelated</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="image-rendering: pixelated;">
<hr>
<h2>upscaled</h2>
<code>image-rendering: auto</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 100px; image-rendering: auto;">
<code>image-rendering: pixelated</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 100px; image-rendering: pixelated;">
<hr>
<h2>downscaled</h2>
<code>image-rendering: auto</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 10px; image-rendering: auto;">
<code>image-rendering: pixelated</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 10px; image-rendering: pixelated;">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image-rendering</title>
</head>
<body>
<h2>1:1 size</h2>
<code>image-rendering: auto</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="image-rendering: auto;">
<code>image-rendering: pixelated</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="image-rendering: pixelated;">
<hr>
<h2>upscaled</h2>
<code>image-rendering: auto</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 100px; image-rendering: auto;">
<code>image-rendering: pixelated</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 100px; image-rendering: pixelated;">
<hr>
<h2>downscaled</h2>
<code>image-rendering: auto</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 10px; image-rendering: auto;">
<code>image-rendering: pixelated</code>
<img src="https://www.w3schools.com/cssref/smiley.gif" style="width: 10px; image-rendering: pixelated;">
</body>
</html>
