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】Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが表示されました

WordPressで、Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが発生しました。

WordPress の投稿記事に画像を貼る手順と sizes 属性値の変更

目次1. はじめに2. 事前の追加設定3. 投稿記事を作成する時に、画像を挿入する手順[メディアを追加] ボタンから画像を挿入4. 参考 1. はじめに この Webサイトは WordPress で作 …

WordPress

WordPress: create-block して wp-env start する際の注意点

WordPress: create-block と wp-env を使う際の注意点について書いています。

WordPress

JP Markdown と Classic Editor をやめ、Gutenberg を利用することにしました

JP Markdown と Classic Editor をやめ、Gutenberg を利用することにしました。かなり便利そうです。

WordPress

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生する

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生した場合の対応方法について書きました。