--- a/src/pyams_portal/portlets/image/zmi/preview.pt	Tue Oct 09 16:22:16 2018 +0200
+++ b/src/pyams_portal/portlets/image/zmi/preview.pt	Mon Oct 15 12:14:33 2018 +0200
@@ -6,55 +6,50 @@
 					   image_url tales:absolute_url(image);
 					   slot_config view.slot_configuration;
 					   slot_width slot_config.get_width();
-					   base_width 100 / 12;
 					   thumbnails tales:thumbnails(image);
 					   target python:thumbnails.get_thumbnail('800x600');
 					   timestamp tales:timestamp(image);"
 		   tal:attributes="href tales:absolute_url(target)">
 			<picture>
-				<tal:var define="width slot_width['lg']">
-					<source media="(min-width: 1200px)" sizes="12vw, 25vw, 50vw, 100vw"
-							tal:condition="width"
-							tal:attributes="srcset string:${image_url}/++thumb++lg:w128?_=${timestamp} 128w,
-														  ${image_url}/++thumb++lg:w256?_=${timestamp} 256w,
-														  ${image_url}/++thumb++lg:w512?_=${timestamp} 512w,
-														  ${image_url}/++thumb++lg:w1200?_=${timestamp} 1200w" />
-					<source media="(min-width: 1200px)" sizes="100vw"
-							srcset="/--static--/pyams_default_theme/img/dot.png"
-							tal:condition="not:width" />
+				<tal:var define="xs_width slot_width['xs']">
+					<tal:if condition="xs_width">
+						<source media="(max-width: 767px)"
+								tal:define="width round(768 / 12 * xs_width)"
+								srcset="${image_url}/++thumb++xs:w${width}?_=${timestamp}" />
+					</tal:if>
+					<source media="(max-width: 767px)"
+							tal:condition="not:xs_width"
+							srcset="/--static--/pyams_default_theme/img/dot.png" />
 				</tal:var>
-				<tal:var define="width slot_width['md']">
-					<source media="(min-width: 992px)" sizes="12vw, 25vw, 50vw, 100vw"
-							tal:condition="width"
-							tal:attributes="srcset string:${image_url}/++thumb++md:w128?_=${timestamp} 128w,
-														  ${image_url}/++thumb++md:w256?_=${timestamp} 256w,
-														  ${image_url}/++thumb++md:w512?_=${timestamp} 512w,
-														  ${image_url}/++thumb++md:w992?_=${timestamp} 992w" />
-					<source media="(min-width: 992px)" sizes="100vw"
-							srcset="/--static--/pyams_default_theme/img/dot.png"
-							tal:condition="not:width" />
+				<tal:var define="sm_width slot_width['sm']">
+					<tal:if condition="sm_width">
+						<source media="(max-width: 991px)"
+								tal:define="width round(992 / 12 * sm_width)"
+								srcset="${image_url}/++thumb++sm:w${width}?_=${timestamp}" />
+					</tal:if>
+					<source media="(max-width: 991px)"
+							tal:condition="not:sm_width"
+							srcset="/--static--/pyams_default_theme/img/dot.png" />
 				</tal:var>
-				<tal:var define="width slot_width['sm']">
-					<source media="(min-width: 768px)" sizes="12vw, 25vw, 50vw, 100vw"
-							tal:condition="width"
-							tal:attributes="srcset string:${image_url}/++thumb++sm:w128?_=${timestamp} 128w,
-														  ${image_url}/++thumb++sm:w256?_=${timestamp} 256w,
-														  ${image_url}/++thumb++sm:w512?_=${timestamp} 512w,
-														  ${image_url}/++thumb++sm:w768?_=${timestamp} 768w" />
-					<source media="(min-width: 768px)" sizes="100vw"
-							srcset="/--static--/pyams_default_theme/img/dot.png"
-							tal:condition="not:width" />
+				<tal:var define="md_width slot_width['md']">
+					<tal:if condition="md_width">
+						<source media="(max-width: 1199px)"
+								tal:define="width round(1200 / 12 * md_width)"
+								srcset="${image_url}/++thumb++md:w${width}?_=${timestamp}" />
+					</tal:if>
+					<source media="(max-width: 1199px)"
+							tal:condition="not:md_width"
+							srcset="/--static--/pyams_default_theme/img/dot.png" />
 				</tal:var>
-				<tal:var define="width slot_width['xs']">
-					<source media="(max-width: 767px)" sizes="12vw, 25vw, 50vw, 100vw"
-							tal:condition="width"
-							tal:attributes="srcset string:${image_url}/++thumb++xs:w128?_=${timestamp} 128w,
-														  ${image_url}/++thumb++xs:w256?_=${timestamp} 256w,
-														  ${image_url}/++thumb++xs:w512?_=${timestamp} 512w,
-														  ${image_url}/++thumb++xs:w768?_=${timestamp} 768w" />
-					<source media="(max-width: 767px)" sizes="100vw"
-							srcset="/--static--/pyams_default_theme/img/dot.png"
-							tal:condition="not:width" />
+				<tal:var define="lg_width slot_width['lg']">
+					<tal:if condition="lg_width">
+						<source media="(min-width: 1200px)"
+								tal:define="width round(1600 / 12 * lg_width)"
+								srcset="${image_url}/++thumb++lg:w${width}?_=${timestamp}" />
+					</tal:if>
+					<source media="(min-width: 1200px)"
+							tal:condition="not:lg_width"
+							srcset="/--static--/pyams_default_theme/img/dot.png" />
 				</tal:var>
 				<img style="width: 100%;"
 					 tal:attributes="src image_url" />