previewer for pictSQUARE, originally by @file_c

<html>
<head>
<style>
@keyframes walk {
  25% {background-position-x: 0%;}
  50% {background-position-x: 50%;}
  75% {background-position-x: 100%;}}
div{display: inline-block;
  background: url(image.png) no-repeat 50% 0;
  animation: walk 1s infinite steps(1);
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
div{width:32px;height:32px;}
div:nth-of-type(2n){width:64px;height:64px;background-size: 300%, auto;}
div:nth-of-type(3),div:nth-of-type(4){background-position-y: 33.3%;}
div:nth-of-type(5),div:nth-of-type(6){background-position-y: 66.7%;}
div:nth-of-type(7),div:nth-of-type(8){background-position-y: 100%;}
</style>
<script>
window.onload = () => {
  let sel = document.getElementsByTagName('select')[0];
  sel.onchange = () => {
    let divs = document.getElementsByTagName('div');
    let len = divs.length;
    for (let i = 0; i < len; i++) {
      divs[i].style.backgroundImage = 'url(' + sel.value + ')';
    }
  }
  sel.onchange();
}
</script>
</head>
<body>
<select>
<option>image.png</option>
<option>image1.png</option>
<option>image2.png</option>
<option>image3.png</option>
</select><br />
<div></div><div></div><br />
<div></div><div></div><br />
<div></div><div></div><br />
<div></div><div></div><br />
</body>
</html>