WordPress：スマホ対応最適画像サイズのまとめ

過去記事2つのまとめになります。

• WordPress srcset, sizes, lazyを極める
• WordPress dprを理解してスマホに最適の画像を出力

要点はスマホの dpr を理解して WordPress 出力画像に最適な srcset, sizes 指定することです。

• デフォルトで作成される画像サイズ
  • デフォルト作成画像サイズ変更、無効化
  • フィルターフックで無効にする
  • 新たな画像サイズの登録
• スマホ対応画像設定の具体例
  • 作成画像サイズの変更
  • srcset, sizes の設定

01デフォルトで作成される画像サイズ

まず WordPress の画像関係のデフォルト設定を確認しましょう。

記事に画像を挿入したり、メディアライブラリに画像を追加した場合に作成される画像サイズは、たとえば 5083px × 2860px の example.jpg を保存した場合は次のようになります。

ファイル名	保存サイズ	表記
example-150×150.jpg	150px × 150px	thumbnail
example-300×169.jpg	300px × 300px	medium
example-768×432.jpg	768px × 768px	medium_large
example-1024×576.jpg	1024px × 1024px	large
example-1536×864.jpg	1536px × 1536px	1536×1536
example-2048×1152.jpg	2048px × 2048px	2048×2048
example-scaled.jpg	2560px × 2560px	full
example.jpg	元画像のサイズ	（original）

もちろん元画像のサイズが保存サイズに満たない場合は元画像サイズを越えるファイルはつくられません。たとえば 1200px × 675px の画像を保存しますと large 以下4つのファイルが作成されることになります。

また、記事に画像を挿入する際に指定するサイズの「フルサイズ（full）」は scaled がなければオリジナル画像が使われます。

デフォルト作成画像サイズ変更、無効化

デフォルトで作成される画像のサイズを変更したり、作成しないよう無効にする方法はいくつかあります。まず、thumbnail, medium, large は 設定 > メディア で変更できます。作成しないように無効にするには値を「0」にして保存します。

オプションファイルを直接変更することもできます。https://WordPressのURL/wp-admin/options.php にアクセスし、large_size など該当の値を変更して保存します。無効化は同じように「0」にします。設定 > メディア はこの値が反映されているだけです。

options.php には 設定 > メディア には現れない medium_large が現れますが、1536×1536, 2048×2048, full は現れません。ですので作成しないよう無効する方法がそれぞれ異なります。

フィルターフックで無効にする

デフォルトで作成されるサイズを作成されないよう無効にするだけであれば、次のフィルターフックを使うのが手っ取り早いです。functions.php に次のコードを書きます。

function imz_disable_image_sizes($new_sizes){
    unset($new_sizes['thumbnail']);
    unset($new_sizes['medium']);
    unset($new_sizes['large']);
    unset($new_sizes['medium_large']);
    unset($new_sizes['1536x1536']);
    unset($new_sizes['2048x2048']);
    return $new_sizes;
}
add_filter('intermediate_image_sizes_advanced', 'imz_disable_image_sizes');

thumbnail, medium, medium_large, large はこの方法でも無効にできます。また、あまりそうしたケースはないとは思いますが、もし全てのサイズを無効にするのであれば、もっと簡潔に次のようにします。

function imz_disable_image_sizes($new_sizes){
    $sizes = array(); 
    return $sizes;
add_filter('intermediate_image_sizes_advanced', 'imz_disable_image_sizes');

2560px × 2560px の scaled サイズはこの方法では無効にできません。次のようにします。

add_filter( 'big_image_size_threshold', '__return_false' );

ややこしいですね。

なぜ、thumbnail, medium, large は 設定 > メディア に表示されるのに medium_large は表示されないのか、それなのに options.php には表示されます。1536×1536, 2048×2048 にいたってはデフォルトで作成されるのにその存在自体が表立っていません。さらに、2560px × 2560px の scaled サイズはなぜ別格なのか、言い出せば切りがありません。

おそらくバージョンアップの際に後方互換を繰り返しているからじゃないかと思います。

新たな画像サイズの登録

とにかく、新たな独自画像サイズの登録です。add_image_size を使います。

function imz_image_setup() {
    add_image_size( 'x_large_size', 1200, 1200, false );
}
add_action( 'init', 'imz_image_setup' );

• add_image_size

パラメーターは、サイズの名前、横、縦、クロップ可否です。

アクションフックは after_setup_theme でも構いません。

02スマホ対応画像設定の具体例

ということで、この記事のポイントであるスマホの dpr を理解して WordPress 出力画像に最適な srcset, sizes 指定する具体例です。

宝島

対象は上のサイトです。画像に関するレイアウトは次のとおりです。

• 投稿ページは 1087px まで 1カラム
• 投稿ページのキービジュアルはデバイス幅100%
• 投稿ページのコンテンツ内画像はデバイス幅 92%〜 650px
• トップページなど他ページの画像は 300px 〜 650px

また、画像のクオリティについては

• 映画の宣伝用キービジュアルから作成
• その画像サイズは 2000px 〜 500px 程度
• 作成する元画像は 1920px × 1080px, 200KB を基本とする

という条件で、作成する画像サイズは次のようにしています。

作成画像サイズの変更

設定 > メディア を使わずにすべて functions.php に書き込んでいます。

function imz_image_setup() {
    // WordPressに予約されているサイズの変更
    update_option( 'thumbnail_size_w', 150 );
    update_option( 'thumbnail_size_h', 150 );
    update_option( 'thumbnail_crop', 1 );
    update_option( 'medium_size_w', 530 );
    update_option( 'medium_size_h', 530 );
    update_option( 'medium_large_size_w', 750 );
    update_option( 'medium_large_size_h', 750 );
    update_option( 'large_size_w', 1024 );
    update_option( 'large_size_h', 1024 );
    // 1536,2048サイズ作成無効化
    remove_image_size('1536x1536');
    remove_image_size('2048x2048');
    // 独自画像サイズ作成
    add_image_size( 'small_size', 300, 300, false );
    add_image_size( 'x_large_size', 1344, 1344, false );
    // 画像挿入時のデフォルトサイズをフルサイズに変更
    update_option( 'image_default_size', 'full' );
}
add_action( 'init', 'imz_image_setup' );
// scaledサイズ作成無効化
add_filter( 'big_image_size_threshold', '__return_false' );  

この条件、この設定ですとひとつ問題が発生します。

元画像 1920px × 1080px, 200KB は圧縮された jpg ですので WordPress デフォルトの圧縮率のままですと、x_large_size では元画像よりもファイル容量が増えてしまいます。画像にもよりますので一概には言えないのですが、たとえば、204,658B の画像が 258,321B になったりします。

jpg の圧縮率を変更します。

function imz_regenerate_jpeg_quality() {
    return 75;
}
add_filter( 'jpeg_quality', 'imz_regenerate_jpeg_quality');

デフォルトの圧縮率は 90 でハードコーディングされています。100 〜 0 の間で指定できます。

srcset, sizes の設定

この設定で次のファイルが作成されています。なぜこのサイズにしているかは、デスクトップの場合に必須の 300px 以外はあれこれ試して決めているだけです。スマホのデバイス幅や dpr がまちまちですので、テーマのレイアウトに応じてあれこれ試してそれぞれで決めるしかありません。

保存サイズ	表記
150px × 150px	thumbnail
300px × 300px	small
530px × 530px	medium
750px × 750px	medium_large
1024px × 1024px	large
1344px x 1344px	x_large
元画像のサイズ（1920px × 1080px）	full

srcset と sizes は投稿ページとそれ以外のページで振り分けています。

function imz_custom_image_sizes () {
    if ( is_single() )  {
       	return '(max-width: 1920px) 100vw, 1920px';
    }else{
        return '(max-width: 706px) 92vw, 300px';
    }
}
add_filter('wp_calculate_image_sizes', 'imz_custom_image_sizes');

投稿ページではデバイス幅 1920px までは幅いっぱいにという設定です。対象ページを見ていただくとわかりますが、ページの最初にデバイス幅いっぱいにキービジュアルを表示していますのでそのためです。記事内の画像は loading=”lazy” が働きますのでブラウザが表示幅最大で 650px を認識した上で画像を読み込みます。

<img width="1920" height="1080" 
src="takarajima.jpg" class="" alt="" decoding="async" fetchpriority="high" 
srcset="takarajima.jpg 1920w, 
    takarajima-530x298.jpg 530w, 
    takarajima-1024x576.jpg 1024w, 
    takarajima-750x422.jpg 750w, 
    takarajima-300x169.jpg 300w, 
    takarajima-1344x756.jpg 1344w" 
sizes="(max-width: 1920px) 100vw, 1920px">

以上の設定では WordPress はこの HTML を吐き出します。iPhone14ProMax、6.7インチ、CSSピクセル 430×932、デバイスピクセル 1290×2796、dpr 3 を例に取り、Chrome のデベロッパーツールで見てみますと、確かにデバイスピクセル 1290px を越える takarajima-1344×756.jpg を読み込んでいます。また、投稿ページには前後のページへのナビがあり、横幅 100 CSSピクセルの画像があります。こちらは takarajima-300×169.jpg を読み込んでいます。

トップページは各投稿ページのキービジュアルがずらりと並ぶレイアウトです。706px までは 92vw で表示せよに指示が効いていますので 1344×756.jpg を読み込んでいます。

デスクトップでも確認したところ、すべて計算通りの画像ファイルを読み込んでいます。

ということで、しばらくはこれでいってみようと思います。