【CSS】transformを画像に当てているとぼやけてしまう時の対処法

みなさん、こんにちは。

CSSのtransformを画像に当てた時に画像が少しぼやける現象に遭遇しました。
その解決方法をご紹介します。

画像がぼやけてしまったソースコード

HTML

<div class="wrap">
	<div class="inner">
		<figure class="pic"><img src="images/pic.png" alt=""></figure>
	</div>
</div>

CSS

.inner {
	width: 1000px;
	height: 500px;
	margin: 0 auto;
	position: relative;
}

.pic {
	width: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

imgタグの画像は高解像度ディスプレイにも対応できるように2倍の大きさでした。

解決させる方法

imgタグに以下のCSSをあてるとぼやけが解消されました。

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

まとめ

画像を等倍サイズで書き出している場合はぼやけることはありませんでした。
ですので、原因は画像を縮小させて表示していることにあるかと思います。

本来は高解像度ディスプレイに画像を対応させる場合はimgタグの「secret」で高解像度の画像を指定するのですが、複数画像を用意する手間が増えてしまうので、画像の容量が軽いものは倍のサイズの画像で対応してしまうこともよくあるかと思います。

そんな時に知っておくと便利かと思います。

参考サイト

https://www.futaego.com/2017/css3-transition-transform-%E7%94%BB%E5%83%8F%E3%81%8C%E3%81%BC%E3%82%84%E3%81%91%E3%82%8B/