2018年05月24日

Google Chromeで画像がぼやけて見えるのを直す はてなブックマーク - Google Chromeで画像がぼやけて見えるのを直すこのエントリーをはてなブックマークに追加

こんにちは、白井です。

突然ですが、ホームページに画像を載せたときに「拡大したわけでもないのに何かぼんやりしてない?」と思ったことがある方はいますでしょうか。

Webサイトを作っていると載せた画像がなんだかぼんやり見えて、疲れてるのかな?と思ったこともありましたが、そういう理由でぼやけているわけではありませんでした。

結論から言うと、
画像がぼやけるのはGoogle Chrome(Windows)特有の現象。
CSSに img{-webkit-backface-visibility: hidden;} といれると直る。

というところのようです。

***

まず、以下の画像を見てみます。

01

弊社製品「ビジネス通話録音」のサイトです。
実際にサイトを見ていただいたほうがわかりやすいのですが、下段Google Chromeはロゴのあたりなど特になんとなくうすらぼんやりとしています。
こちらのサイトにはbackface-visibilityの指定はありません。

次にこちら。

02
これまた弊社の「ひかり電話転送」のサイトです。
(色味はともかく)女性の輪郭などEdge、Chromeともにシャープになっています。
こちらはbackface-visibilityをhiddenに指定してあります。

この画像がぼやける現象はWindows版のGoogle Chromeのみで確認されている現象らしく、img要素にbackface-visibility:hiddenを指定することでなぜか直ります。

もともとbackface-visibilityは「画像の裏側を見せるか否か」のプロパティで、画像がコマ回しのように3D回転するときに裏から見て画像が見えるようにするかどうかなどを指定するときに使うもののはずですが、なぜか画像のぼやけも直ります。
その他にもCSSアニメーションでちらつきがあるときなどに使うと改善されたという情報もあるため、Chromeで見え方が気持ち悪い…というときに一度試してみてはいかがでしょうか。
(裏技的用法なのである日突然使えなくなる手かもしれませんが)

そういえばこの比較画像を作っているときに、随分前のアップデートでChromeの色がくすむようになってしまったことを思い出しました。Edgeってこんなに鮮やかな色をしてたんですね…。


sakamo_knowledgeflow at 17:21コメント(0) この記事をクリップ!

コメントする

名前:
URL:
  情報を記憶: 評価:  顔   星
 
 
 
i-Web Message
yhayashiにメッセージを送れます

PR広告
月別アーカイブ
最新コメント
最新トラックバック
livedoor Readerに登録
RSS
livedoor Blog(ブログ)