こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。
ウェブサイト運営では表示環境によって画像のにじみが気になる場面があります。
結論から言えば画像をくっきりと見せたいなら「SVGファイルを使うのがベスト」。SVGファイルを使えばユーザーが閲覧しているモニター状況に応じてわざわざ画像を２種類ずつ書き出す必要もありません。
・Retina対応ディスプレイ
・非Retina対応ディスプレイ
最近はスマートフォンもPCもレティナ対応が標準化されていますが少し前の端末では「レティナ非対応のディスプレイ」も多いので可能な限り両方に対応させておくのがおすすめです。両方のモニターに対応させるもっともカンタンな方法がSVGファイル化。しかし、簡易的な方法で済ませるなら「CSSでの対応」もできます。
画像にじみをCSSで減らす
参考までに当サイトでは2022年3月時点で「ロゴ画像のSVGファイル化」をしていません。そのため非レティナ環境のディスプレイモニターで見ると下記の通り画像がにじんで見えます。まずはご確認ください。
そしてCSSを使ってにじみを解消させるCSSの書き方が下記です。
img {
image-rendering: -webkit-optimize-contrast;
}イメージレンダリングというプロパティ名からもわかる通り「画像を拡大縮小するアルゴリズムを設定」するためのCSSですね。webkit拡張で指定すればSafariやChromeのブラウザに対して有効となります。
PCで確認した表示例
CSSを適用してレティナ非対応のパソコンモニターで見えるとにじみが消えました。
スマホで確認した表示例
ただし、レティナ対応のスマホでは少し表示が汚くなります。わかりやすく若干大きい画像で書き出しました。文字の周りをよく見るとギザギザが目立っていますよね。特に小さな文字が不自然です。
やはり両方のディスプレイで綺麗に表示されるのはSVGファイルです。ただ、SVGファイル化も手順を間違えるとロゴに歪みが出るため正しい手順で書き出す必要はあります。以前にロゴ画像にSVGファイルを適用した記事があるのでぜひとも併せてご参考くださいませ。ロゴを表示させる方法も色々と奥が深いですね。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
