Вывод изображений в зависимости от разрешения экрана

[Unavoidable]

Надо, чтобы при ширине экрана менее, чем 640px выводилась другое изображение (через img src).

При таком варианте:

<img class="big" src="catalog/view/theme/default/image/big.png" alt="" />
<img class="small" src="catalog/view/theme/default/image/small.png" alt="" />

а в стилях:
img.big {
    display: block;
}
img.small {
    display: none;
}
@media (max-width: 640px) {
img.big {
    display: none;
}
img.small {
    display: block;
}
}

работает, но через консоль видно, что загружаются оба изображения, что не рационально. Нагуглил такой вариант http://nicolasgallagher.com/responsive-images-using-css3/ но "At the moment, only Opera 10+ supports it."

Подскажите альтернативу.

 

 

[vlg]

Я использую picturefill.js - нормально. Рекомендую. Ничего сложного. Единственное неудобство - картинок нужно много готовить разного размера. ЗАто  Гугл инсайт не ругается.