Jekyll image resizing with CloudCannon

Question

I'm looking find a nice way to resize images uploaded by my client using CloudCannon.

I've looked at Jekyll plugins for doing this but they don't seem to play nicely with CloudCannon.

Does anyone have any tips or tricks for getting this to work?

Here is the code I am currently using:

<div class="section blog">
  <div class="container">
    <div class="row blog__items">
      {% for post in site.posts %}
        <div class="blog__item col-xs-6 col-sm-4">
          <div class="article">
            <div class="article__head">
              <a href="{{ site.baseurl }}{{ post.url }}" class="article__media">
                <img src="{{ site.baseurl }}{{ post.image }}">
              </a>
              <h3 class="article__title"><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h3>
            </div>
            <div class="article__body">
              <div class="article__meta">
                <p class="article__date"><small>Posted on {{ post.date | date: "%d %B, %Y" }}</small></p>
              </div>
              <div class="article__text">
                {{ post.description }}
              </div>
              <a href="{{ site.baseurl }}{{ post.url }}" class="article__cta btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

Answer 1

I would use an 'image resize service' or 'image resize CDN'.

I have benchmarked a few. They all work kind-of the same, but all have their specifics. Some are free, some not. Google even has its own unofficial free image resize service (somebody got the link?). ImgIX is nice, but performed really bad at low-traffic websites when I tested it some time ago. They seem to have addressed the issue recently (2017), but I did not retest it.

For low-traffic websites I recommend to use the free images.weserv.nl.

To use this solution, replace this part:

<img src="{{ site.baseurl }}{{ post.image }}">

with this:

<img src="//images.weserv.nl?url={{ site.baseurl | replace:'http://','' }}{{ post.image }}&w=600">

This will create a default compressed image with a width of 600 pixels, with a quality setting of 85% (if jpg). For more info, see the documentation.

Note that with images.weserv.nl you will have only one shot at creating the resized image. There is no option to change or clear the cache if the request failed (or the image changed). The cache will automatically be deleted/expire in a month or so.