ブログに掲載した写真の画質が低下してしまう原因と対策

ブログに画像を掲載した時に画質が低下してしまう原因と対策についてまとめておきます。

ブログの画質が低下する原因

ブログ上で画質が低下する原因は2つあります。

1つ目は、画像が滲んだり、ぼやけたり、解像度が落ちて見えるパターンです。

横幅1000pxの画像を800pxで表示

横幅800pxの画像を800pxで表示

メインカラム800pxのブログに1000pxの画像を掲載する様な場合が考えられます。また、画像にborderやpaddingを付けている場合も、その分だけ画像が縮小表示されている可能性があります。

ブラウザによっても影響は異なりますが、一番綺麗に見えるのは画像の幅とブログ表示の幅が同じ時です。

2つ目は、画像のノイズ（モスキートノイズ）が増えて見えるパターンです。

圧縮率大（43kb）

圧縮率小（197kb）

WordPressで画像圧縮系のプラグインを使用している場合は、圧縮率を上げすぎて、画像にノイズが出ている可能性があります。基本的に一度圧縮してしまった画像を元に戻すことはできないので注意して下さい。

ただ、スマホ表示では（ピンチアウトして拡大表示でもしなければ）どちらもほとんど違いが分からないので、スマホで閲覧しているユーザーに対しては、必ずしも対策が必要という訳ではありません。

対策

画像は、「ブログサイズに調整する」及び「ブログサイズよりも大きい画像はサムネイルを掲載して画像にリンクを貼る」方法がベストだと思いますが、この方法が使えない時は下記の方法を試してみて下さい。

画像がメインカラムからはみ出る

CSSに下記コードを追加します。

img {
    max-width: 100%;
    height: auto;
}

画像がメインカラムからはみ出してレイアウトが崩れるのを防いでくれます。

Google Chromeで画像がぼやける

CSSに下記コードを追加します。

img {
    image-rendering: -webkit-optimize-contrast;
}

Google Chromeで大きな画像を縮小表示させた時のピクセルぼけをある程度防いでくれます。

ボーダーを入れた時に画質が低下する

ボーダーを指定しているクラス属性に下記のプロパティと値を追加します。

box-sizing: content-box;

ボーダーや余白で画像の幅（width）が小さくなるのを防いでくれます。

但し、この方法は指定したborderとpaddingの分だけ親要素からはみ出る可能性があります。

絶対におすすめしない画像の掲載方法

親要素を超える大きな画像をそのまま掲載する方法は絶対におすすめしません。

この方法は、「縮小表示しているので画質が低下する可能性がある」「リンクを貼らないと元の綺麗な画像を見てもらえる可能性が低い」「無駄に容量の大きな画像を読み込むのでページの表示速度が落ちる」からです。

親要素を超える大きな画像を掲載したい時は、下記の様にサムネイルやブログサイズの画像に元画像のリンクを貼る方法がおすすめです。この方法なら、画質の低下やページの表示速度にも影響が出ないからです。

WordPressを使っている方は、Lightbox系のプラグインもおすすめです。

最後に

ブログにアップロードした画像の画質低下が気になる時は、この記事の内容を疑ってみて下さい。

但し、過去記事や画像については、CSSで多少の改善はできますが、完璧に修正できない可能性もあります。

あわせて読みたい

【フィギュア撮影】撮影ブースの作り方と必要な機材をまとめてみました フィギュア撮影ブースの作り方と必要な機材をまとめておきます。 【撮影ブースを自作するメリット】 撮影ブースを自作するメリットは、好きな背景紙で自由にライティン...