mediocre-blog/_includes/image.html

<div style="
  box-sizing: border-box;
  text-align: center;
  padding-left: 2em;
  padding-right: 2em;
  margin-bottom: 1em;
  {%- if include.float %}
  float: {{ include.float }};
  {% endif -%}
  {%- if include.float or include.inline %}
  max-width: 49%;
  {% endif -%}
  {%- if include.inline %}
  display: inline-block;
  {% endif -%}
  ">
  <a href="/img/{{ include.dir }}/{{ include.file }}" target="_blank">
    <picture>
      {%- if include.width %}
      {%- for targetWidth in site.img_widths reversed -%}
      {% if include.width <= targetWidth %}{% continue %}{% endif %}
      {%- if targetWidth > 1000 %}
      <source media="(min-width: 1000px) and (min-resolution: {{ targetWidth | divided_by: 1000.0 }}dppx)"
      {%- elsif targetWidth > 500 %}
      <source media="(min-width: 500px), (min-resolution: 1.1dppx)"
      {%- else %}
      <source
      {% endif %}
              srcset="/img/{{ include.dir }}/{{ targetWidth }}px/{{ include.file }}"
              >
      {%- endfor %}
      {%- endif %}
      <img style="max-height: 60vh;"
           {% if include.width < 1000 %}
           src="/img/{{ include.dir }}/{{ include.file }}"
           {% else %}
           src="/img/{{ include.dir }}/1000px/{{ include.file }}"
           {% endif %}
           alt="{{ include.descr }}" />
    </picture>
  </a>
  {%- if include.descr %}<br/><em>{{ include.descr }}</em>{%- endif %}
</div>