Retinaディスプレイで2倍、3倍の画像を設定したときにぼやける時の原因

こんにちは。
MaromaroのChieです。

Retinaディスプレイのように高画質の液晶が普及したことにより、2倍、3倍の画像を設定することが増えてきましたが、なんだか画像がぼやけていたり、鮮明に表示されないことありませんか？
今回は、2倍、3倍の画像を設定したときにぼやける時の原因をご紹介！

高解像度ディスプレイに等倍サイズの画像を表示した場合

確実にぼやけます。
これは、高解像度ディスプレイでは、等倍サイズの画像の縦横を2倍に引き伸ばされて表示されるため、ぼやけて見えるのです。

Retinaディスプレイなど、高解像度ディスプレイと従来のディスプレイとでは、1dotの細かさが違うので、等倍の画像だとぼやけて見えてしまうんですね。

2倍、3倍で作成した画像なのにぼやける場合

さて、では2倍、3倍で作成した画像なのに、なんだかぼやけて表示されてしまうことが実はあります。
原因はいくつかあるため、もしもWebで表示したらなんだかぼやけた・・・というときは下記の項目をチェックしてみてください。

高解像度ディスプレイで小さな画像がぼやける

きれいな画像を表示させるなら、高解像度の画像を設定しておけばいいんじゃない？ってことで、縦横数千pxの画像を用意し、それを高解像度ディスプレイで表示したら、ぼやけた・・・・なんてこともあります。

これは縮小率が高すぎるが故に、縮小による画像の劣化が起きてしまっています。
2倍、3倍と言われているように、表示される画像のちょうど2倍の画像サイズ用意しておくと、縮小による画像の劣化を軽減できますので、適切なサイズで画像は用意しましょう！

画像サイズが奇数になっている

画像に奇数が入っていると小数点が発生してしまうため、画像の幅や座標位置がブラウザ側で処理しきれなくなり、どうやらぼやけてしまうようです。

CSSのtransformによってぼやける

CSSのtransformを画像にあてた時に画像が少しぼやける場合があります。
これもまた、画像を縮小させて表示しているのが原因となります。
解決方法は、imgタグに以下のCSSをあてるとぼやけるのが解消されます。

.xxx img {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

まとめ

単純なようで単純でない2倍、3倍画像。
正しいサイズ、正しい設定でワンランクアップのWebサイトを目指しましょう！