- ブログに投稿した画像がにじんだりぼやけたりする
シズク投稿した画像、どことなくにじんでない？
編集画面だと綺麗なのに、何で？
WordPresなどで挿入した画像、なぜか荒れて見えることってありませんか？
編集画面では綺麗に見えているのに、プレビューや公開後の画面では文字がにじんだり画像がぼやけたりするのって困りますよね。
ブログに画像を挿入する際は、ちょっとした工夫をするとにじみやぼやけを最小限に抑えることができます。
トモシビ今回は、ブログやWebサイトに投稿した画像がぼやけてしまう場合の対処法を紹介します。
画像がぼやける原因
画像自体は綺麗なのに、投稿した画像がぼやけてしまう原因は主に下記の3つです。
プレビューや公開後のページを確認すると、画像がにじんだりぼやけたりする。
その原因として最も有力なのが、画像が拡縮されてサイズが変化することです。
画像が引き伸ばされている
画像が引き伸ばされる現象は、元画像の作成サイズに比べて表示サイズが大きすぎる場合に生じます。
例えば元の画像が100×100pxなのに、画像の表示指定で200×200pxに拡大されているときなど。
↑100×100px
200×200px→
適正サイズでは滑らかで自然な演出をするアンチエイリアス加工は、拡大されたときはぼやけて見えるのです。
これは、サイズ指定だけでなくCSSの制御で悪影響が出ることもあります。
チェックポイント
- 画像ブロックの「画像のサイズ」や「画像の寸法」といった項目を確認する
- CSSのimgに関する指定で、「width: 」がauto以外に指定されていないか
例えばCSSで「width: 100%」になっていると、指定領域いっぱいに画像が表示されます。
元のサイズがピッタリ～大き目であれば問題ないものの、枠に対して画像が小さければその分引き伸ばされて表示されるのです。
画像が縮小されている
画像は、拡大されるときだけではなく、縮小されるときにもにじみやぼやけを起こします。
特に、細い線や文字はぼやけやすく、赤系の色はにじみが目立ちやすい傾向です。
アンチエイリアス加工は文字や画像と周辺を上手になじませるため、境界線をほんのりぼかします。
わずかとはいえぼかしが入った状態で無理に圧縮されるため、半端に太くにじんで見えるのです。
画像が縮小される場合も、拡大される場合と同じく画像サイズの指定やCSSの制御が悪影響を及ぼします。
チェックポイント
- 画像ブロックの「画像のサイズ」や「画像の寸法」といった項目を確認する
- CSSのimgに関する指定で、「width: 」がauto以外に指定されていないか
- テーマの機能などで枠線を付けていないか
画像が縮小される原因として見落としがちなのが、テーマの機能などで画像に枠線を付けている場合です。
テーマにもよりますが、画像の外側に枠線を描画しているのではなく画像サイズ外周に合わせて枠線が追加されます。
そしてわずかではあるものの、画像が縮小されているようです。
少なくとも、CocoonとSWELLではテーマ付随の機能で枠線を足したときににじみが生じました。
Retinaディスプレイの影響
ほかの端末では問題ないのに、iPhoneやMacなどのApple製品で表示したときだけにじむ。
そんな場合はRetinaディスプレイの影響かもしれません。
Retinaディスプレイに代表される高精細ディスプレイは、通常の画面に比べて2倍の解像度があります。
PCでの1pxを4pxで表現するため、画像が引き伸ばされたような状態で表示される場合があるのです。
対策方法は？
画像のぼやけに対する対策方法は、主に下記の4つです。
解決策その1：画像サイズ＝表示サイズにする
画像が拡大されることで粗が目立つようになり、それがにじみやぼやけとなって現れます。
無理に画像を大きくせず、作られたままのサイズで表示サイズを指定すれば元通りの画像を表示させることが可能です。
解決策その2：表示サイズに対して2倍の大きさで画像を用意する
画像を表示するサイズのちょうど2倍の大きさにすると、縮小されたときのぼやけが軽減されます。
100×100pxで表示予定なら、初めから200×200pxで作っておきましょう。
この方法はRetinaディスプレイによるぼやけ対策に最も有効です。
また、大き目のサイズを使用することにより、小さな画像を無理やり引き伸ばす現象も起きにくくなります。
ただし画像サイズが大きくなるため、ページの表示速度へ悪影響が出るかもしれません。
解決策その3：「％」ではなく数値で指定する
特に画面の幅に対して割合で設定していると、ちょっとだけサイズが合わなかった画像が勝手に拡大・縮小されてぼやけやにじみが生じます。
うっかりHTMLやCSSなどで「width: 100%」に設定していることがあるので、一度確認してみましょう。
「％」から数値での指定に変更するだけで、あっさり解決することがあります。
解決策その4：枠線を外す
テーマの機能で枠線を付けている場合は、一旦外してみましょう。
SWELLの場合、枠線によってこのように見た目が変化します。
デフォルト以外は、ほんの少しずつですがぼやけて見えますよね。
唯一、影ありのみが気にならないレベルでの差でしょうか。
ちなみにCocoonの場合、シャドー（薄い影・ペーパー）であればほぼにじみません。
写真の場合はいい感じにぼやけてくれますが、線がぱっきりしたイラストには向かないようです。
どうしてもボーダータイプの枠線を付けたい場合は、テーブルなどを利用してはいかがでしょうか。
おわりに
ブログなどへ投稿した画像がぼやけるときは、元のサイズと画像のサイズが変化していないか確認してみましょう。
画像が拡大・縮小されている場合は、正しい数値で表示サイズを指定すれば解消できます。
iPhoneなどでの表示が気になるのであれば、表示サイズの2倍で画像を作ればOKです。
また、テーマで付けている枠線を外したり種類を変更することでも解決できるかもしれませんよ。
それでは、ここまでお読みいただきありがとうございました。
