解決できるの？chromeだと画像がぼやけてないかい？ってお話
うーん、なんかブラウザがChrome（クローム）だと画像がぼやけるよなぁ……ってお話です。
パーセント指定など、縮小の比率で小数点が出てしまうのが画像がぼやける原因なんですよね。
ちなみに、Microsoft Edgeやfirefoxだとぼやけないです。
最近だとレスポンシブで作るのがほとんどだし、Chromeのシェアも高いし何とかならないかなーと思います。
まぁ、パーセント指定だと逃れようがない気がします。
解決策はあるのか
結論から言うと、
①画像を表示サイズでアップする
②表示サイズを小数点の出ないサイズにする
③スクエア（正方形）の画像にする
例として、表示されるサイズの横幅が1000pxだったとします。
①は、あらかじめ画像をwidth1000pxに縮小・拡大した画像をアップします。
そうすることで、表示される際に画像の縮小や拡大が起こらないので、heightもそのままの数値となり綺麗に表示されます。
②は、 あらかじめ画像をwidth2000pxとかwidth3000pxなどにします。そうすることで縦横比が整数値になるので、綺麗に表示されます。
③は、スクエアの画像にします。これだと単純にwidthとheightが同じなのでwidthが整数値で表示されている時はheightも小数点がでないので、結果綺麗に表示されます。
サンプルで検証
サンプルで1280 x 588の画像を用意しました。
【A】は1280 x 588をそのままアップしました。
親要素width896pxに100%を指定しているので、実際の表示はwidth：896pxなります。
そしてheightはauto指定でheight：411.25pxになってしまいます。
【B】は画像をアップする前に、width896pxにカットしています。
カットした時点でheightは412pxになっています。
そのままwidht896px、height412pxで表示されるので綺麗に見えます。
【C】は、画像にimage-rendering: -webkit-optimize-contrast;をつけると直るらしい。
ってことで、画像は①と同じサイズです。
当然、表示サイズはwidth896px・height411.25pxです。
どうでしょうか。（PCとかブラウザの横幅1000px以上で見てね）
……
……
圧倒的に【B】がきれいに見えてますよね。
画像の左の時計や人を見比べるとピントが合っている感じがします。
実は、【B】は896pxに縮小する際に、【A】の画像より30%程度劣化させてサイズを軽くしてます。
ピントが合わないと、これほど画像がぼんやりしてしまうかがわかりますよね。
まとめ
やっぱり根本的に解決する方法は、まだなさそうですね。
レスポンシブサイトだと小数点が出ないように設計するのは難しいですよね。
「大きく表示された時には、小数点が出ないようにして画像サイズをアップする」
これが一番いいんじゃないかな。
特にロゴとかね、ボケちゃうとかっこ悪いところは注意したいです。
まぁ、ロゴなんかだとSVGできれいに出した方がいいですね。
ではでは。
