pictureタグのデバイスごとの画像の出し分けについて

pictureタグについて質問させて頂きます。

例えば画面幅768pxで画像の出し分けを行う場合、下記のコードになるかと思います。

<picture>
<source media="(min-width: 768px)" srcset="dummy768">
<img src="dummy" alt="dummy image">
</picture>

両デバイスで画像を表示させる場合はこれで良いのですが、例えば下記の画像を768px未満の場合のみに表示させたい場合、769px以上の環境でdisplayで非表示にしてしまうとバックグランドで読み込みが走ってしまうため、pictureタグで上手く出し分けができないでしょうか？

<img src="dummy" alt="dummy image">

いつもはCSSで表示非表示を切り替える方法を取っているんですが、それだとバックグラウンドで読み込みが走ってしまうため、pictureタグあるいは別の方法で無駄な読み込みを走らせずにうまく出し分けが出来る方法はないか探しています。

ご回答よろしくお願いいたします。

kei344

2019/03/26 07:55

「pictureタグ」と「displayで非表示」がどう関係ある話かがわかりません。質問文に例示コードを追記していただけませんか？

cwd

2019/03/26 08:10

すみません、質問がおかしかったですね汗例えば画面幅768pxで画像の出し分けを行う場合、下記のコードになるかと思います。 <picture> <source media="(min-width: 768px)" srcset="dummy768"> <img src="dummy" alt="dummy image"> </picture> 上記の画像を768px未満の場合のみに表示させたい場合、pictureタグを使ってその制御をできるか否かという質問でした。やりたいこととしては下記ですが下記のコードだとうまく動きません。 <picture> <source media="(min-width: 768px)" srcset=""> <img src="dummy" alt="dummy image"> </picture> いつもはCSSで表示非表示を切り替える方法を取っているんですが、それだとバックグラウンドで読み込みが走ってしまうため、pictureタグあるいは別の方法で無駄な読み込みを走らせずにうまく出し分けが出来る方法はないか探しています。ご確認よろしくお願いいたします。

kei344

2019/03/26 08:19

（質問文は編集できます）この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。また、その際にはHTML部分をコードブロックに入れてください。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。 https://teratail.com/help#about-markdown

cwd

2019/03/26 08:42

ご丁寧にご返信ありがとうございます。使い慣れていないもので大変助かりました。

行動規範の内容に同意します

回答1件

ベストアンサー

上記の画像を768px未満の場合のみに表示させたい場合、pictureタグを使ってその制御を行うことは可能でしょうか？

こういう事でしょうか。

HTML
1<picture>
2<source media="(max-width: 768px)" srcset="dummy768">
3<img src="dummy" alt="dummy image">
4</picture>

投稿2019/03/26 08:47

kei344

総合スコア69645

cwd

2019/03/26 08:51 編集

わかりづらい質問になってしまい申し訳ございません。下記の画像を768px未満の場合のみに表示させたい場合に、769px以上の環境でdisplayで非表示にしてしまうとバックグランドで読み込みが走ってしまうため、pictureタグのような挙動で出し分けができないかという質問になります。 <img src="dummy" alt="dummy image"> ご確認よろしくお願いいたします。

kei344

2019/03/26 09:28

ああ、そういうことですか。ある画面幅のみ表示するような制御、ということであれば、picture要素では出来ないですね。（最低限表示するためにimg要素が必須だから）【<picture>: 画像要素 - HTML: HyperText Markup Language | MDN】 https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture > 許可されている内容 0個以上の <source> 要素、その後に1個の <img> 要素、任意でスクリプト対応要素と混在。

cwd

2019/03/26 09:43

ご丁寧に返信ありがとうございます。文中に記載の通り、どちらかのデバイスで表示させる場合はdisplayで消す方法を取ってるんですが裏で読み込みが走っちゃうんですよね。表示速度を重視した際に良い方法はないかなぁというところなんですが、皆さんどうされてるんだろうと思った次第です。 pictureタグにダミーのかなり軽量な画像を設定しておいてdsplayで消そうかも考えたんですが、スパム扱いされても嫌だったので理にかなった方法を探している次第です。

kei344

2019/03/26 09:44

「pictureタグで制御したい」が本題ではないのですね。そこまで気にするならスクリプト使う以外ないでしょう。

行動規範の内容に同意します