「最大画像幅の時のグリッド幅よりも大きな幅の画像を用意してwidthの指定を無くす」
というのが正解のようです。おそらくこれは他のレスポンシブフレームワークでも同様でしょう。
例えばFoundationの場合、
<div class="row">
<div class="large-6 columns">
<div class="panel"><p>Six columns</p></div>
</div>
<div class="large-6 columns">
<div class="panel"><p>Six columns</p></div>
</div>
</div>
とすると、ラージサイズの場合にちょうど半分のカラムを設定出来ます。
imgタグに必要な属性はaltのみですので、width,heightは取っ払いましょう。
width,heightの指定がないと描画が遅いとされますが、cssでの指定はどうなんでしょう。
今度機会があったら試してみます。
<div class="row">
<div class="large-6 columns">
<div class="panel"><p><img src="img/2d66ad07.jpg" alt="" /></p></div>
</div>
<div class="large-6 columns">
<div class="panel"><p>Six columns</p></div>
</div>
</div>
とすると
ちょっと大きさがあっていないのでわかりにくいかもしれませんが

こうなって・・・

スモールサイズ幅に入るとフルカラムになる設定なので、一度画像が大きくなり・・・

最後には

こうなります。
ちなみに、カラム幅よりも小さいwidthを指定すると効きますが、カラム幅よりも大きいwidthを指定すると強制的にカラム幅にリサイズされます。
で、面白いのがブロックグリッドという機能です。
ブロックグリッド
ブロックグリッドは、ひとつのグリッドの中に均等に画像を配置したい、なんて場合に便利です。
通常だと
<div class="large-12 columns">
<div class="large-3 columns"<>img></div>
<div class="large-3 columns"><img></div>
<div class="large-3 columns"><img></div>
<div class="large-3 columns"><img></div>
</div>
としなければいけないところを、
<div class="large-12 columns">
<div class="panel">
<ul class="small-block-grid-4">
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
</div>
</div>
と書くことができます。
small-block-grid-4が、1カラム内を何カラムにわけるかの指定で、
small-block-grid-4の場合は、

small-block-grid-3の場合は、

small-block-grid-2の場合は、

のようになります。
なかなか便利ですね。