全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
高解像度ディスプレイ対策に2倍の画像を設定したら、画像がぼやけてしまったときの解決法
2021.12.16
※この記事は2021年12月16日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
Retinaディスプレイやスマートフォンなどの高解像度ディスプレイへの対策として、2倍の画像を設定することが増えてきました。
設定してみたものの画像がぼやけていたり、鮮明に表示されないことがあります。
今回は、2倍の画像を設定したときにぼやける時の原因と対策をご紹介します。
高解像度ディスプレイで画像がぼやけないようにするために2倍の画像を設定する理由
まず、高解像度ディスプレイの場合、等倍サイズの画像を表示すると、ほぼ、ぼやけます。
これは、等倍サイズの画像の縦横を2倍に引き伸ばされて表示されることで起こる現象です。
高解像度ディスプレイと従来のディスプレイとでは、1ドットの細かさが違います。
そのため、等倍の画像だとぼやけて見えるのです。
そういったことから、あらかじめ、2倍のサイズの画像を設定しておくことで画像の引き伸ばしに対応できるようにする方法が多用されています。
2倍で設定した画像が、高解像度ディスプレイでぼやけてしまうときの解決方法
対策をしたにも関わらず、画像がぼやけてしまう場合、以下のことを確認してみてください。
■画像サイズが奇数になっている
原因：画像に奇数が入っていると小数点が発生してしまうため
画像の幅や座標位置がブラウザ側で処理しきれなくなり、ぼやけてしまうようです。
解決方法：画像サイズは偶数で用意しましょう。
■小さな画像がぼやける
原因：設定した画像の解像度が高すぎる
縮小率が高すぎ、縮小による画像の劣化が起きていることで、画像がぼけます。
解決方法：表示される画像のちょうど2倍の画像サイズの画像を設定すると縮小による画像の劣化を軽減できる。
■CSSのtransformによってぼやける
原因：画像に対して、CSSのtransformを指定した場合は画像を縮小させて表示するため
解決方法：imgタグに以下のCSSをあてるとぼやけるのが解消されます。
img {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
まとめ
高解像度ディスプレイに対応させた画像を設定しても、綺麗に表示されないこともあり、原因によっては対処法があることを紹介しました。
画像によっては2倍サイズでなくても綺麗に表示されることもあります。
読み込みに負担がかかるようであれば、倍率を小さめに調整してみたり、画像を圧縮処理するなど、工夫してみましょう。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 背景固定を『background-attachment: fixed;』で指定した際、…
こんにちは。コーダーの兼山です。 今回はドラッグで左右の比較表示ができるjQueryプラグイン「twentytwenty…
