Jekyll plugin adding a Liquid tag for Cloudinary, for better responsive images
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Jekyll Cloudinary Liquid tag

Gem Version Gem Downloads

jekyll-cloudinary is a Jekyll plugin adding a Liquid tag to ease the use of Cloudinary for responsive images in your Markdown/Kramdown posts.

It builds the HTML for responsive images in the posts, using the srcset and sizes attributes for the <img /> tag (see the "varying size and density" section of this post if this is new for you, and why it's recommended to not use <picture> most of the time). URLs in the srcset are cloudinary URLs that fetch on-the-fly the post's images and resize them to several sizes.

You are in full control of the number of generated images and their sizes, and the sizes attribute that helps the browser decide which image to download. See the complete configuration options for details.

Here is the general syntax of this Liquid tag:

{% cloudinary cloudflare.png alt="Un schéma montrant l'apport de Cloudflare" caption="Un schéma montrant l'apport de Cloudflare" %}

Table of contents


Sign up for free on Cloudinary! The free account should be enough for most blogs.

Add gem 'jekyll-cloudinary' to the jekyll_plugin group in your Gemfile:

source ''

gem 'jekyll'

group :jekyll_plugins do
  gem 'jekyll-cloudinary'

Then run bundle to install the gem.


Mandatory settings

Add cloudinary to your _config.yml and your Cloudinary "Cloud name" (find it in your Cloudinary dashboard):

  cloud_name: <put here your Cloudinary "Cloud name">

Optional global settings

You can now define some global settings

  only_prod: true
  verbose: true

only_prod (default: false)

When set to true, this setting implies that responsive image HTML and Cloudinary URLs are generated only if the environnement is production.

For example:

  • if you run JEKYLL_ENV=production bundle exec jekyll build, you'll get the code to deploy, with srcset and Cloudinary URLs.
  • if you run JEKYLL_ENV=development bundle exec jekyll serve, you'll get code for local development, with standard <img src="…"> code and local URLs.

JEKYLL_ENV=development is the default value.

If you don't set only_prod or set it to false, responsive image HTML and Cloudinary URLs are always generated, whatever the environment. jekyll-cloudinary had only this behavior before version 1.11.0.

verbose (default: false)

When set to true, this setting will show messages in the console when something goes wrong, such as:

[Cloudinary] Couldn't find this image to check its width: /path/to/jekyll/_site/assets/img.jpg


[Cloudinary] Natural width of source image 'img.jpg' (720px) in _posts/ not enough for creating 1600px version


When origin_url is set, jekyll-cloudinary will use this URL rather than site.url as origin of the source images.

This allows you to store your source image on a different domain than your website.

Optional (but highly recommended) presets

You can now define the presets you need for your posts' images, starting with the default one:

Default preset

The default preset is the one you don't even have to mention when using the Liquid tag, and that will be used if a preset you use in the tag doesn't exist.

      min_width: 320
      max_width: 1600
      fallback_max_width: 800
      steps: 5
      sizes: "(min-width: 50rem) 50rem, 90vw"

This preset will generate five images 320 to 1600 pixels wide in the srcset and define sizes as "(min-width: 50rem) 50rem, 90vw". The fallback image defined in the src will have a width of 800 pixels.

With this preset, you only have to write this in your Markdown post:

{% cloudinary /assets/img.jpg alt="beautiful!" %}

To get this HTML:

  srcset="<cloud_name>/image/fetch/c_limit,w_320,q_auto,f_auto/https://<your-domain>/assets/img.jpg 320w,<cloud_name>/image/fetch/c_limit,w_640,q_auto,f_auto/https://<your-domain>/assets/img.jpg 640w<cloud_name>/image/fetch/c_limit,w_960,q_auto,f_auto/https://<your-domain>/assets/img.jpg 960w<cloud_name>/image/fetch/c_limit,w_1280,q_auto,f_auto/https://<your-domain>/assets/img.jpg 1280w<cloud_name>/image/fetch/c_limit,w_1600,q_auto,f_auto/https://<your-domain>/assets/img.jpg 1600w
  sizes="(min-width: 50rem) 50rem, 90vw"

There is a true default default preset, but you're strongly encouraged to override it with your own default preset.

Additional presets

You can add other presets if you need several image sizes in your posts.

Here is an example for images that take only one third of the post width:

      min_width: 110
      max_width: 535
      fallback_max_width: 300
      steps: 3
      sizes: "(min-width: 50rem) 17rem, 30vw"
        class: "one3rd"

To use this additional preset, you will have to write this in your Markdown post:

{% cloudinary onethird /assets/img.jpg %}

The generated element will also get a class="one3rd" that can be useful for example with this CSS:

.one3rd {
  max-width: 33%;
  float: right;
  margin: 0 0 1em 1em;

Detailed preset settings

figure (default: auto)

This setting lets you decide what to do when there is a caption attribute in the Cloudinary Liquid tag.

The value can be:

  • auto (default): will generate a <figure> and <figcaption> only if there's a caption
  • never: will always generate a <img>, losing the caption
  • always: will always generate a <figure> and <figcaption>, even if there's no caption attribute

If a <figure> is generated and there are attributes in the Liquid tag, they are added to the <img> if they are alt or title, or to the <figure>.

min_width (default: 320)

max_width (default: 1200)

fallback_max_width (defaut: 1200)

steps (default: 5)

sizes (default: "100vw")

attributes (default: none)

Attributes are added without transformation to the generated element.

You can obviously define the alt attribute, mandatory for accessibility, but you can also set a title, a class, aria-* attributes for enhanced accessibility, or even data-* attributes you would like to use later with CSS or JavaScript.

The caption attribute is the only one that can act differently, depending on the figure setting.

alt, title and caption attributes can contain Markdown.

Live example

Go to this post:

The source Markdown is here:

The content is in french, yes, but look only at the images if you don't understand.

You'll find here:

These image types need different settings to deal with different sizes and position:

  • screenshot always use the full content width, if they're wide enough
  • logos are centered and take one half of the content width on small screens, and are floated and take one fourth of the content width on larger screens

This is how I use the Cloudinary Liquid tag for the Cloudinary logo and prices table screenshot:

{% cloudinary logo /assets/logos/cloudinary.png alt="Logo de Cloudinary" %}
{% cloudinary cloudinary-pricing.png alt="Les tarifs de Cloudinary" caption="Les tarifs de Cloudinary, dont l'offre gratuite déjà généreuse" %}

The only difference is that I explicitly use the logo preset for the logo. The other image uses the default preset.

Here is the necessary configuration for this:

  verbose: false
      min_width: 320
      max_width: 1600
      fallback_max_width: 800
      steps: 5
      sizes: '(min-width: 50rem) 50rem, 90vw'
      figure: always
      min_width: 80
      max_width: 400
      fallback_max_width: 200
      steps: 3
      sizes: '(min-width: 50rem) 13rem, (min-width: 40rem) 25vw, 45vw'
      figure: never
        class: logo

It generates these HTML fragments (pretty printed here), for the logo:

  srcset=",w_80,q_auto,f_auto/ 80w,,w_240,q_auto,f_auto/ 240w,,w_400,q_auto,f_auto/ 400w"
    (min-width: 50rem) 13rem,
    (min-width: 40rem) 25vw,
  alt="Logo de Cloudinary"

And for the screenshot:

    srcset=",w_320,q_auto,f_auto/ 320w,,w_640,q_auto,f_auto/ 640w,,w_960,q_auto,f_auto/ 960w,,w_1208,q_auto,f_auto/ 1208w"
    sizes="(min-width: 50rem) 50rem, 90vw"
    alt="Les tarifs de Cloudinary"
  <figcaption>Les tarifs de Cloudinary, dont l'offre gratuite déjà généreuse</figcaption>

There are only 4 version in the srcset here because 2 of the 5 expected sizes are larger than the source image, and are replaced by one using the native source image width.

And here are the relevant parts of the accompanying CSS (in Sass form):

article {
  figure, img {
    margin: 2em auto;
    display: block;
    max-width: 100%;
    height: auto;

.logo {
  display: block;
  margin: 1em auto;
  max-width: 50%;
  height: auto;

  @media (min-width: 40em) {
    max-width: 25%;
    float: right;
    margin: 0 0 1em 1em;


Thanks for your interest in contributing! There are many ways to contribute to this project. Get started here.

Do you use the plugin on a live site?

Add it to the "Sites" page of the wiki and please let me know on Twitter: @nhoizey