Apologies for a terrible title. I've been teaching myself responsive design techniques, and all the blogs I read seem to talk about there being issues with downloading desktop sized images for mobile platforms, multiple image loading, or requiring javascript. [I wrote a little fiddle](http://jsfiddle.net/xRXhc/1/embedded/result/) that does dynamic resizing using media queries and the padding-top aspect ratio trick. It works fine, and loads the correct image on start (at least in Chrome at this point), and goes up and down correctly (you'll have to open your network monitor to see).

I'm glad it works, I am however concerned about using this on my pages -- Will this have any severe impact on me with google spiders (since they're background images and not images). Are there any caveats that I'm glaringly missing here?

Code is as simple as it gets:

**HTML:**

```
<!-- padding top equal to aspect ratio -->
<div style="padding-top:75%;width:100%;" id="image"></div>

```

**CSS:**

```
html, body { margin: 0; padding: 0; }

#image {
  background-repeat: no-repeat;
  background-size:   100%;
  border: 1px solid #000;
}

@media screen and (max-width: 320px) { 
    body { width: 240px; margin: 0 auto; }
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_n.jpg');
}}
@media screen and (max-width: 500px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec.jpg');
}}
@media screen and (max-width: 640px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_z.jpg');
}}
@media screen and (min-width: 641px) {
    #image { background-image: url('http://farm3.staticflickr.com/2747/5865212227_75ae8e0bec_b.jpg');
}}

```