0

I need to have different sizes of my images, so I was going to show and hide the images with media queries.

Will it confuse search engines / special screen readers if there are duplicates of one image on a page? Should I instead have just one image and make the rest divs?

Here's what I was thinking, is this okay to use?

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

I just want to avoid confusion, or negative scores from search engines who might view it as duplicate content.

stackers
  • 2,701
  • 4
  • 34
  • 66
  • 1
    You should look into responsive images and the `srcset` attribute. Lots of documentation out there. – Nick Salloum Oct 29 '14 at 03:20
  • 1
    One important consideration is that display:none, even on a background, may not always prevent all the images from downloading. You may find this Stack Overflow question interesting: https://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading and http://timkadlec.com/2012/04/media-query-asset-downloading-results/. Here's a good solution article http://css-tricks.com/which-responsive-images-solution-should-you-use/ and test page http://contentloaded.com/responsive/ – Talkingrock Oct 29 '14 at 05:46

0 Answers0