WordPressのpictureタグ徹底解説｜画像軽量化とデザイン改善のコツ

画像を入れたとき、「スマホだとちょっと見づらいな…」「ページが重くて表示がもたつくな…」と感じたことはありませんか。

この記事では、そうしたモヤモヤを解消するために、WordPressのpictureタグの考え方から、プラグインでの手軽な導入方法、テーマ編集でのしっかりした実装パターンまで、順番に整理していきます。

この記事を読むと分かること

WordPressでpictureタグを使うべき場面と、そうでない場面
pictureタグとimgタグ（srcset）の違いと基本的な使い分け
プラグインだけでできることと、テーマ編集が必要になるケース
PCとスマホで画像を出し分ける具体的なパターン例
SEOや表示速度の面で意識したいポイント

WordPressでpictureタグを使うと何がうれしいのか
pictureタグとWordPress標準の画像機能の違い
WordPressのpictureタグを使うべきケースと、不要なケース
プラグインでWordPressにpictureタグを導入する
テーマ編集でWordPressのpictureタグを実装する
PCとスマホで別画像を出し分ける具体例
SEO・表示速度・アクセシビリティのポイント
よくある質問
まとめと、今日からできる最初の一歩

WordPressでpictureタグを使うと何がうれしいのか

ごとう

まずは、そもそもなぜWordPressでpictureタグをわざわざ使いたくなるのか、イメージをそろえておきます。ざっくり言うと、メリットは「見せ方の自由度が上がること」と「ムダな画像の読み込みを減らせること」の2つです。

よくある悩みとpictureタグで解決できること

よくある悩みと、そのときpictureタグがどう役立つかを、ざっくり表にしてみます。

悩み・課題	ありがちな状態	pictureタグでできること
PCとスマホで画像のトリミングを変えたい	同じ横長画像をスマホでもそのまま表示している	画面幅ごとに別の画像ファイルを読み込める
WebPやAVIFにしたいけれど古い環境が不安	互換性を気にしてJPEGだけにしていて容量が重い	対応ブラウザにはWebPやAVIFを、それ以外にはJPEGを出し分けられる
ヒーロー画像だけ特別なレイアウトにしたい	すべて同じimgタグのパターンでしか出せない	特定の場所だけ専用のpicture構造にできる
画像CDNや最適化サービスと組み合わせたい	プラグイン任せで、どんなHTMLになっているか分かりづらい	pictureの中でsrcsetやtypeを自分でコントロールできる
なるべく表示速度を上げたい	スマホにもPC用の大きな画像をそのまま配信している	スマホには小さい画像だけを読むように分岐させられる

こうして整理してみると、「ここの画像だけはちゃんとこだわりたい」という場所があるサイトほど、pictureタグを理解しておいた方が得だな、というのが伝わると思います。

pictureタグとWordPress標準の画像機能の違い

ごとう

次に、pictureタグの基本と、WordPressがもともと持っている画像まわりの機能を整理しておきます。「今、何が自動で行われていて、何を自分でカスタマイズする必要があるか」を分けて考えると、やるべきことが見えやすくなります。

pictureタグの基本と、img＋srcsetとの違い

まずはタグそのものの役割から、ざっくり見ていきます。

imgタグは、1枚の画像を表示するための基本のタグです。ここにsrcsetやsizesを付けておくと、ブラウザが画面幅に合わせて「どのサイズの画像を使うか」を自動で選んでくれます。

一方でpictureタグは、中に複数のsourceタグと1つのimgタグを入れて使います。source側のmedia属性（画面幅など）やtype属性（image/webp など）で条件を指定して、「この条件ならこっちの画像」「それ以外ならこっち」という切り替えを、こちら側で細かく指定できるのが特徴です。

イメージとしては、次のような違いがあります。

img + srcset：ブラウザに「この中から合うサイズを選んでね」とお任せする仕組み
picture：こちらから「スマホはこの画像、PCはこの画像」と指示を出す仕組み

サイズだけ変えられれば十分、という場面ならimg + srcsetで事足りますが、構図を変えたいときや、WebP・AVIFとJPEGを切り替えたいときは、pictureのほうが向いています。

WordPress標準のレスポンシブ画像機能

WordPressには、画像をアップロードしたときに自動で複数サイズの画像を作り、imgタグにsrcsetを付けてくれる機能があります。

管理画面から画像をそのまま挿入するだけでも、実は裏側ではそれなりにがんばってくれている、ということですね。

メディア設定に応じて、サムネイル・中サイズ・大サイズなどを自動生成している
wp_get_attachment_image()などで呼び出すと、imgタグにsrcsetとsizesが自動で付与される
テーマによっては、sizes属性も適切に設定されている

なので、単純に「画像を軽くしたい」「小さい画面では小さい画像が出てくれればいい」という程度なら、まずはこの標準機能をちゃんと使うだけでも、ある程度の最適化はできます。

ただし標準のままだと、次のようなことはできません。

同じ画像IDに対して、PCとスマホで別のトリミング画像を出す
WebPやAVIFとJPEGで、条件に応じてフォーマットを切り替える
特定のセクションだけ、特殊な画像フォーマットや構図にしたい

こうしたことをやりたくなると、「WordPressでもpictureタグを使いたい」という話になってきます。

WordPressのpictureタグを使うべきケースと、不要なケース

ごとう

ここからは、「本当にpictureタグが必要なのか？」を判断するための基準を整理していきます。なんでもpictureにしてしまうと、コードも複雑になりますし、運用も手間が増えます。場面ごとに、メリハリを付けて使うのがおすすめです。

pictureタグが向いているケース

まずは、「これはpictureタグでやったほうがスッキリする」というパターンを見ていきます。

シチュエーション	pictureタグが向いている理由
ヒーロー画像やキービジュアルの見せ方を変えたい	PCとスマホで、構図やトリミングを変えたいことが多いから
バナー画像の文字がスマホだと読みにくい	スマホ用に縦長の別デザインを用意したほうが見やすいから
WebPやAVIFで軽量化したい	非対応ブラウザだけJPEGなどにフォールバックしたいから
画像CDNや最適化サービスを併用している	条件ごとに読み込む画像URLを切り替えたい場面が多いから

どれも「ユーザーに見せたい画像そのものを切り替えたい」場面です。こういうときに、sourceタグのmediaやtypeを使って分岐させると、デザインと速度をうまく両立しやすくなります。

srcsetだけで十分なケース

逆に、「ここは無理にWordPressのpictureタグを使わなくてもいい」という場面も多いです。

記事内の小さめの挿絵や説明用の画像
一覧ページのサムネイル画像
アイコンやロゴなど、構図を変える必要がない画像

このあたりは、WordPress標準のimg + srcsetに任せておくだけで、実用上は十分なことがほとんどです。

ざっくりまとめると、次のようなイメージになります。

「サイズだけ変わればいい」：img + srcsetでOK
「構図やフォーマットそのものを変えたい」：pictureタグの出番

この感覚を持っておくと、どこまでWordPressのpictureタグを使うかが決めやすくなります。

プラグインでWordPressにpictureタグを導入する

ごとう

ここからは、実際の実装パターンに入っていきます。まずは、テーマを直接編集せず、プラグインを使ってWordPressにpictureタグを取り入れる方法のイメージを整理します。

pictureタグ対応プラグインのざっくり比較

具体的なプラグイン名はテーマや環境によって相性が変わるので、ここでは考え方ごとに分けて整理します。

タイプ	できることのイメージ	向いている人
画像ブロック拡張タイプ	ブロックエディタの画像ブロックにsourceを追加してpicture化する	コードを書かずに、管理画面だけで完結させたい人
画像最適化＋変換タイプ	WebPやAVIFを自動生成し、pictureタグやsrcsetで出し分ける	サイト全体の画像をまとめて軽くしたい人
テーマ専用の画像制御タイプ	特定テーマに合わせたHTMLで、レイアウトと連動したpictureを出力する	同じテーマを長く使い続ける予定のサイト

プラグインを選ぶときは、次のようなポイントをチェックしておくと失敗しにくいです。

すでに入れている画像最適化プラグインとの相性
テーマ側でカスタムHTMLを書き換える処理がないかどうか
ブロックエディタ中心か、クラシックエディタ中心か
ドキュメントやサポート情報が分かりやすいかどうか

プラグイン導入時の注意点

プラグインで簡単にpictureタグを導入できるのはとても便利ですが、いくつか気を付けたい点もあります。

LazyLoad系のプラグインと競合することがある imgタグを書き換えるタイプのLazyLoadと、pictureタグを生成する処理が両方入ると、HTMLが予想外の形になることがあります。
CDN系のプラグインもHTMLを書き換えることがある画像URLを自動で差し替える仕組みと、pictureタグ化の仕組みがぶつかると、どこで問題が起きているのか分かりづらくなります。
テーマを変えたときに挙動が変わる可能性があるテーマ側のテンプレート構造によって、プラグインが期待どおり動かない場合があります。

個人的には、「まずテスト用の環境やステージング環境で試す」「特にトップページのヒーロー画像まわりをよく確認する」という2つを強くおすすめします。ページの印象を決める部分ほど、pictureタグの影響も大きいからです。

テーマ編集でWordPressのpictureタグを実装する

ごとう

次は、テーマファイルやfunctions.phpを編集して、より細かくWordPressのpictureタグをコントロールする方法です。少しコード寄りの内容になりますが、「何をしているのか」が分かれば、ほかの場面にも応用しやすくなります。

本文中の画像をpictureタグに差し替えるイメージ

【稼げるキーワード教えます】
▼　　▼　　▼

よくあるのが、「記事本文のimgタグを自動的にpicture構造に差し替える」というやり方です。

流れはざっくり次のようになります。

ステップ	やること	ポイント
1	the_contentフックで記事本文のHTMLを取得する	子テーマのfunctions.phpに処理を書くことが多い
2	HTMLの中からimgタグを探す	altやクラス名、サイズなども一緒に拾う
3	picture構造のHTMLを組み立てる	WebPやPC/SP用のURLをどう作るかが肝
4	元のimgタグと入れ替えて本文を返す	うまく処理できなかったときは元のHTMLを返す

この方法は、「記事本文の画像はすべてpictureタグにしたい」という方針のサイトに向いています。

逆に「特定の画像だけpictureにしたい」「ヒーロー部分だけ特別扱いしたい」といった場合は、次のテンプレート編集のほうが扱いやすいです。

テンプレート側で特定画像だけpictureタグにする

トップページのヒーロー画像や、固定ページの大きなメインビジュアルなど、「ここだけは特別に制御したい」という場所も多いと思います。

そういうときは、テンプレートファイル（front-page.phpやpage-◯◯.phpなど）側で、手書きでpictureタグを書くほうが分かりやすいです。

やることの流れは、次のようなイメージになります。

PC用の画像URLと、スマホ用の画像URLを用意する
テンプレート内に、pictureタグをベタ書きする
sourceタグのmedia属性で、スマホ用の条件（例：max-width: 767px）を書く
imgタグ側にはPC用の画像とalt属性を書く

こうしておくと、画面幅が狭いときはスマホ用の画像、それ以外ではPC用の画像、というシンプルな切り替えが実現できます。

ヒーロー画像やキービジュアルは、サイト全体の印象に大きく関わる部分です。ここだけでもWordPressのpictureタグで丁寧に作り込んでおくと、「なんとなく見づらい」「文字が小さい」といった不満を減らしやすくなります。

PCとスマホで別画像を出し分ける具体例

ごとう

次に、PCとスマホで画像を出し分けるときの考え方を、もう少し具体的に整理してみます。ブレイクポイントをどこにするかや、どんな画像パターンを用意するかを先に決めておくと、デザインと実装の連携がスムーズになります。

ブレイクポイントと画像パターンの決め方

PCとスマホの境目（ブレイクポイント）をどう設定するかは、よく迷うポイントです。

多くのサイトでは、次のような基準で決めていることが多いです。

ブレイクポイントの例	画面幅のイメージ	向いている構成例
600px前後	小さめのスマホ中心	スマホ専用の縦長バナー、テキストを大きめにしたデザイン
768px前後	一般的なスマホ〜タブレット	タブレットとPCで同じ画像にしたいときの区切り
1024px前後	タブレット横向き以上	PCとそれ以外で思い切ってレイアウトを変えるとき

大事なのは、「この幅以下ならスマホ版の画像、それ以外ならPC版」という感じで、サイトごとのルールをざっくり決めておくことです。

そうしておくと、デザイナー・コーダー・エンジニアの間で認識が揃いやすくなり、WordPressのpictureタグを使った出し分けもスムーズになります。

ヒーロー画像やバナーでの使い方イメージ

具体的なパターンをいくつか挙げてみます。

サービスサイトのトップヒーロー PCでは横長の画像を使い、左側にキャッチコピー、右側に人物写真を配置。スマホでは、人物写真を大きく上に、その下にコピーを置いた別画像を用意する。
キャンペーンバナー PC版は横長の画像で細かな情報まで載せる。スマホ版は縦長にして、「一番伝えたいメッセージ」だけを大きく見せる。
ブログ記事のアイキャッチ（重要な記事だけ）ランキング記事や特集記事など、特に読んでほしい記事だけ、スマホ版のアイキャッチ画像を別に用意して文字を大きくする。

こうした画像は、ユーザーが最初に目にする部分なので、pictureタグを使ってでも「ちゃんと伝わる見せ方」に寄せてあげる価値が高いです。