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