WordPress - 画像の遅延読み込み(Lazy-load)について

1. 画像の遅延読み込み(Lazy-load)とは

最初に見えている範囲(ビューポート)以外の画像などを読み込まずに、画面をスクロールなどして見える範囲に入ってから読み込むことで、最初に読み込む量を減らせるためページがはやく表示できるというもので、loading 属性を使用します。loading 属性は、loading="lazy"(読み込みを遅延)、loading="eager"(従来の読み込み)、loading="auto"(ブラウザ判断)という設定ができます。ただloading="auto"は使用が変更される可能性があるため使用しないほうがいいそうです。

2. WordPress の遅延読み込み(Lazy-load)

WordPress5.5 から追加された遅延読み込み(Lazy-load)は、width、height が指定されている img タグにloading=”lazy”を自動で追加するというものです。すべての img タグに適用されるわけではなく適用されるのは下記の範囲です。

  • 投稿の画像(the_content)
  • 抜粋の画像(the_excerpt)
  • テキストウィジェットの画像(widget_text_content)
  • アバター画像(get_avatar)
  • wp_get_attachment_image を使用したテンプレート画像

3. 画像(メディア)を追加したときの出力

メディアサイズなどデフォルトの状態で 1000x620px の画像を投稿に追加した場合、下記のようなコードが出力され、loading="lazy"が追加されていることが確認できます。

<img
  loading="lazy"
  width="1000"
  height="620"
  src="xxx.png"
  alt=""
  class="wp-image-xx"
  srcset="
    xxx.png         1000w,
    xxx-300x186.png  300w,
    xxx-150x93.png   150w,
    xxx-768x476.png  768w
  "
  sizes="(max-width: 1000px) 100vw, 1000px"
/>

srcset 属性

srcset 属性はブラウザが選択できる画像と、その画像幅を「px」ではなく「w」で指定します。上記の場合だと、ブラウザ幅が 768px になったときに、ブラウザ判断で「xxx-768x476.png」の画像に切り替えをしてくれます。

解像度の切り替え

例えば、画面に表示させたいサイズは 400x300px なので、400x300px の画像を用意したけど、Retina ディスプレイは解像度が普通のディスプレイの 2 倍なので画像がぼやけてしまうという場合、画像サイズが倍の 800x600px の画像を srcset で読み込み、下記のように「2x(解像度 2 倍の場合)」と記述するとディスプレイの解像度に合わせブラウザ判断で適切な画像に切り替えをしてくれます。「1x」は暗黙の了解で省略可能。

<img
  srcset="xxx-w400.png, xxx-w800.png 2x"
  src="xxx-w800.png"
  width="400"
  height="300"
  alt=""
/>

sizes 属性

sizes 属性は画像の表示条件や画像の表示サイズを指定します。画像の表示サイズは CSS スタイルが適用されていない画像に影響。srcset 属性がない場合、srcset 属性があっても「w」を持つ値がない場合、sizes 属性は効果がありません。 下記のような場合だと、ビューポート幅が 1000px 以下の場合、100vw(ビューポートの幅に対して 100%)で表示。それ以外(ビューポート幅が 1000px 以上のとき)は、1000px で表示する設定になります。

<img ... sizes="(max-width: 1000px) 100vw, 1000px" />

4. loding 属性を削除したい場合

loding 属性を自動で追加したくない場合は、functions.php に下記を記述します。

//functions.php

//loading="lazy"を削除
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

5. srcset 属性・sizes 属性を削除したい場合

srcset 属性・sizes 属性を自動で追加したくない場合は、functions.php に下記を記述します。

//functions.php

//srcset・sizesを削除
add_filter('wp_calculate_image_srcset_meta', '__return_false');

wp_calculate_image_srcset_meta - 画像の srcset 属性へのフック

6. width/height や class を削除したい場合(ClassicEditor のみ)

width/height や class を削除したい場合は下記を functions.php に記述します。下記は、ClassicEditor のみ有効で class を削除した場合、srcset 属性・sizes 属性も追加されなくなります。width/height を画像に追加すれば、エディタの HTML には表示されませんが、loading="lazy"は追加されます。

//functions.php

//画像のwidth/height、classを削除 (ClassicEditor)
function remove_image_attribute( $html ){
  $html = preg_replace( '/class=[\'"]([^\'"]+)[\'"]/i', '', $html );
  $html = preg_replace( '/(width|height)="\d*"\s/', '', $html );
  return $html;
}
add_filter( 'image_send_to_editor', 'remove_image_attribute', 10 );
add_filter( 'post_thumbnail_html', 'remove_image_attribute', 10 );

image_send_to_editor - エディタで画像を挿入するときの画像の HTML へのフック
post_thumbnail_html - 投稿サムネイルの HTML へのフック

7. width/height や class を削除したい場合(Gutenberg 対応)

width/height の削除

Gutenberg で画像を挿入したときに画像の width/height を削除したい場合は、下記を functions.php に下記を記述すれば width/height は削除されます。

//functions.php

//画像のwidth/heightを削除
add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' );

画像の class 追加、置き換え、削除

他にもいいやり方があるかもしれませんが、下記のコードでthe_content内の画像の class を変更できます。

//functions.php

//画像のclass追加、置き換え、削除
function image_replace_class($content) {
  global $post;
  $pattern        = '/<img(.*?)class=\"(.*?)\"(.*?)>/i';
  $replacement    = '<img$1 class="$2 " $3>';
  $content        = preg_replace($pattern,$replacement,$content);
  return $content;
}
add_filter('the_content','image_replace_class');

class をどうしたいかによって$replacementの内容を書き換えます。

//クラスの追加
$replacement    = '<img$1 class="$2 test" $3>';
//クラスの置き換え
$replacement    = '<img$1 class="test" $3>';
//クラスの削除
$replacement    = '<img$1 $3>';

Lazy-loading images in 5.5 – Make WordPress Core
Browser-level image lazy-loading for the web
画像埋め込み要素 - HTML: HyperText Markup Language | MDN