WordPress

WordPressサイトの記事に表示した画像を観察する (Gutenberg)

投稿日:

1. はじめに

WordPress の記事編集ページで Gutenberg の「画像ブロック」を使った場合、どのように画像が扱われるかを観察しました。

2. 環境

  • WordPress 5.8.1
  • テーマ:Twenty Twenty-One(バージョン: 1.4)
  • 利用する画像ファイル:サイズが 1470×981 のJPG画像ファイル

3. 観察結果

(1) 生成された画像ファイル

画像ファイルを WordPress サイトにアップロードすると、Webサーバー上に以下のファイルが生成されました。

  • foo.jpg(アップロードした画像、サイズは 1470×981)
  • foo-1024×683.jpg (大サイズ)
  • foo-768×513.jpg(レスポンシブル用画像サイズ、medium_large)
  • foo-300×200.jpg (中サイズ)
  • foo-150×150.jpg (サムネイルのサイズ)

自動生成された画像サイズは、「メディア設定」で指定されています。

このときの「メディア設定」
このときの「メディア設定」

ここにない「レスポンシブル用画像サイズ (medium_large)」は、デフォルトで 768px と決まっています。これを変更するには、update_option() 関数を実行する必要があります。

参考

(2) 記事に貼り付けた画像の設定と表示(PC向けその1)

デバイス側の条件として以下を想定します(PCを想定)。

  • ウィンドウ幅:1341px
  • デバイスピクセル比:1

記事編集画面上で画像ブロックを使うのですが、まずは画像ブロックの設定を以下にして画像を表示させました。

画像ブロックの設定

こんな感じで画像が表示されます。

PC向けその1

画像部分のHTMLソースは以下となっています。

<figure class="wp-block-image size-large">
  <img loading="lazy" 
       width="1024" height="683" 
       src="/wp-content/uploads/2021/10/foo-1024x683.jpg" 
       alt="foo" class="wp-image-22" 
       srcset="/wp-content/uploads/2021/10/foo.jpg 1470w,
               /wp-content/uploads/2021/10/foo-1024x683.jpg 1024w,
               /wp-content/uploads/2021/10/foo-768x513.jpg 768w,
               /wp-content/uploads/2021/10/foo-300x200.jpg 300w" 
       sizes="(max-width: 1024px) 100vw, 1024px">
</figure>

このとき、

  • 実際にダウンロードされた画像は「foo-1024×683.jpg」
  • 画像の表示サイズは、610×407
    • 画像を表示する部分の幅が狭く、このサイズになりました。

でした。

ダウンロードされた画像ファイルが「foo-1024×683.jpg」になったのは、このときの ウィンドウ幅が 1024px 以上であり、sizes属性により決定した画像表示幅が 1024px になったためだと考えられます(srcset 属性で指定された画像ファイルの中から、「幅が1024px以上」という条件を満たした最小の画像ファイルをブラウザが自動で選択したということです)。

ただ、実際の表示サイズは 610×407 であったため、ダウンロードされるのに最適なファイルは「foo-768×513.jpg」でした。sizes 属性値は WordPress が自動的に出力されますが、手動で上書きして別の値にすることで最適化の余地があるかもしれません。

また、sizez属性で決定された画像表示幅は 1024pxであるのに、実際の画像表示幅が 610px だったのは、<img>要素の親である <figure>要素が CSS によって幅が 610pxになっていたためです。sizez属性はあくまで「srcset属性で指定された画像ファイルの中から、どの画像ファイルをダウンロードするか?」を決定しているだけで、画像の表示幅が CSSで指定されていたり、親要素の幅で制限されていたりすれば、実際の表示幅はそちらに従います。ここがやっかいなところです。

(3) 記事に貼り付けた画像の設定と表示( PC向け その2)

デバイス側の条件として以下を想定します (PCを想定) 。

  • ウィンドウ幅:1341px
  • デバイスピクセル比:1

画像ブロックの設定を以下に変更しました。

画像ブロックの設定

この場合、以下のように表示されます。

PC向けその2

画像部分のHTMLは以下です。

<figure class="wp-block-image size-large is-resized">
  <img loading="lazy"
       src="/wp-content/uploads/2021/10/foo-1024x683.jpg" 
       alt="foo" class="wp-image-22" 
       width="512" height="342" 
       srcset="/wp-content/uploads/2021/10/foo.jpg 1470w,
               /wp-content/uploads/2021/10/foo-1024x683.jpg 1024w,
               /wp-content/uploads/2021/10/foo-768x513.jpg 768w,
               /wp-content/uploads/2021/10/foo-300x200.jpg 300w"
       sizes="(max-width: 512px) 100vw, 512px">
</figure>

このとき、

  • 実際にダウンロードされた画像は「foo-768×513.jpg」
  • 画像の表示サイズは、512×342

でした。

ダウンロードされた画像ファイルが「foo-768×513.jpg」になったのは、このときの ウィンドウ幅が 1024px 以上であり 、sizes属性により決定した画像表示幅が 512px になったためだと考えられます。幅が小さいため、親要素である <figure>要素の影響で幅が変わることはありませんでした。

また、「画像ブロック」の設定で指定した幅は、width属性と sizes属性にセットされるようです。

(4) 記事に貼り付けた画像の設定と表示(モバイル向けその1)

デバイス側の条件として以下を想定します (スマートフォンを想定)。

  • ウィンドウ幅:360px
  • デバイスピクセル比:3

画像ブロックの設定は、1回目と同様です。

画像ブロックの設定 (1つ目と同じ)

こんな感じで表示されます。

モバイル向けその1

画像部分のHTMLは以下です。

<figure class="wp-block-image size-large">
  <img loading="lazy"
       width="1024" height="683"
       src="/wp-content/uploads/2021/10/photo-1634-1024x683.jpg"
       alt="foo" class="wp-image-22"
       srcset="/wp-content/uploads/2021/10/photo-1634.jpg 1470w,
               /wp-content/uploads/2021/10/photo-1634-1024x683.jpg 1024w,
               /wp-content/uploads/2021/10/photo-1634-768x513.jpg 768w,
               /wp-content/uploads/2021/10/photo-1634-300x200.jpg 300w"
       sizes="(max-width: 1024px) 100vw, 1024px">
</figure>

このとき、

  • 実際にダウンロードされた画像は「foo-1024×683.jpg」
  • 画像の表示サイズは、330×220(viewport の幅も 330px)

でした。

sizez属性から、「ウィンドウ幅が 1024pxより小さいので 100vw」→「このとき 100vw は 330px」となり、望ましい画像の幅は 330px となりますが、デバイスピクセル比が 3 なので、330 * 3 = 990 px 以上の中で最小の画像が選択されます。その結果「 foo-1024×683.jpg」 がダウンロードされました。

4. おわりに

WordPress の「画像ブロック (Gutenberg)」の働きを記録しておこうと思い本記事を書きました。今後も気付いたことがあれば、追記するかもしれません。

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

WordPress

WordPress に関する srcset と sizes 属性値の簡単な説明

目次1. はじめに2. srcset と sizes の仕組み3. WordPress での srcset と sizes3-1. sizes 属性3-2. srcset 属性3-3. [設定] &# …

WordPress

WordPress:本文に<p>や<br>が自動で追加されないようにする方法(wpautop を無効にする)

目次1. WordPress の wpautop 関数2. WordPress は投稿や固定ページの本文に対して wpautop 関数を実行します3. 本文に対する wpautop 関数を無効にする方 …

WordPress

【WordPress】特定の画像には Easy FancyBox を適用させない方法

目次1. WordPress の Easy FancyBox プラグインについて問題点2. 特定の画像リンクで、Easy FancyBox を適用させない方法3. デモ 1. WordPress の …

WordPress

【WordPress】Table of Contents Plus が生成した目次の直前に、ウィジェット(広告など)を表示するコードを自分で書く

Table of Contents Plus (TOC+) という WordPressプラグインが生成した目次の直前に、ウィジェット を表示する方法について説明します。 ※ 2018年6月6日: 目次 …

WordPress

WordPress のプラグイン Autoptimize についての覚書

WordPress のプラグイン Autoptimize についての覚書です。