Wordpressで画像がぼやける原因と解決策！スマホだけ画像が荒くなる？高画質化のヒント。

WordPressで画像がぼやける原因とその解決策

サイト運営者たるもの、ぼやけた画像ほどイライラするものはありません。

元の画質が悪いなら納得ですが、高画質な画像をアップロードしているのにサイトに表示した瞬間ぼやけて見にくくなっているともう耐えられませんよね…

僕もかれこれ数年間悩まされていたのですが、試行錯誤の末やっと綺麗に画像を表示することが出来ましたので、この記事で共有しようと思います。

今までの経験からWordpressで画像がぼやける原因は以下です。

特に最後のCSSによる圧迫が盲点でした。普通気付かないですｗ
これまで色々勉強したので、画像を綺麗に見せる方法なども詳しく書きます。
長くなりますが、問題解決に向けて最後までお読みいただければと思います。

この度、色々な説明のために"繊細な画像"が必要だったので用意しました。

デジカメで撮影した松の木です。こういうのは自前の方が味があります。
これをサンプルにWordpressで画像がぼやける原因と解決策を見ていきましょう！

原因その１．元の画像の画質が悪い

これが原因の方はほとんどいないと思いますが、まずは基本からです。
元の画像サイズが小さい（画質が悪い）と当然画像は汚くなります。

サンプル画像は200×100pxです。
これを当サイトの画像表示領域いっぱいに広げて表示してみます。

画像サイズは200×100px（約8KB）

ぼやけてますね。このように小さい画像をびよーんと伸ばして表示するとダメです。

解決策

これはもうソフトやアプリなどで高画質にするしかないです。
小さい画像をリサイズして大きくするのは原因解決にはなりません。

原因その２．アップロード時の自動圧縮

続いて画像アップロード時の自動圧縮についてです。
これは結構有名な話ですが、Wordpressでは画像のアップロード時に自動生成される画像が自動的に圧縮されてしまいます。

これはWordpress標準の機能で何か触っていない限り有効になっています。
少し調べたところ、この圧縮品質はWP4.5以前は90%、WP4.5から82%、WP5.8以降は86%に設定されているようです。（0％が低画質、100％が高画質です。）

こちらもサンプルを用意しました。
（別サイトで生成した画像。当サイトでは元画像から若干圧縮しています。）

WP5.9デフォルト値（多分86%）

Wordpress5.9.1にそのまま画像をアップロードした画像です。（容量：約80KB）

圧縮品質100%

続いて圧縮品質を100％（圧縮なし）に設定した画像です。（容量：約258KB）

圧縮品質10%

最後に圧縮品質を10%まで落とした画像です。（容量：約18KB）

デフォルト設定でも画質はそれほど問題なく見えます。
見た目はあまり？劣化しない割に容量はかなり削れています。

それではこの圧縮率の変更方法を見ていきましょう・ｗ・

画像アップロード時の圧縮率を変更する方法

アップロード時の自動圧縮が気になる方は100%（圧縮なし）にしておけばOK！
Wordpressで自動生成される画像の圧縮率を変更する方法はfunctions.phpにコードを１行追加するだけです。

コード内の100のところが圧縮品質です。
これを10にしたのが先ほどのサンプル画像の最後です。

 functions.php
//画像圧縮品質変更(PHP5.3以上)
add_filter( 'jpeg_quality', function( $arg ){ return 100; } );

 functions.php
//PHP5.2以下の場合はこちらのコードを使う
add_filter('jpeg_quality', create_function('$arg','return 100;'));

PHP5.3以上なら上のコード、PHP5.2以下なら下のコードを使って下さい。
現在ほとんどの方がphp5.3以上を使っていると思われます。

functions.phpが分からないという方は関連記事をご参照下さい。↓

関係するコードはwp-includes/class-wp-image-editor.php内に書かれているので参考にするのも良いですが、コアファイルなのでfunctions.phpを使いましょう。

wp-includes/class-wp-image-editor.php

コードについては本題とずれますので、これ以上は割愛します。

圧縮率を変更する場合は画像容量に注意しましょう。
高品質な画像程ページが重たく、遅くなります。サーバーの容量も考えましょう。

アップロード済み画像の圧縮やサーバーの容量アップは後からでも何とかなります。
それよりも画質を90％→100％にするために全画像をアップロードし直す作業の方がつらいと思いますので、分からない方はとりあえず100％（圧縮なし）に設定しておくのが良いかと思います。

原因その３．アップロード時の自動リサイズ

Wordpressには先ほどの自動圧縮の他にも自動リサイズという機能があります。
先に伝えておくと、これは画像のぼやけには関係がありません。
が、Wordpressで更に高画質な画像を使いたい方向けに書いておきます。

どのような機能かというと、大きすぎる画像をアップロードした際に自動的にサイズを小さく縮小リサイズするという機能です。

具体的には2560pxを超えるサイズの画像をアップロードした時にリサイズされます。

こちらもサンプル画像を使って見ていきますね・ｗ・

5152×3864pxの画像をアップロードしてみる

デジカメの高画質モードで撮影した5152×3864pxの画像です。
こちらをそのままWordpressにアップロードしてみます。

「-scaled」はリサイズされた画像の意味

その後、Wordpressのメディアからアップロードした画像を確認してみます。
すると画像名の後ろに「-scaled」というものが自動付与され、サイズが横幅2560pxになっていますね。さらにサイズは約8MBから約1MBと8/1になりました。

このようにWordpressには大きすぎる画像（2560px超え）をアップロードすると自動的に縮小リサイズする機能もあります。
ただ、2560pxもあれば十分高画質で画像がぼやけるということはないです。

この縮小リサイズ機能もfunctions.phpにコードを追記すれば簡単に停止できます。
気になる方は関連記事をご確認下さい。

原因その４．Retinaディスプレイでの閲覧

スマホやiPad、Macで画像を見た時に画像がぼやけるならRetinaディスプレイが原因の可能性が高いです。
逆に言えばフルHDのパソコンで画像を見た時は綺麗に表示される時です。

現在主流のパソコンの画面はフルHDで1920×1080pxの解像度を持っています。
スマホはというと、iPhone12 Proでも画面サイズはせいぜい390x844pxです。

ですが、実はここに落とし穴があります。
iPhone12 Proは画面サイズこそ390x844pxですが、Retinaディスプレイというものが搭載されているため、事実上1170x2532pxの解像度で画面を描写しているのです…

なので横幅390pxの画像を表示しても、1170pxで描写されるのでぼやけます。
iPhone SEなら２倍、iPhone12クラスなら３倍のサイズの画像を読み込むのです。

これがWordpressの画像がスマホでぼやける原因の１つです。

解決策

とはいえ、Wordpressでは実はRetinaディスプレイに対応するためにsrcsetというHTML属性を画像内に自動的に付与して出力してくれています。
なので1000pxほどの画像であれば問題なく綺麗に表示できるはずです。

ただし、srcsetに自動的にセットされる画像URLはアップロード時にメディア設定などでサイズを設定してあり、自動生成された画像のみです。
アップロード後に自分で画像を再生成して画像のメタデータがうまく紐づいていない場合や、アスペクト比が異なる場合はセットされません。

これもサンプル画像を使って目視確認してみましょう。

srcsetに1200×600pxを入れた画像

srcsetの指定をしていない画像

HDディスプレイ（パソコン）なら上下はほとんど同じ画質に見えます。
Retinaディスプレイ（スマホ）なら上が高画質に見えるはずです。（多分…）

こんな感じで画像の表示領域が300×150pxであっても、Retinaディスプレイでは1200×600pxの画像が読み込まれます。

こちらも詳しくは別の記事に書いています。気になる方はどうぞ・ｗ・

（サンプル画像はこの関連記事の使い回しです…繊細な写真が松しかない…）

原因その５．CSS等で画像を縮小表示している

ここまで書いた方法を全部試しても画像のぼけが治らず、Wordpressでは画像が荒く表示されるものなんだ…と諦めていたのですが、先日この内容で解決しました。

これ、どこにも書いていないので解決までに３年かかりました。
うちのサイトに来てくれてここまで読んでくれた人へのお礼です。（何様）
くれぐれも内緒ですよ！・ｗ・

どうやら画像の外枠などをCSSでつけて画像をキュッと縮小して表示していると画像がボケるようです。
当サイトの場合はパソコンもスマホも、ブラウザも関係なく画像がぼけていました。

どういうことか見てみましょう…（これ伝わるかなぁ…）
色々探した結果、一番伝わりやすそうな他記事のアイキャッチをサンプルにします。
画像の内容は気にしないで、細かい英文字の部分を中心にご覧下さい。

694×347pxの画像をそのまま表示中

こちらが画像にCSSを付けずそのまま表示した画像です。

694×347pxの画像にCSSでborder:1pxを付与

続いてこちらが画像の外枠にCSSでborder:1pxを付与した画像です。
上の画像と比べてボケているのが分かりますか？？（英文字の所が良く分かる？）

自分でも分かりにくいのでGIFを作ってみました。

CSSあり、なしでのぼやけ具合の比較（GIF）

CSSで枠線を付けた時だけ少しボケているのが伝わりますかね？

当サイトでは、大サイズ（694×347px）でもあってもフルサイズ（1500×750px）であっても画像の外側にCSSを指定すると画像がぼやけました。

解決策

もしも画像周辺にCSSでスタイルを当てており、画像が圧迫されて縮小表示されているようであれば、このスタイルを外してみて下さい。

これで画像が鮮明に表示されるようになれば僕と同じです。

考えられる原因は個人的な推測なのですが、画像周りのCSSで画像の表示幅が小さくなり、この状態で画像がブラウザによって再描写されていることが原因なのではないかな？と思います。

具体的な解決策としてはCSSを外すか、枠線をつけたいなら画像の表示領域に影響しないようにCSSを当てる必要があります。

枠線を付ける時に使えそうなCSSは以下の２つです。
１つめはoutlineとoutline-offsetを使って画像の内側に枠線をつける形です。

 css
img.classname {
outline: 1px solid #000;
outline-offset: -1px;
}

outline-offsetに枠線分のマイナス値を指定するのがミソです。
この組み合わせによって"画像の内側"に枠線をつけることが出来ます。

そして２つめがbox-shadowを使って"画像の外側"に枠線をつける形です。

 css
img.classname {
-moz-box-shadow: 0 0 5px #808080;
-webkit-box-shadow: 0 0 5px #808080;
box-shadow: 0 0 5px #000;
}

画像枠用のCSSをこんな感じに指定しておけば画像のぼやけは無くなりました。

画像の周りにCSSで枠線を付けるのは良くあることだと思います。
よく使うChromeブラウザだけかなと思ったのですが、そうでもないようです。
画像のぼやけでお困りの方は、ぜひ一度ご確認下さい。

一応、埋め込み画像自体のサイズを気持ち小さくしても解決するはずですが、全画像を再生成なんてやってられませんしね…

WordPressで画像を綺麗に見せる方法

ここまでの内容を全て試せば画像がぼけて表示されることは無いはずです。
僕も数年悩んでいましたが、CSSが根本的な原因でした。

ここから先はCSSを使って画像をシャープネス（輪郭を強調）に見せたりる方法や、画像アップロード時に自動的にシャープネス加工する方法をご紹介します。

ただ相性が悪い画像もありますので、あまり使えない方法かもしれません。
CSSは簡単に取り消せますが、画像アップロード時の加工は戻すのに再アップロードが必要になるのでご注意ください！

CSSを使って画像をシャープネスに表示する

CSSの「image-rendering」というプロパティーを使えば、ブラウザが画像を縮小したり拡大したりする時のアルゴリズムを変更することが出来ます。

これを使って画像の輪郭を強調するシャープネス表示を行ってみましょう・ｗ・

今回はサンプル画像に以下のCSSを適用して比較してみます。

 css
img{
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: pixelated;
}

松の木では違いが出ませんでした…ので先ほどのアイキャッチを使用します。

CSS指定なし

こちらがCSSなしで普通に埋め込んだ画像です。

CSS指定あり

続いてこちらがCSSに「image-rendering: pixelated;」を指定した画像です。
違いが分かりますでしょうか？

なおこのプロパティーは画像の縮小＆拡大時に適用されるため、画像表示幅ピッタリのサイズの画像や小さい画像？には効きません。
今回はフルサイズで埋め込み、意図的に縮小表示になるようにしています。

なお「pixelated;」以外のプロパティーもあります。
ブラウザによっては対応できないかもしれませんが、ここでは割愛します。

画像アップロード時にシャープネス化する

先ほどの方法はCSSを使って画像をシャープネスに表示しました。
これと同じようなことを画像のアップロード時に行うことも可能です。

functions.phpに下記のコードを追記すればOKです。（JPEGのみ対応）

ただしこの方法も加工の相性が悪い画像があり、元の画像をアップロードし直さないと元に戻せないので僕は非推奨です。

function wps_sharpen_resized_file( $resized_file ) {
    $image = wp_load_image( $resized_file );
    if ( !is_resource( $image ) )
        return new WP_Error( 'error_loading_image', $image, $file );
    $size = @getimagesize( $resized_file );
    if ( !$size )
        return new WP_Error('invalid_image', __('Could not read image size'), $file);
    list($orig_w, $orig_h, $orig_type) = $size;
    switch ( $orig_type ) {
        case IMAGETYPE_JPEG:
            $matrix = array(
                array(-1, -1, -1),
                array(-1, 16, -1),
                array(-1, -1, -1),
            );
            $divisor = array_sum(array_map('array_sum', $matrix));
            $offset   = 0;
            imageconvolution($image, $matrix, $divisor, $offset);
            imagejpeg($image, $resized_file,apply_filters( 'jpeg_quality', 90, 'edit_image' ));
            break;
        case IMAGETYPE_PNG:
            return $resized_file;
        case IMAGETYPE_GIF:
            return $resized_file;
    }
    return $resized_file;
}

これで画像アップロード時にシャープネス加工されます。

この手のプラグインもあるようなのですが、コードはほとんど同じでした。
おまけとしてここに書きましたが、オススメしません！
何としても画像をシャープネス化（輪郭を強調）したい時はCSSを使いましょう。

まとめ

以上、Wordpressで画像がぼやける原因と解決策、そして画像をシャープネスに表示する方法でした。

一応、全画像フルサイズで埋め込めば画像がぼけることは無いと思うのですが、超大きい画像を良い感じの大きさで表示するだけで、読み込みが重くなりページ表示速度が遅くなるので良くありません。
（特に非RetinaディスプレイであるPC表示に影響するはず。）

ここら辺を含む内容で"Wordpressのメディア設定と各画像サイズの使い方"について熟考した記事も書いています。
まだお読みでない方は是非こちらもチェックしていって下さい。↓

ひとこと

ふたを開けてみれば書くのに４日かかってしまいました。
画像１つにしてもテストサイトと本番環境で随分動作が異なることがあります。

画像の圧縮率が変更されなかったり…GIFが動かなかったり…
また閲覧するブラウザによっても千差万別だったりします…

この記事で皆さんのサイトの画像がぼけなく、綺麗に表示されたことを願います。
松の木の写真。思ったより使えなかった…ではではこの辺で・ｗ・