如何防止图片在移动设备上下载？

Question

假设这个标记：

<picture>
    <source media="(max-width: 767px)" srcset="//placehold.it/350x150&text=Up+to+767" />
    <source media="(max-width: 991px)" srcset="//placehold.it/350x150&text=Up+to+991" />
    <img src="//placehold.it/570x200&text=Desktop+image" class="responsive-image" />
</picture>

是否可以防止在不使用JavaScript的情况下在小型设备上下载“最多767”图像？虽然以下CSS将隐藏图像，并且似乎已经直观地解决了问题：

@media (max-width: 767px) {
  .responsive-image { display: none; }
}

它仍会下载图像，这是我想要避免的。我希望我可以为我想隐藏的图像提供一个空的srcset属性，但是接下来会加载下一个图像。

小提琴：https://jsfiddle.net/n68ousqu/