ドット絵をぼやけさせずに拡大させたい　CSSでpixelatedやらcrisp-edgesやら

私は16×16サイズなど、基本的に小さなドット絵を書きます。そのままのサイズで画面に写すと小さすぎて訳わからないので、拡大することになります。

でも、小さい画像を拡大するとぼやけてしまうので、それを防止するために、小さい画像を画像作成ソフト（私はAsepriteというソフトを使っています）で拡大して、pngファイルに書き出して、それをアップロードするという形にしていました。

それが面倒だと感じていたので良い方法はないか調べたところ、ドット絵をドット絵のまま拡大させる方法があることを知りました。

CSSでこんな機能があるそうで。

.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

image-renderingというのが画像の拡大縮小の仕方を指定する命令らしく、ブラウザによってpixelatedが効いたりcrisp-edgesが効いたりなどある様子。

ピクセル拡大を使いたい画像の「高度な設定」の「追加クラス」に私は「pixelated」というクラスを追加。

その後、「外観」の「追加CSS」に

.pixelated{
     -ms-interpolation-mode: nearest-neighbor;
   image-rendering: pixelated;
     image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
 }

と入れました。

あと、目次的なページの画像もpixelatedさせたいので、

.work-list li img{
     width:100%;
     ms-interpolation-mode: nearest-neighbor;
   image-rendering: pixelated;
     image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
 }

という感じにしています。

これでアップロードする画像はもとのサイズの物だけになるはず。