Moving to Responsive Images can give great page load benefits, but it does require more complex markup. This site uses Jekyll and is hosted on gh-pages, which limits the plugins available. I'd previously explored using 1Writer Templates to make it easier to generate this more complex embed code, but here I will be exploring what feels like a more robust and flexible solution - using HTML templates within _includes.

In my front matter (in _config.yml) I added some new site-wide defaults and configurations relating to Responsive Images (and Dynamic Image requests):

#srcset, sizes and dynamic media related
image_url: /images
amp_base: //i1.adis.ws/i/bendemo
default_width: "1000"
sizes: "(min-width: 1020px) 60vw, 90vw"

srcset:
  - 600
  - 850
  - 1200

Create a new file in your _includes folder (mine was called srcset-sizes.html) which contains the logic and markup to loop through the array of srcset values and sizes values, and to generate the html markup to make a responsive images request:

{% raw %}
<img
  src="{{image_url}}/{{ image.src }}"
  sizes="`{{ site.sizes }}"
  srcset="{% for width in site.srcset %}{{ site.image_url }}/{{ width }}/{{ image.src }} {{ width }}w{% if forloop.last == false %}, {% endif %}{% endfor %}"
  alt="{{ image.alt }}"
/>
{% endraw %}

Then in my blogpost itself, I pass in some front matter details of the image to be used:

image: - src: Butterfly.jpg alt: 'Butterfly, fluttering by.'

and at the appropriate place in the post, call the array index of the image and then pass this into our relevant _includes file :

{% raw %}
Srcset:  
{% assign image = page.image[0] %}
{% include srcset-sizes.html %}
{% endraw %}

Here is a live example (image size superimposed on the source image):

{% assign image = page.image[0] %} {% include srcset-sizes.html %}

This workflow relies on me having made different image sizing variants of that same image, and placing them in the appropriate size-named-folder i.e. '/images/850/Butterfly.jpg'.

** Learn more about Responsive Images from this ebook: Practical Responsive Images **

In this case, I created an additional _includes file to cover the relevant requests for a Dynamic Media service (in this case from Amplience Dynamic Media solution)

The main difference being to include the relevant image commands, such as: ?w=1000&qlt=65, and know that every image variant will be generated instantly as needed.

Here is the full includes file.

{% raw %}
<img
  src="{{ site.amp_base }}/{{ image.id }}.jpg?w={{ site.default_width }}&qlt={{ quality }}"
  sizes="{{ site.sizes }}"
  srcset="{% for width in site.srcset %}{{ site.amp_base }}/{{ image.id }}.jpg?w={{ width }}&qlt={{ quality }} {{ width }}w{% if forloop.last == false %}, {% endif %}{% endfor %}"
  alt="{{ image.alt }}"
/>
{% endraw %}

Here is a live example using srcset and Dynamic Media (via Amplience): {% assign image = page.DM-image[0] %} {% include srcset-and-dm.html %}

Any questions - I'd love to hear from you on twitter @bseymour