Skip to content
This repository has been archived by the owner on Aug 14, 2023. It is now read-only.


Repository files navigation


This project has reached the end of its development. Feel free to browse the code, but please use other solutions for integrating imgix into your Jekyll projects.

imgix logo

jekyll-imgix is a plugin for integrating imgix into Jekyll sites. No Maintenance Intended Gem Version Downloads


First, add liquid and jekyll-imgix to the :jekyll_plugins group in your Gemfile:

group :jekyll_plugins do
  gem 'rouge'
  gem 'kramdown'
  gem 'liquid'
  gem 'jekyll-imgix'

Then include jekyll-imgix in the plugins: section of your _config.yml file:

plugins: [jekyll/imgix]


jekyll-imgix requires a configuration block in your _config.yml:

  source: # Your imgix source address
  secure_url_token: FACEBEEF12 # (optional) The Secure URL Token associated with your source
  include_library_param: true  # (optional) If `true` all the URLs will include `ixlib` parameter

Multi-source configuration

In addition to the standard configuration flags, the following options can be used to serve images across different sources.

  sources:  # imgix source-secure_url_token key-value pairs. FACEBEEF12            # Will generate unsigned URLs
  default_source:  # (optional) specify a default source for generating URLs.

Note: sources and source cannot be used together.


jekyll-imgix does not do anything unless JEKYLL_ENV is set to production. For example, you will want to run JEKYLL_ENV=production jekyll build before deploying your site to production.

jekyll-imgix exposes its functionality as a single Jekyll Filter, imgix_url.

Pass an existing image path to it to activate it:

<img src={{ "/images/bear.jpg" | imgix_url }} />

That will generate the following HTML in your output:

<img src="" />

You can also pass parameters to the imgix_url helper like so:

<img src={{ "/images/bear.jpg" | imgix_url: w: 400, h: 300 }} />

Which would result in the following HTML:

<img src="" />

Multi-source usage

To use jekyll-imgix in a multi-source setup:

<img src={{ "/images/bear.jpg" | imgix_url: "", w: 400, h: 300 }} />
<img src={{ "/images/bear.jpg" | imgix_url: w: 400, h: 300 }} />  <!-- will use default_source from config -->

Which would generate:

<img src="" />
<img src="" />

In absence of correctly configured default_source, imgix_url will report RuntimeError if it's used without specifying a valid source.


Bug reports and pull requests are welcome on GitHub at

Code of Conduct

Users contributing to or participating in the development of this project are subject to the terms of imgix's Code of Conduct.


FOSSA Status