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

フィギュアレビューサイトが絶対やってはいけない写真の掲載方法

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

目次

PR あみあみ予約受付中

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

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

画質低下の原因
  • 画像の幅とブログで表示した時の幅(width)が異なる
  • 画像をアップロードした時に画像が必要以上に圧縮されている

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

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

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

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

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

圧縮率大(43kb)
圧縮率大(43kb)
圧縮率大(43kb)
圧縮率小(197kb)
圧縮率小(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)が小さくなるのを防いでくれます。

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

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

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

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

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

ブログサイズ

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

最後に

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

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

PR あみあみ予約受付中

PR あみあみ予約受付中

今日の一言

2024年3月6日からGoogleのコアアップデートが始まりました。今回は長めの調整でまだ完了していません。このブログは、3月16日時点では確実にマイナス方向。雑記ブログが被弾しているのかと思いきや、僕にとって優良な記事を配信している特化型ブログも複数被弾しているので、一部の個人ブログが被弾しているといった感じ。なんとなくドメイン単位でフィルターをかけられているような気がします。捕捉されると、どんな記事を書いても中途半端な順位までしか上がらない。加えて、一部の記事が大幅に下落する傾向。

コメント

コメント一覧 (2件)

    • 説明不足で申し訳ありません。

      スマホで閲覧するとほとんど違いが分かりません(全て縮小されて表示されているため)。ですが、PCで閲覧するとなんとなく滲んでいるのが分かります(まつ毛を比較すると分かりやすいかも)。

      気にならない方もいると思いますが、自分でレタッチしてシャープ処理を入れて、少しでも写真を綺麗に見せたいと思っている方には気になるレベルです。

      僕もブラウザでどの様な処理が行われているのか分かりませんが、横幅100pxの画像を800pxで表示する場合、200px分が圧縮されている訳ですから、元の画像と全く同じ様に表示されないのはなんとなく分かる気がします。

コメントする

目次