Jekyll srcset imgix implementation with include file, srcset/sizes in config, YAML-provided images, and temporarily assigned variables

2016-02-13-example.md

title	image
example srcset implementation	src alt /images/example.jpg Don’t forget alt text.

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

config.yml

sizes: '(min-width: 70em) 1000px, (min-width: 50em) 750px, (min-width: 40em) 500px, 100vw'

srcset:
  - 500
  - 750
  - 1000

srcset.html

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