Responsive-Image.html.liquid

<!--
RESPONSIVE IMAGE SNIPPET
Based on https://gist.github.com/zacwasielewski/6140785cf500d63fcb26
Works with both product and blog images.

I usually include this, like so for products:
{% for image in product.images %}
  <img src="#" data-srcset="{% include 'responsive-image', image: image, product: 'true' %}">
{% endfor %}

and like this for blog images
{% assign img-src = article.content | split: 'src="' %}
{% assign featuredImgSrc = img-src[1] | split: '"' | first %}
<img src="#" data-srcset="{% include 'responsive-image', image: featuredImgSrc %}">
-->

{% if product == 'true' %}
{{ image.src | product_img_url: 'small' }}     100w,
{{ image.src | product_img_url: 'compact' }}   160w,
{{ image.src | product_img_url: 'medium' }}    240w,
{{ image.src | product_img_url: 'large' }}     480w,
{{ image.src | product_img_url: 'grande' }}    600w,
{{ image.src | product_img_url: '1024x1024' }} 1024w,
{{ image.src | product_img_url: '2048x2048' }} 2048w
{% else %}
{% assign imageSrc = image | replace: '//cdn', 'http://cdn'; | replace: 'http:http://';, 'http://'; | remove: 'https:' | remove: '_small' | remove: '_compact' | remove: '_medium' | remove: '_large' | remove: '_grande' | remove: '_1024x1024' | remove: '_2048x2048' %}
{{ imageSrc | replace_first: '.jpg', '_small.jpg' }} 100w,
{{ imageSrc | replace_first: '.jpg', '_compact.jpg' }} 160w,
{{ imageSrc | replace_first: '.jpg', '_medium.jpg' }} 240w,
{{ imageSrc | replace_first: '.jpg', '_large.jpg' }} 480w,
{{ imageSrc | replace_first: '.jpg', '_grande.jpg' }} 600w,
{{ imageSrc | replace_first: '.jpg', '_1024x1024.jpg' }} 1024w,
{{ imageSrc | replace_first: '.jpg', '_2048x2048.jpg' }} 2048w
{% endif %}