Now Loading...

スタッフブログ

戻る

当社ブログは社員での持ち回りで掲載しております。
ビジネスだけではなく、社内イベント、プライベートなことを書いておりますので予めご承知おきください。

Chromeの画像縮小の罠

今回のブログ担当I.Sです。

もっとブログには技術系なこと書こうぜ!
と先日プレッシャーをかけられたので今回はそれっぽいのに挑戦してみようと思います。

今回はgoogle Chromeというブラウザについてなので、できればこの記事はChromeで御覧ください。

この記事はChromeでご覧ください。
※大事なことなので(略)

Chromeで画像を縮小したらぼやける場合

当社でも使用率の高いブラウザであるみんな大好きgoogle Chrome。

レスポンシブデザインで発生しやすいのですが、実はこの子css等で画像縮小すると結構な確率でぼやけるのです。

例えば、元の画像サイズが300×100pxの画像を使うとします。
で、style等で画像を幅200pxに縮小して表示するとします。


こんな感じですね。

ぼやけてますか?
これだけだとわかりづらいので解消するstyleを追加したバージョンと並べてみます。

右のほうが少しシャープに見えませんか?

違いは
backface-visibility: hidden;
というstyleの有無だけです。

違いが判らない人は、画像んのところで右クリックから「検証」、もしくはF12キーを押してChromeの開発者ツールを起動し、下記画像の赤いところをぽちぽちしてみましょう。

解消案

縮小しない画像を使う

いきなりそもそも論ですが、縮小させなければこの症状は発生しないので、元の画像サイズと同じサイズを指定していれば解決ですね。
レスポンシブサイトなどで、パソコンとスマートフォンで違うサイズで画像を使いたいとするなら、その際は縮小しなくていい別の画像を読み込むようにしたら大丈夫です。
具体的にはJavaScriptとかで頑張ったりする感じになると思います。

ブラウザ以外で画像を縮小する

これは確認までできていないのですが、php等のプログラムで画像サイズを切り替えられれば行ける気がします。
でもサーバーサイドでそれをやるとページ更新しないとダメですね。ということはこれでやるとしたら多分もっといろいろ考えないといけないですね。
※I.Sはここで考えるのをやめました。

Chromeの更新を待つ

この症状は2018/02/22時点のものなので、今後のChromeのアップデートで改善される可能性はあります。

上のstyleで解決

個人的に一番おすすめです。というか圧倒的に楽です。

もしレスポンシブデザインのサイトを作成中に、ロゴなどがぼやけるなんてことがあったらお試しください。

たぶんきっと大丈夫ですよ!

I.S

その他の記事

記事一覧

BitStar流

Contact Us

ご不明な点や、気になったことなど、
お気軽にお問い合わせください。

お問い合わせ

Recruit

新卒採用、中途採用、エンジニア採用、
デザイナー採用を行っています。

採用情報