ブログの画像の画質が劣化する原因と画質を上げる方法

ブログやホームページを制作する際に、画像の画質は非常に重要です。特に旅行サイトや物販サイトのように、画像を見て「その観光地に行ってみよう」「商品を買いたい」といった判断につながる場合、画質が悪いと行動までのハードルが上がります。この記事では、パソコンやスマホで見たときになぜ画像の画質が劣化するのか原因と対策を説明しています。なお、画質が落ちる原因は色々あって難しく、私も分かっていない部分があるので、間違いがあればコメントで教えていただけると幸いです。

画像の画質が劣化する主な原因

画像の画質が落ちる原因は、主に以下の2種類に分類されます。

画像のサイズを拡大・縮小している

画像は元サイズのまま拡大も縮小もせずに掲載するのが最も画質が良いです。拡大をすれば本来は存在しない部分にまで画像の情報を追加することになり、縮小をすれば本来は存在する部分の画像を削除することになります。画像の拡大の方が画質が劣化する度合いが大きく、特に注意しなければいけません。

画像を圧縮している

画像のサイズは変えていなくても、ファイルサイズを減らす目的で圧縮を行えば、画像の情報量が減って画質は劣化します。

サイトにアップロードした画像がぼやけていると感じたときは、この2つのどちらかに該当していないか考えましょう。ここからは、より具体的に画質が劣化する原因を考えていきます。

1. 画像を拡大している

例えば、横サイズが300pxの画像において、cssで「width: 400px;」のように指定をすれば、画像は拡大しているので画質は劣化します。他にも「width: 100%;」と指定しているときに、画像の親要素のサイズが300pxよりも大きければ画質は劣化します。

画質の劣化を防ぐには、cssでwidthの指定をせずに、元サイズのままで掲載します。デザインの関係などから大きめに画像を掲載したいときはcssで拡大するのではなく、イラストであれば作成のとき、写真であれば撮影の段階から、大きめのサイズで保存する必要があります。

2. Retinaディスプレイに対応していない

最近のスマホは「Retinaディスプレイ」を採用していることがあります。これは高解像度のディスプレイで、物理的なディスプレイの解像度はそのままに、論理的な解像度を小さくするものです。

例として横サイズが400pxの画像を表示するケースを考えます。通常はスマホの横幅が400pxであれば、スマホの横幅いっぱいに画像が表示されます。

一方でRetinaディスプレイは高解像度なので、同じ大きさのデバイスでも800pxの画像を表示できます。すると、800pxの領域に400pxの画像を表示しようとしているため、見た目の画像は小さくなってしまうのかというと、Retinaディスプレイでは論理的な解像度を小さくするので、通常のスマホと同じように横幅いっぱいに画像が表示されます。

400pxの画像であれば2倍に引き伸ばされて画質は落ちます。一方で、800pxの画像を用意すれば、横幅いっぱいという見た目の大きさは変えずに、画質だけを向上させることができます。ここで記載した400pxとか800pxの数値はあくまでも例で、何倍に画素数が拡大されるか（デバイスピクセル比）は端末によって異なり、記載時点では2倍や3倍になることが多いです。

Retinaディスプレイで拡大される画素数よりも画像が小さい場合、画質は劣化します。対処法としては、サイズの大きい画像を掲載することです。例えば、350pxの大きさで画像を表示したいときは、350pxの画像ではなく700pxの画像をアップロードします。

しかし、画像のサイズが大きければ画像の容量も増えるため、ページの読み込み速度は遅くなります。そのため、画像の枚数が多くてページの速度が気になるときは、srcset属性を使うのが一般的です。

srcset属性を使うと、ページを表示する際にRetinaディスプレイの有無によってダウンロードする画像を変えられます。

<img src="sample.jpg" srcset="sample.jpg 1x, sample2.jpg 2x" />

上の例であれば「1x」「2x」の部分がRetinaディスプレイの倍率になります。通常のディスプレイのときは「sample.jpg」が読み込まれ、2倍に拡大されるRetinaディスプレイのときは「sample2.jpg」が読み込まれます。sample.jpgは小さいサイズ、sample2.jpgは大きいサイズにしておけば、通常のディスプレイのときに無駄に大きい画像を読み込む必要がなくなり、ページの速度を上げられます。

WordPressであれば、記事の投稿画面にある「メディアを追加」というボタンから画像を挿入すると、ページを表示する際にデバイスサイズに応じたsrcset属性が自動で追加されます。正確には、imgタグに「class="wp-image-画像ID"」という属性があるとsrcset属性が追加されるようです。

もしも、Retinaディスプレイに対応したsrcset属性を手動で追加するときは、以下のような関数を使う方法があります。

add_theme_support('post-thumbnails');
set_post_thumbnail_size(400, 250);

function output_srcset_image($post_id, $size) {
    $thumbnail_url = get_the_post_thumbnail_url($post_id);
    if(!$thumbnail_url) {
        $output = '<img src="' . get_stylesheet_directory_uri() . '/images/no_image.png' . '" alt="" />';
    }else {
        $output = '<img src="' . $thumbnail_url . '" srcset="' . $thumbnail_url . ' 1x, ' . get_the_post_thumbnail_url($post_id, $size) . ' 2x" />' ;	
    }
					
    echo $output;
}

output_srcset_imageという自作の関数では、get_the_post_thumbnail_urlという関数によって投稿のサムネイル画像を取得してsrcset属性に設定しています。

get_the_post_thumbnail_urlは、サイズの引数がある場合は該当するサイズの画像を取得して、引数がない場合はset_post_thumbnail_sizeで指定したサイズの画像を取得します。ここでは、set_post_thumbnail_sizeで指定したサイズの画像をsrcset属性の「1x」に設定して、output_srcset_imageの引数に指定されたサイズの画像を「2x」に設定しています。

<?php output_srcset_image(get_the_ID(), 'full'); ?>

single.phpなどのテンプレートファイルから呼び出すときは、上のように使います。この例ではサイズに「full」を指定しているので、「1x」のときは「400, 250」の画像が表示され、「2x」のときはアップロードしたフルサイズの画像が表示されます。

3. 画像をJPEGで保存している

代表的な画像の保存形式には「JPEG」と「PNG」があります。

JPEGは写真のように色が複雑に変化する画像を圧縮してファイルサイズを小さくできるメリットがありますが、保存のたびに画質が劣化するというデメリットがあります。PNGは色が複雑に変化しない輪郭がはっきりした画像を綺麗に表示できますが、写真などの場合はファイルサイズが大きくなります。

画面キャプチャをするときは、PNGで保存する方が画質が良いと言われています。ただし、画面キャプチャでディスプレイ上の写真を写すときは、場合によってはJPEGを選んでください。

4. ディスプレイやブラウザを拡大している

アップロードした画像自体は拡大をしていなくても、ディスプレイやブラウザを拡大して使っていれば、画質が劣化する可能性があります。

私が使用しているパソコンのディスプレイを調べると、「125%」の拡大表示が推奨になっていました。

例えば、サイトの横幅が800pxのところに1900pxの画像をアップロードすれば、125%に拡大しても元サイズを超えないので画質の劣化は問題ないと思います。しかし、400pxの画像をアップロードした場合には画像が拡大されてぼやけて見えるかもしれません。

イラストを作成したり、写真を撮影したりする場合には、拡大しても足りるように大きめのサイズに画像を保存することで対処できます。しかし、画面キャプチャの場合には大きめのサイズで保存できないので、小さいサイズの画面をキャプチャする場合に画質の劣化は避けられないと思われます。

5. WordPressで画像を圧縮している

WordPressにアップロードした画像は自動的に圧縮されます。

JPEG画像には「圧縮レベル（品質）」という0から100までのスコアがあります。100が最も高画質で、0が低画質です。100に近づくにつれてファイルサイズが大きくなります。

WordPressでは、「wp-includes」フォルダにある「class-wp-image-editor.php」というファイルの中で、記載時点では圧縮レベルが「82」に指定されています。そのため、何もしなくてもアップロードした画像の画質は落ちて、その代わりにファイルサイズを減らせています。

add_filter( 'jpeg_quality', function( $arg ){ return 100; } );

勝手に圧縮されることを防ぐには、functions.phpにフィルターを登録します。コールバック関数で返す数値によって圧縮レベルを変更できます。上の例では「100」を指定しているので最も高画質になります。

また、画像を圧縮するプラグインを利用している場合には、当然ながら画質は落ちます。有名なものでは「EWWW Image Optimizer」というプラグインがあります。

プラグイン側ではなく自分で必要に応じて圧縮する場合には、EWWW Image Optimizerの設定画面で「無圧縮」を選択します。その際には「メタデータを削除」にはチェックを入れた方が良いと思います。個人情報が含まれる可能性のあるExifなど、画質とは関係のないメタデータを削除してくれます。

まとめ

これまで、画像の画質が劣化する原因と画質を上げる方法を説明してきました。

とにかく気をつけることは画像の拡大です。写真ではなくイラストやアイコンなどの場合は、拡大しても画質が落ちない「SVG」というファイル形式の画像を使う方法もありますが、記載時点ではセキュリティ上の理由からWordPressの標準機能としてはサポートされていません。

画質を上げる簡単な方法は、まずは大きめの画像を用意して、圧縮してからアップロードすることです。大きめの画像であればsrcset属性を設定しなくても拡大を防げます。圧縮によってページの速度も遅くなり過ぎません。もちろん圧縮によって画質は少し落ちますが、拡大よりは影響が少ないでしょう。

画像の枚数が多いときは、画像の遅延読み込みなども活用しながら、ページの速度にも気をつけてください。