HTMLの<picture>タグを使用し、画面幅に応じてPC用とスマホ用の画像を切り替える。

JavaScript不要。異なる構図や縦横比の画像をデバイスごとに表示したい場合に使用。

基本的な使い方

画面幅768px以上でPC用画像、767px以下でスマホ用画像を表示。

<picture>
    <source media="(min-width: 768px)" srcset="image-pc.webp">
    <img src="image-sp.webp" alt="サンプル画像">
</picture>

sourceで条件に一致する画像を指定。条件に一致しない場合はimgの画像を表示。

複数の画面幅で切り替え

PC・タブレット・スマホの3種類を指定。

<picture>
    <source media="(min-width: 1024px)" srcset="image-pc.webp">
    <source media="(min-width: 768px)" srcset="image-tablet.webp">
    <img src="image-sp.webp" alt="サンプル画像">
</picture>

sourceは上から順番に評価され、最初に一致した条件を使用。

画像形式による切り替え

WebPに対応しているブラウザではWebPを表示し、非対応の場合はJPEGを表示。

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="サンプル画像">
</picture>

type属性で画像形式を指定。ブラウザが対応していない形式はスキップされる。

画像のサイズを指定

imgにwidthとheightを指定し、画像表示時のレイアウトずれを軽減。

<picture>
    <source media="(min-width: 768px)" srcset="image-pc.webp" width="1200" height="600">
    <img src="image-sp.webp" alt="サンプル画像" width="600" height="800">
</picture>

PC用とスマホ用で縦横比が異なる場合は、各画像に合わせて寸法を指定。

CSSでレスポンシブ対応

画像が親要素の幅を超えないように設定。

/* picture画像のレスポンシブ対応 */picture img {
    display: block;
    max-width: 100%;
    height: auto;
}

WordPressで使用する場合

テーマのPHPテンプレート内でも使用可能。

挿入場所：画像を表示するPHPテンプレート内

<picture>
    <source media="(min-width: 768px)" srcset="<?php echo esc_url(get_template_directory_uri() . '/assets/img/image-pc.webp'); ?>">
    <img src="<?php echo esc_url(get_template_directory_uri() . '/assets/img/image-sp.webp'); ?>" alt="サンプル画像">
</picture>

get_template_directory_uri()で親テーマのURLを取得。子テーマの画像を参照する場合はget_stylesheet_directory_uri()を使用。

注意点

• picture内には画像表示用のimgタグが必要。
• sourceはimgより前に配置。
• alt属性はimgに指定。
• sourceの順序によって、選択される画像が変わる。
• 画像の表示サイズだけを変更する場合は、CSSのmax-widthやwidthなどで対応可能。
• 重要なファーストビュー画像では、loading="lazy"の指定に注意。