Using Netlify's Image CDN Beta in Jekyll

Whilst I’m not anticipating this to be an image heavy blog, I did want to get the image process set from the start so that I wouldn’t end up in the scenario of having to rewrite image URLs or old posts months down the line.

After a little bit of browsing, I found that Netlify currently have an image CDN in beta. As I’m using Netlify for my hosting already (and it’s free!), it seemed like the perfect choice.

With Netlify Image CDN, you can transform images on demand without impacting build times. Netlify Image CDN also handles content negotiation to use the most efficient image format for the requesting client. Optimizing the size and format of your images improves both the runtime performance and reliability of your site. Transformations are integrated natively into the CDN so that repeated requests leverage layers of caching for improved performance.

Sounds great.

The process is very straightforward, you make a request to /.netlify/images with your specific query parameters to determine the required transformations & optimisations. All of the various configurations are detailed nicely in the Netlify docs.

As I’m using Jekyll as my static site generator, I still needed a way for me to preview the site locally with images before they’re deployed to Netlify. Thankfully, Jekyll offers environment variables that you can use within your if statements to change the source of the image.

I use a Jekyll include of _includes/img.html within my posts to keep the majority of the HTML out of the markdown - allowing me to just pass in the variables I care about; image filename, alt text & an optional class on the picture element. With the development env var, I just load the files locally from disk without any optimisation. However, when they get onto production they will be replaced with the correct URL to call the Netlify CDN, like so:

<picture class="{{include.class}}" >
  {%- if jekyll.environment == 'development' -%}
    <source srcset="/images/{{include.src}}">
    <img
      loading="lazy"
      alt="{{include.alt}}"
      src="/images/{{include.src}}"
    />
  {%- else -%}
    <source srcset="https://jacobgibbs.co.uk/.netlify/images?url=/images/{{include.src}}&fm=webp&q=75">
    <img
      loading="lazy"
      alt="{{include.alt}}"
      src="https://jacobgibbs.co.uk/.netlify/images?url=/images/{{include.src}}&fm=webp&q=75"
    /> 
     {%- endif -%}
</picture>

With all that, it means I can keep the actual image embed within my markdown posts pretty simple. The following is used to render the image below:

 {% include img.html src="graffiti.jpg" alt="A wall covered in colourful graffiti" %} 

There you have it, a nicely optimsed image converted to webp and served by Netlify’s CDN - all with the ability for me to still be able to preview my posts locally before I deploy.

Edit: For reference, I didn’t do any optimisation on the original image and it was coming in at 3.5MB locally, whereas the optimised image from Netlify is downloading at 297kB - a decent saving for very little effort on my part!