大多数语义方式使用不同的图像与媒体查询

Question

我需要有不同大小的图像，所以我要用媒体查询显示和隐藏图像。

如果页面上有一个图像重复，是否会混淆搜索引擎/特殊屏幕阅读器？我应该只有一个图像并使其余的div？

这就是我的想法，这可以使用吗？

HTML：

<img class="original-image" alt="This is just a placeholder image!" title="This is the original image, and this is the description!" src="http://placehold.it/200x200.png" />

<div class="zoom2x"></div>
<div class="zoom4x"></div>

的CSS：

.zoom2x {
  width: 400px; 
  height: 400px;
  background-image: url('http://placehold.it/400x400.png');
  display: none;
}

.zoom4x {
  width: 800px; 
  height: 800px;
  background-image: url('http://placehold.it/800x800.png');
  display: none;
}

@media only screen and (min-width: 800px) {
  .original-image, .zoom2x {
    display: none;
  }
  .zoom4x {
    display: block;
  }
}

@media only screen and (min-width: 400px) and (max-width: 799px) {
  .original-image, .zoom4x {
    display: none;
  }
  .zoom2x {
    display: block;
  }
}

@media only screen and (min-width: 200px) and (max-width: 399px) {
  .zoom2x, .zoom4x {
    display: none;
  }
  .original-image {
    display: inline;
  }
}

http://codepen.io/samkeddy/pen/iErJk?editors=110

我只是想避免混淆，或者将搜索引擎视为重复内容的搜索引擎的负面分数。