Jekyll Responsive Images

Jekyll Responsive Images is a Jekyll tag and utility for automatically resizing images. Its intended use is for sites which want to display responsive images using something like srcset or Imager.js.

Installation

Install the gem yourself

$ gem install jekyll-responsive-image

Or simply add it to your Jekyll _config.yml:

gems: [jekyll-responsive-image]

Configuration

An example configuration is below.

responsive_image:
  template: '_includes/responsive-image.html' # Path to the template to render. Required.

  # An array of resize configurations. When this array is empty (or not specified),
  # no resizing will take place.
  sizes:
    - width: 480 # How wide the resized image will be. Required
    - width: 800
      quality: 90 # JPEG quality. Optional.
    - width: 1400

Usage

Replace your images with the responsive_image tag, specifying a path to the image.

{% responsive_image path: assets/my-file.jpg %}

Any extra attributes will be passed to the template.

{% responsive_image path: assets/image.jpg alt: "Lorem ipsum..." title: "Lorem ipsum..." %}

Create a template to suit your needs. A basic template example is below.

<img src="/{{ path }}"
     alt="{{ alt }}"
     title="{{ title }}

     {% if resized %}
         srcset="{% for i in resized %}
             /{{ i.path }} {{ i.width }}w{% if forloop.last == false %},{% endif %}
         {% endfor %}"
     {% endif %}
>