CSS image-rendering Property

<!DOCTYPE html>
<html>
<head>
<style>
    .image {
        height: 100px;
        width: 100px;
        image-rendering: auto;
    }
    .ex1 {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    .ex2 {
        image-rendering: pixelated;
    }
    .ex3 {
        image-rendering: smooth;
    }
    .ex4 {
        image-rendering: high-quality;
    }
</style>
</head>
<body>

<h1>The image-rendering property</h1>

<p>Auto: <img class="image" src="https://webtutor.dev/images/emoji.png" alt="emoji" width="50" height="50"></p>
<p>Crisp Edges: <img class="image ex1" src="https://webtutor.dev/images/emoji.png" alt="emoji" width="50" height="50"></p>
<p>Pixelated: <img class="image ex2" src="https://webtutor.dev/images/emoji.png" alt="emoji" width="50" height="50"></p>
<p>Smooth: <img class="image ex3" src="https://webtutor.dev/images/emoji.png" alt="emoji" width="50" height="50"></p>
<p>High Quality: <img class="image ex4" src="https://webtutor.dev/images/emoji.png" alt="emoji" width="50" height="50"></p>
<p>Original image: <img src="https://webtutor.dev/images/emoji.png" alt="emoji" width="50" height="50"></p>

</body>
</html>

Commands	Shortcut Key (Win)	Shortcut Key (Mac)
selectAll	Ctrl-A	Cmd-A
singleSelection	Esc	-
killLine	-	Ctrl-K (Mac)
deleteLine	Ctrl-D	Cmd-D
undo	Ctrl-Z	Cmd-Z
redo	Ctrl-Y	Shift-Cmd-Z, Cmd-Y
undoSelection	Ctrl-U	Cmd-U
redoSelection	Alt-U	Shift-Cmd-U
goDocStart	Ctrl-Home	Cmd-Up, Cmd-Home
goDocEnd	Ctrl-End	Cmd-End, Cmd-Down
goLineStart	Alt-Left	Ctrl-A
goLineEnd	Alt-Right	Ctrl-E
goLineRight	-	Cmd-Right
goLineLeft	-	Cmd-Left
goLineUp	Up	Ctrl-P
goLineDown	Down	Ctrl-N
goPageUp	PageUp	Shift-Ctrl-V
goPageDown	PageDown	Ctrl-V
newlineAndIndent	Enter	-
save	Ctrl-S	Cmd-S