Jekyll Responsive Images

Jekyll Responsive Images is a Jekyll plugin 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

You can either use the gem and update your _config.yml:

$ gem install jekyll-responsive_image

# _config.yml
gems: [jekyll-responsive_image]

Or you can simply copy responsive_image.rb into your _plugins directory.

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 # Override JPEG quality (default is 85). 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 %}
>