视网膜 - 防止双重图像

Question

对于视网膜目的，如何防止双重图像？

微软浏览器可以使用is not supported：

<img src="image.png" srcset="image@2x.png" />

我们不能使用CSS，因为我们不知道图像的大小*。

我们尝试了这个：

<img class="image display-1x"
     src="{{ instance.image.url }}"
/>
<img class="image display-2x"
     src="{{ instance.image.url }}"
     {% if instance.imageRetina.url %}srcset="{{ instance.imageRetina.url }} 2x"{% endif %}
/>

如果通过视网膜媒体查询切换display-1x和display-2x，但我们遇到的问题是两张图片都需要更长时间才能下载。

无论如何，要满足这些要求的视网膜支持：

• img tag
• 仅下载一张图片
• 支持IE10 +

javascript是唯一的方法吗？

*这是一个上传和替换内容的CMS环境。