スマホが普及したお陰でレスポンシブとかいう面倒な作業が増えてしまい、さらに、我らがゴッドのGoogle様も「2018年頭までにスマホ対応しなきゃ評価落としちゃうぞっ」とかトドメを刺しに来ている今日この頃、WEB制作者の皆様お疲れ様でございます。
今回は、サイト用の画像が端末によってボヤける現象のことです。よくあるRetinaディスプレイではなく、ChromeだけhtmlやCSSで画像を縮小するとボケる現象のことです。
下の画像は、右からChrome(Ver:61)、IE(Ver:11)、Firefox(Ver:55)。上部の画像は300pxの正方形。下部の画像はhtmlでwidth=”110″とした結果です。
この画像を見る限り、Firefoxが1番美しく、次いでIE、Chromeと続きます。
特にChromeは文字が滲んで目が悪くなったように感じるレベルです。これは苛つきます。
画像のボケでよくあるRetinaディスプレイの問題ではなく、普通のモニターで普通のPCブラウザでの問題なので捨て置けません。
色々と調べてみると、Chromeのヘルプフォーラムに私と同じ画像を縮小すると画像がボケてしまう現象について質問している方がいらっしゃいました。Chrome 58でサムネイル画像がぼやける
私もフォーラムにあるように、キャッシュクリア、ハードウェア アクセラレーションの無効化などを実施しましたが改善なしです。
ChromeVer58で起きている画像ボヤける問題で現在はGoogle預かりのアップデート待ち案件のようです。
現在Ver61ですが…改善してないやんけー!