Responsive image plugins and seo / crawlability

[Sam-P]

Note : For the background of this question please read the preface below.

Ive been researching responsive image options the main issue i can see with them is that they are not semantic html so bots may not index them correctly. For instance many of the responsive image plugins use data-src for an image rather than src.

Does any one have any experience with this and if it impacts on SEO ?

Does any one know of a client side responsive image soltion that uses a normal img tag with the image stored in the src and with the option to set an alt attribute ?

---

**Preface : **

Ive got a site we are currently developing, the site has a large full width responsive image slider.

To serve images that wont be pixilated we are making the width of the images 1800px wide (which should cover most screens, but isn't actually big enough if the site was viewed on a 27" imac) these 1800px wide images weight about 350kb - 500kb per image and our image slider has about 20 of them. As you can see this would be a problem for anyone with a connection slower than c.10 mbps.

This is especially true for mobile devices that will be downloading an image 1800px wide although only require a much smaller one, this coupled with a 3g connection will make the site really slow.

[MichaelC-15022]

So you've got a big performance issue if you put all 20 images in img src= notation, as the browser is going to try to download those, of course.

What I've done with my travel website with big hotel images (I'll have as many as 75 or more sometimes) is specify the 1st image in img src= notation, then use Javascript to update the src attribute on click or timer.

The downside of this: good luck getting Google to index the other 19 images, even if you put them in an image sitemap.  In my experience, Google didn't want to index anything it couldn't verify was really on the page.

You can use @media queries to point at different images for different resolutions, but only if they're background images....which most likely means they won't be indexed, and they won't be seen as content by Panda.

What I've ended up doing is a bit of a hack; I use client-side Javascript to detect the screen resolution, then I can select different sized images based on that.  I use Joe Lencioni's SLIR library to take any large image and automatically create and cache the various smaller sizes I need.