diff --git a/addons/website/models/ir_qweb.py b/addons/website/models/ir_qweb.py
index fcfd3861c2c..e2472df9bb3 100644
--- a/addons/website/models/ir_qweb.py
+++ b/addons/website/models/ir_qweb.py
@@ -8,6 +8,8 @@ Also, adds methods to convert values back to openerp models.
 
 import itertools
 
+import werkzeug.utils
+
 from openerp.osv import orm, fields
 
 class QWeb(orm.AbstractModel):
@@ -56,9 +58,34 @@ class HTML(orm.AbstractModel):
     _inherit = ['website.qweb.field', 'ir.qweb.field.html']
 
 class Image(orm.AbstractModel):
+    """
+    Widget options:
+
+    ``class``
+        set as attribute on the generated <img> tag
+    """
     _name = 'website.qweb.field.image'
     _inherit = ['website.qweb.field', 'ir.qweb.field.image']
 
+    def to_html(self, cr, uid, field_name, record, options,
+                source_element, t_att, g_att, qweb_context):
+        assert source_element.nodeName != 'img',\
+            "Oddly enough, the root tag of an image field can not be img. " \
+            "That is because the image goes into the tag, or it gets the " \
+            "hose again."
+
+        return super(Image, self).to_html(
+            cr, uid, field_name, record, options,
+            source_element, t_att, g_att, qweb_context)
+
+    def record_to_html(self, cr, uid, field_name, record, column, options=None):
+        cls = ''
+        if 'class' in options:
+            cls = ' class="%s"' % werkzeug.utils.escape(options['class'])
+
+        return '<img%s src="/website/image?model=%s&field=%s&id=%s"/>' % (
+            cls, record._model._name, field_name, record.id)
+
 class Currency(orm.AbstractModel):
     _name = 'website.qweb.field.currency'
     _inherit = ['website.qweb.field', 'ir.qweb.field.currency']
diff --git a/addons/website_sale/views/website_sale.xml b/addons/website_sale/views/website_sale.xml
index 1c096ecd3de..03b786ece08 100644
--- a/addons/website_sale/views/website_sale.xml
+++ b/addons/website_sale/views/website_sale.xml
@@ -124,7 +124,7 @@
 
       <div class="oe_product_image text-center">
           <a t-href="/shop/product/#{ product.id }/?#{ search and ('search=%s' % search) or ''}#{ category_id and ('&amp;category_id=%s' % category_id) or ''}">
-              <img class="img" t-att-src="product.img('image')"/>
+              <span t-field="product.image" t-field-options='{"widget": "image"}'/>
           </a>
       </div>
     </template>
@@ -328,7 +328,7 @@
               <section class="container oe_website_sale mb16" id="product_detail">
                 <div class="row">
                   <div class="col-sm-7 col-md-7 col-lg-7">
-                      <img class="img" t-att-src="product.img('image')" style="max-height: 500px"/>
+                      <span t-field="product.image" style="max-height: 500px" t-field-options='{"widget": "image"}'/>
                   </div><div class="col-sm-5 col-md-5 col-lg-4 col-lg-offset-1">
                       <h1 t-field="product.name">Product Name</h1>
 
@@ -381,7 +381,7 @@
                 <t t-foreach="product.recommended_products()" t-as="product">
                     <div class='col-md-2 thumbnail' style='width: 170px; margin-right: 16px;'>
                         <div class='mt16 text-center'>
-                            <img t-att-src="product.img('image_small')"/>
+                            <span t-field="product.image_small"/>
                             <h5>
                                 <a t-href="/shop/product/#{ product.id }/"
                                    style="display: block">
@@ -441,7 +441,8 @@
                             <tr t-foreach="website_sale_order.order_line" t-as="line">
                                 <td colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
                                 <td t-if="line.product_id.product_tmpl_id">
-                                    <img class="img-rounded" t-att-src="line.product_id.img('image_small')"/>
+                                    <span t-field="line.product_id.image_small"
+                                          t-field-options='{"widget": "image", "class": "img-rounded"}'/>
                                 </td>
                                 <td t-if="line.product_id.product_tmpl_id">
                                     <div>
@@ -560,7 +561,8 @@
 
                         <td>
                             <a t-href="/shop/product/#{ product.product_tmpl_id.id }/">
-                                <img class="img-rounded" t-att-src="product.img('image_small')"/>
+                                <span t-field="product.image_small"
+                                      t-field-options='{"widget": "image", "class": "img-rounded"}'/>
                             </a>
                         </td>
                         <td>
@@ -796,7 +798,10 @@
                             <tr t-foreach="website_sale_order.order_line" t-as="line">
                                 <td colspan="2" t-if="not line.product_id.product_tmpl_id"></td>
                                 <td t-if="line.product_id.product_tmpl_id">
-                                    <a t-href="/shop/product/#{ line.product_id.product_tmpl_id.id }/"><img class="img-rounded" t-att-src="line.product_id.img('image_small')"/></a>
+                                    <a t-href="/shop/product/#{ line.product_id.product_tmpl_id.id }/">
+                                        <span t-field="line.product_id.image_small"
+                                              t-field-options='{"widget": "image", "class": "img-rounded"}'/>
+                                    </a>
                                 </td>
                                 <td t-if="line.product_id.product_tmpl_id">
                                    <strong t-field="line.product_id.name"/>