image-rendering

README.md

image-rendering

view on jsgist

index.css

.outer {
  display: flex;
  text-align: center;

  & > div  {
    border: 1px solid #333;
    margin: 0.5em;
  }

  img {
    display: block;
    margin: 0.5em;
  }

}

index.html

<div class="outer">
  <div>
    <img src="https://i.imgur.com/fqgm8uh.png" style="width: 128px; height: 128px">
    <caption>default</caption>
  </div>
  <div>
    <img src="https://i.imgur.com/fqgm8uh.png" style="image-rendering: pixelated; width: 128px; height: 128px">
    <caption>pixelated</caption>
  </div>
  <div>
    <img src="https://i.imgur.com/fqgm8uh.png" style="image-rendering: crisp-edges; width: 128px; height: 128px">
    <caption>crisp-edges</caption>
  </div>
  <div>
    <img src="https://i.imgur.com/fqgm8uh.png" style="image-rendering: -webkit-optimize-contrast; width: 128px; height: 128px">
    <caption>-webkit-optimize-contrast</caption>
  </div>

index.js

/*bug-in-github-api-content-can-not-be-empty*/

jsGist.json

{"name":"image-rendering","settings":{},"filenames":["index.html","index.css","index.js"]}