ブログサイト等で、Chrome系ブラウザのボヤッとしたサムネ表示をくっきりさせる方法

Chrome.jpg

Google Chrome

ご自分のブログやHPを持っている方なら、なんとなく気がついている人は多いハズ
特に普段Firefoxを使っていて、表示確認の為にChrome系ブラウザで見ると
写真をクリックして拡大する前のサムネ状態(縮小状態)がなんだかぼやけているな・・・と

普段、Chrome系ブラウザしか使用しない方だと気が付かないかもです。

僕は、フィギュアの写真を載せるようになってからChrome系ブラウザはFirefoxよりサムネ状態(縮小状態)の表示がボヤッとしてると気が付きました。
(その状態は、おま環だと思っていましたけど。)

そこで、昨晩なんとなく「Chrome 画像 ぼやける」でググってみたら、同じ悩みの方がいるようで、解決策を見つけて記載していました。
これはWindows版Chromeで、レスポンシブデザインのHPやブログだと起こりやすいようです。
Googleはレスポンシブデザインを推奨しているのに、Googleのブラウザでレスポンシブデザインのサイトを見るとぼやけるってどういうことよ!

※レスポンシブデザインのサイトはGoogle検索で優位になりやすいそうです。
※SSL化(https)するとGoogle検索でより優位になると言う噂。

Chrome系ブラウザのぼやっとしたサムネ表示をくっきりさせる魔法のCSS



/* Chrome系ブラウザのサムネをシャープに */
img{
-webkit-backface-visibility: hidden;
}


上のCSSを自分が管理しているブログのスタイルシート(CSS)に追記するだけで
Chrome系ブラウザのサムネ表示が・・・。
あら不思議!
くっきりはっきりと✧*。٩(ˊωˋ*)و✧*。
サムネ状態(縮小状態)の鮮明度がFirefoxとほぼ同じくらいになりました。
(それでもFirefoxの方が曲線や斜線の表現が綺麗)

※FC2ブログなら、使用しているテンプレートのスタイルシート(CSS)に追記してみてください。

下の二枚はChromeから見たサムネ(縮小状態)をキャプチャした物
こちら、CSSを追加する前のサムネ(縮小状態)
mae.png

CSSを追記した後のサムネ(縮小状態)
ato.png

顔、特に目や頭の鍔の髪飾りあたりを見比べてみるとハッキリしたのが分かりやすいかと思います。
写真を中クリックで別タブで写真2つを開いて、タブを行ったり来たりすれば違いがわかるかと。

自分のフィギュアの写真は、いいカメラ使っているわけでもないし、それ相応の環境で撮影しているわけでもないので
あまり画質がよろしくないのに、そこでChrome系ブラウザで見ると、より一層ぼやけてピンぼけしているように見えていました。

これで少しはマシになったんじゃないでしょうか。
風景写真なら多少ぼやけていても気になりませんが、フィギュアの様な細部まで見せる写真だと鮮明さは大切ですね。

アクセス解析なんかを見ると、Chrome系ブラウザで閲覧している方が非常に多いです。
burauza.png
圧倒的なシュアですね Google Chrome
ブログサイトで写真を見る時、写真をクリックして拡大する人よりも
サムネ状態(縮小状態)だけをさらっと見てる人の方が多い気がします。
なので、サムネ状態(縮小状態)の写真の鮮明さは結構重要だと思います。
※CSSを追加する前でも、画像をクリックして拡大した時の表示はChrome系ブラウザでもFirefoxと代わり映えしない鮮明さです。

ただ、Chromeがその内このぼやけたサムネを改善する事もあるので、その時はこのCSSを消してください。
(Chromeの表示がぼやけるようになってからしばらく改善してないので、今後も改善する気は無いかもですが)

余談ですが。

僕の場合、Chromeはなんだか使いにくいので、Chromeベースのブラウザ「KINZA」を使用しています。
なかなかに使いやすいですよ!サイドバーもあるし、標準でマウスジェスチャも備えていますし。
なんと言っても、ブックマークを左クリックで別タブに開くことが出来る!僕はChromeの中クリックがどうしても馴染めませんでした。
それと、Chrome系ブラウザはマウスホイールのSmoothscrollがFirefoxに比べるとスクロールがぎこちないので
拡張入れてこんな感じの設定にしたら、Firefoxのスクロールに近づきました。
※マウスはLogicoolで高速スクロールするのを前提
Smooth.png


以上、
ブログサイト等で、Chrome系ブラウザのボヤッとしたサムネ表示をくっきりさせる方法
でした。

※メインブラウザはFirefoxを使用しています。最近56からQuantumにしたら自分のブログのUIがバグる事があるのが悩み所
その後、Firefox68でabout:config→「gfx.webrender.all」を「true」にしてwebrenderを有効にするとバグらなくなりました。

追記

上記のChromeのサムネ(縮小状態)ぼやけ対策CSSの効果が無い場合は、
コメント欄に「あさひわ@Asahiwa.jp(よつばとフィギュア)」さんがCSSを補記されておりますので、そちらも試してみると良いかもです。