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

実現したいこと

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

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

断念方法1(display:none)

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

断念方法2(pictureタグ)

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

該当のソースコード

html

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

試したこと・調べたこと

上記の詳細・結果

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

補足

特になし