特定の画面幅だけ画像をロードしたい

Question

実現したいこと

特定の画面幅だけ画像をロードしたい

発生している問題・分からないこと

断念方法1(display:none)

cssのメディアクエリごとにdisplay:none;すると、ロードしなくていい画面幅でもロードが発生する。

断念方法2(pictureタグ)

pictureタグだとimgタグ1つとsourceタグ1つ以上となり、結果として画像指定を最低2つ行わなければならない。1000px以上だけ表示させたい場合にsourceタグに画像を指定したとしても、999px以下には表示が不要なimgタグの方の画像まで読み込まれてしまう。

該当のソースコード

<!--1000px以上の場合にのみ画像をロードしたい-->
<picture>
  <source media="(min-width: 1000px)" srcset="hoge.webp">
  <img src="999px以下は画像のロード不要。何を記述すべきか。">
</picture>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

pictureタグを使う方法が出てきた。

補足

特になし

Comments

[m.ts10806]

質問タグにはないですが、JavaScriptを使わずということでしょうか

[kjshdfiuasye]

はい。HTMLとCSSで実現したいと考えております。

[yambejp]

>ロードしなくていい

ロードしない場合はどうなる想定なのでしょうか？

[kjshdfiuasye]

画像を表示しない状態にしたいです。

[yambejp]

ロードするけど表示しないというのはだめなのですか？

[kjshdfiuasye]

小さい画面幅と大きい画面幅で劇的にレイアウトが異なる2つのデザインの場合、非表示の画像までロードしてしまうと画像の読み込みが2倍になり、ページ読み込みに時間がかかってしまうため、表示させる必要のない画像はロードしたくないという経緯でした。

[yambejp]

いずれにしても特殊なことをやるならjsが必須です。
姑息ですが遅延読み込みをする方法は回答に追記してあります
lazyロードはブラウザがネイティブに対応しているなら表示画面の極端な外側に画像をとばしてしまえば遅延対象になってページロード時には画像は読み込まないことが期待できます

Answer 1

背景画像として読み込むのであればmediaで切り替えできます

追記

lazyロードするとか・・・

<style>
body{
  background-Color:lightgray;
}
#hoge{
  position:absolute;
  top:-9999px;
}
@media screen and (min-width: 1000px){
body{
  background-Color:gray;
}
#hoge{
  position:initial;
  top:0;
}
}
</style>
<div class="dummy"></div>
<img src="sample.jpg" id="hoge" alt="#" loading="lazy" >

Comments

[kjshdfiuasye]

ご回答ありがとうございます。cssで背景指定の方法ですね。今回のケースでは文書構造的にHTMLに記述したいというのは不可能でしょうか。そうなると1pxの超軽量gifをimgタグに指定してそれを非表示ぐらいの方法しかないでしょうか。

[yambejp]

ブラウザによって挙動が変わりますがlazyロードするとかでロードを止めることができるかもしれません
ブラウザで幅を狭めて表示し、一旦スーパーリードしデバッグ画面のネットワークを監視しておくとsample.jpgが初動では呼び出されないことが確認できると思います。その後ブラウザの幅を広げてやるとそのタイミングで画像が呼び出されます

[kjshdfiuasye]

回答ありがとうございます。参考になりました。