ChromeやEdgeなどのWebkit系ブラウザで、背景画像がボヤけるケースがあります。

backface-visibility: hidden;を指定することで改善できることもありますが、他のプロパティとの兼ね合いでうまくいかないこともあるので、今回は別の方法をご紹介します。

ChromeなどのWebkit系ブラウザで画像がボヤけるときの対処法

div a {
	display: block;
	width: 150px;
	height: 80px;
	text-indent: -9999px;
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 150px 80px;
	image-rendering: -webkit-optimize-contrast;/* 追記 */
}

上記のソースのように、image-renderingプロパティを追記するだけです。

image-renderingプロパティは画像が拡大・縮小された場合の描画方法を指定するものです。

image-renderingプロパティには、以下のような値を指定できます。

div {
	image-rendering: auto; /* なめらか処理（初期値） */
	image-rendering: crisp-edges;/* なめらか処理しない */
	image-rendering: -webkit-optimize-contrast; /* crisp-edgesのWebkit用ベンダープレフィックス */
	image-rendering: pixelated; /* ドット絵っぽく */
}

今回の場合はChromeとEdgeで画像のボヤけが気になったので、-webkit-optimize-contrastを使って対応しました。

試しにcrisp-edges;を指定してみたところ、やはりFirefoxでは画像がギザギザになってしまいました。

まとめ

以上、ChromeなどのWebkit系ブラウザで画像がボヤけるときの対処法でした。

Edgeは以前は-ms-というベンダープレフィックスに対応していましたが、2020年にChromeと同じくChromiumをベース開発されるようになって以降は-webkit-に対応しています。

そのため現在では-webkit-（Chrome、Edge、Safari）か-moz-（Firefox）で、主要なモダンブラウザには対応できるようになっているようです。