picture要素を使うことで、ウィンドウ幅ごとに読み込む画像を変更することができます。
しかし、どの幅でも同じ画像が表示されてしまい困りました。
ソース
以下、分岐が動作しないソース。
以下、修正したソース。
aタグをpicture要素の外に出してやるとちゃんと分岐が動作しました。pictureの中にaタグを入れてはいけないようでした。
「ulのなかにdivいれてやがる m9(^Д^)」レベルのミスですね…。仕様の理解不足…。
おまけ
ちなみにpictureを使わずにsetsrcだけを使う方法もあります。
この場合、chromeでは一度最大サイズの画像を表示すると、もうそれしか表示しない仕様となっています。
ビジュアルをウィンドウ幅ごとに確実に切り替えたいときはpicture要素を使うのがよさそうですね。
setsrcだけを使う場合と、pictureを使う場合の挙動については@rriverさんの記事がわかりやすいです。
参考：なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点 | Rriver
