response_image.html #eecms ce_image

response_image.html

{!--
	Template snippet 
	This tempalte snippet is for making a response image  to minimise download size using CE Image.
	Usage: 
	{embed="include/responsive_image" class="div-class" src="{image_url}"}
			   ^                           ^                ^
			   |                           |                |
	location of this template         Class of img      URL of image

	
	
--}


{if embed:src != ""}
<picture>
			
	<source srcset="{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 1'  formula='568 * 1'}"} 1x,
		{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 2'  formula='568 * 2'}"} 2x,
		{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 3'  formula='568 * 3'}"} 3x"
		media="(max-width: 568px)">
	
	<source srcset="{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 1'  formula='768 * 1'}"} 1x,
		{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 2'  formula='768 * 2'}"} 2x,
		{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 3'  formula='768 * 3'}"} 3x"
		media="(max-width: 768px)">

	<source srcset="{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 1'  formula='1025 * 1'}"} 1x,
		{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 2'  formula='1025 * 2'}"} 2x,
		{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 3'  formula='1025 * 3'}"} 3x"
		media="(max-width: 1025px)">
	
	<img src="{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 1' formula='1366 * 1'}"}" 
		srcset="{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 1'  formula='1366 * 1'}"} 1x,
			{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 2'  formula='1366 * 2'}"} 2x,
			{exp:ce_img:single parse='inward' src='{embed:src}' url_only='yes' quality="80" max_width="{exp:math max='{embed:max} * 3'  formula='1366 * 3'}"} 3x"
	alt="{embed:alt}" class="responsive-image {embed:class}" />


</picture>

{/if}